Cómo comparar dos capas simultáneamente en Leaflet


En este tutorial veremos cómo comparar dos capas simultáneamente en Leaflet.js.


Este plugin es muy útil si tenemos dos capas con información del mismo territorio y queremos compararlas. Como siempre te dejo el enlace del repositorio

Solamente debes cargar la librería en tu archivo .html

						
<script type="text/javascript" src="leaflet-side-by-side.js"></script>
						
					

Y inicializar un objeto sideByside. sideBySide extiende L.Control de leafletjs aunque no hereda ni setPosition() ni getPostion, ya que no tiene sentido ubicar el slider en algún lugar que no sea centrado

						
var control = L.control.sideBySide(layer1, layer2).addTo(map);
						
					

Como parámetros admite además de la capa que se situará a la izquierda y de la que se situará a la derecha algunas opciones como padding y thumbsize con las que podemos jugar con el tamaño y la posición del ícono central.

También admite los eventos leftlayeradd, leftlayerremove, rightlayeradd, rightlayerremove, dividermove. Los cuales se lanzan cuando añadimos o borramos la capa de la izquierda o de la derecha o cuando movemos el scroll y los métodos setLeftLayers y setRightLayers

Os dejo un ejemplo completo

						
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Document</title>
	<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet">
	<style>
	#map {
	height: 100vh;
	}
	</style>
</head>
<body>
	<div id="map"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> 
	<script src="leaflet-side-by-side.js" type="text/javascript"></script> 

	<script type="text/javascript">
	    var map = L.map('map').setView([-31.6333294, -60.6900008], 14);

	    var layer1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	    }).addTo(map);

	    var layer2 = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, ' + '<a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' + 'Map data {attribution.OpenStreetMap}',  ext: 'jpg',
	    }).addTo(map);

	    L.control.sideBySide(layer1, layer2).addTo(map);
	</script>
</body>
</html>
						
					



Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red