Cómo aplicar un filtro de escala de grises a las teselas de Leaflet


En este tutorial veremos cómo aplicar un filtro de escala de grises a las teselas de Leaflet Modificando el CSS.


El código completo para visualizar el mapa a pantalla competa en formato HTML lo tenéis a continuación, para los que no estén familiarizados con el lenguaje HTML, solo tenéis que copiar y pegar en un editor de texto y guardarlo con la extensión .html

Finalmente, una vez guardado podéis abrirlo con cualquier navegador.

						
<!DOCTYPE html>
<html lang="en">
	<head>
	  	<title>Leaflet-Grayscale</title>
	  	<meta charset="utf-8" />
	  	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
		<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
	  	<style type="text/css">
			.leaflet-tile-loaded {
			    filter: brightness(1) invert(1) grayscale(10);
			}
			.leaflet-container a {
				color: #000000;
			}
			.leaflet-container .leaflet-control-attribution {
				background: none;
				background-color: #fff;
			}
			body { margin:0; padding:0; }
			#map { position:absolute; top:0; bottom:0; width:100%; }
	  	</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			var map = L.map('map').
			setView([40.452173, -3.690662], 
			15);
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
			    maxZoom: 18
			}).addTo(map);
	    </script>
	</body>
</html>
						
					

Vamos a mostraros un poco de magia CSS y explicaros el código.

La primera parte del código se inserta en la cabecera o head, en ella aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript de Leaflet necesarios para que el mapa sea interactivo.

						
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
						
					

La segunda parte del código que también se incluye en el head, hace referencia a los estilos de este mapa en particular, aquí es donde vamos a cambiarle el aspecto grafico del mapa, para ello aplicaremos los estilos directamente sobre las teselas de Leaflet.

Si nos fijamos en cualquier mapa de Leaflet, al cargar las teselas, estas aparecen etiquetadas en la clase leaflet-tile-loaded, así que debemos aplicar el filtro sobre esa clase, de la siguiente manera:

						
.leaflet-tile-loaded {
    filter: brightness(1) invert(1) grayscale(10);
}
						
					

Donde brightness es el brillo, invert se utiliza para invertir las muestras de color, y grayscale para cambiar las imágenes a una escala de grises.

También hemos querido darle un aspecto atractivo a la parte inferior del mapa, donde se insertan las atribuciones, dándoles un color acorde al mapa de la siguiente manera:

						
.leaflet-container a {
	color: #000000;
}
.leaflet-container .leaflet-control-attribution {
	background: none;
	background-color: #fff;
}
						
					

Y para finalizar con el apartado de estilos, le damos el tamaño apropiado al contenedor del mapa, de la siguiente manera:

						
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
						
					

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que está directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

						
<div id="map"></div>
						
					

Finalmente, la parte del script está dividida en 3 partes importantes:

La parte que hace referencia a las coordenadas geográficas del punto central del mapa en grados decimales, donde la primera coordenadas es la Latitud y la segunda coordenada es la Longitud.

El número que aparece a continuación es el factor de escala del mapa, donde 1 es escala pequeña y los siguientes números escalas más grandes.

En el apartado atribución se identifica a los creadores del código Javascript, como Leaflet y la fuente de la base de datos como OpenStreetMap así como la licencia, en este caso CC BY-SA.

Y para cerrar la parte del Script podemos añadir el zoom máximo del mapa (maxZoom: 18).

						
<script>
	var map = L.map('map').
	setView([40.452173, -3.690662], 
	15);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	    maxZoom: 18
	}).addTo(map);
</script>
						
					

Modificando el filter podemos hacer muchos tipos de mapas diferentes, por ejemplo, cambiando el tono, la saturación o el brillo.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.


¿Eres desarrollador? Únete a la red