$$$$$$$$$$$$$$$$$$$$$$$$
Cómo crear mapas web sincronizados
$$$$$$$$$$$$$$$$$$$$$$$
Muchas son la razones para elegir Leaflet como herramienta para publicar los mapas en la web. Una de estas razones es la gran cantidad de plugins disponibles. Hay más de 400 plugins y su número sigue creciendo por la comunidad de desarrolladores que hay detrás del proyecto. Los plugins forman parte de la filosofía de Leaflet, es decir un código sencillo y liviano que contiene solo los elementos básicos y que se completa con los desarrollos externos.
En esta ocasión vamos a fijarnos en tres plugins que nos permiten crear mapas web sincronizados, es decir nos permiten visualizar dos (o más capas) a la vez.
Leaflet side by side
El plugin leaflet-side-by-side crea un control que agrega una pantalla dividida en dos partes lo que nos permite comparar dos mapas. En el centro del mapa crea un control que podemos desplazar en función de la vista que queramos seleccionar. Como es más fácil de entender viéndolo, vamos a insertar un ejemplo con una aplicación de este plugin.
Veamos como se utiliza:
En primer lugar tendremos que acudir a la página del plugin y proceder a su descarga.
El archivo que nos interesa es leaflet-side-by-side.js.
En nuestro archivo html crearemos la referencia a este archivo junto a las de la librería Leaflet:
A continuación tenemos que crear las dos capas que queremos visualizar en el mapa. En este caso utilizamos una capa de OpenStreetMap y otra de PNOA.
Para crear el control, solo se necesita escribir los nombres de las capas que queremos visualizar de la siguiente forma:
Como vemos, utilizar este plugin es muy sencillo y proporciona un vistoso control, muy útil para comparar dos capas.
Sincronizar ventanas
Con el plugin leaflet.Sync podemos dividir la pantalla en dos o más partes, de tal forma que cada una muestre un mapa. Las operaciones que hagamos sobre una de las vistas, como pan o zoom, se trasladan al resto de las vistas.
En esta ocasión el archivo que nos proporciona el plugin es L.Map.Sync.js.
Como vamos a utilizar dos mapas tenemos que dividir nuestro espacio en dos partes y asignarle unos estilos. Para ello creamos dos id que llamamos map1 y map2.
A continuación creamos dos <div>
Una vez creados los «espacios» para alojar los mapas, procedemos a definir las capas.
Ahora es el momento de realizar la instancia a la clase map de leaflet:
Para finalizar sincronizamos los dos mapas:
El plugin L.sync dispone de una opción que nos permite desplazar el centro del mapa de alguna de las vistas. La opción offsetFn realiza un desplazamiento del centro del mapa a otros puntos, por lo que podremos introducir un desplazamiento relativo entre las vistas de los dos mapas.
El resultado del código que hemos escrito lo podemos ver en el siguiente mapa.
Leaflet Magnifying Glass
Vamos a finalizar el recorrido por algunos de los plugins de Leaflet que nos permiten visualizar simultáneamente varias capas con Magnifying Glass.
Este plugin crea un área circular con el zoom aumentado. Se consigue un efecto como si mirásemos por una lupa. Podemos hacer que el área ampliada permanezca fija o que se mueva sobre el mapa. También se puede hacer que el mapa que se visualice en la lupa sea diferente del mapa base.
Un ejemplo de este plugin es el siguiente:
En el código anterior vemos que hemos insertado una llamada al plugin mediante:
Se crea una función init() que es disparada en el momento de cargar el archivo (window.onload = init;). Como en las ocasiones anteriores tenemos dos capas. Una capa de OSM que nos servirá de base para el mapa y otra capa de PNOA que utilizaremos para «mirar por la lupa». Mediante la instancia a L.magnifyinGlass definimos las propiedades que tendrá el área circular de la lupa. Se trata de zoomOffset, que define el nivel de aumento de zoom respecto al de la capa base y radius que controla el tamaño de la lupa. Con la opción layers asignamos la capa que deseamos se visualice en la lupa.
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
