L.gridLayer.googleMutant: utilizando las capas de Google en Leaflet 1.0.+

El proyecto Leaflet fue diseñado desde el principio con la idea de la sencillez. Es una API ligera y más sencilla de usar que OpenLayers, tal y como veíamos en esta entrada: ¿OpenLayers 3 o Leaflet 1.x?. Pero no es posible ver las capas de Google en Leaflet si no es utilizando un complemento.

Uno de los aspectos clave de Leaflet es que ofrece un código base sobre el que se pueden desarrollar complementos para hacer una aplicación más potente.

Hasta la versión 0.7 de Leaflet esta tarea podía realizarse mediante el complemento de Pavel Shramov. Desafortunadamente esta opción no es óptima para la versión 1.0.0 de Leaflet y sus actualizaciones.

google en Leaflet

El problema con Google es que sus Términos de uso prohíben cualquier medio de acceso a mosaicos que no sea a través de la API de Google Maps. Este problema puede solucionarse agregando la API de Google Maps como una capa de Leaflet, mediante el plugin, desarrollado por Iván Sánchez Ortega (Leaflet.GridLayer.GoogleMutant). Se trata de una magnífica herramienta para utilizar las capas de Google en Leaflet, pero no es perfecta, ya que Leaflet debe esperar a que el motor JS de Google Maps cargue los tiles del mapa, por lo que es posible que experimente fallos y retrasos al utilizarlo.

El complemento Leaflet.GridLayer.GoogleMutant utiliza tanto los observadores de mutación DOM como L.GridLayer de Leaflet 1.0.0. Los mosaicos de mapa de fondo siguen siendo solicitados a través de la API de JavaScript de Google Maps, pero cambian de lugar para que se puedan utilizar las funciones de arrastrar y ampliar de Leaflet.

Además este complemento no funciona en el navegador IE10 o inferior. Puede usarse en los navegadores Chrome, Firefox, Safari, IE11 y Edge sin más dificultades.

La política de uso de Google impone ciertas restricciones, por lo que será necesario disponer de una clave de acceso a la API que obtendremos previamente con una cuenta de google.

Una vez realizada esta operación, que nos permitirá obtener una clave de acceso, procederemos de la siguiente forma:

1.- Creamos la llamada a la API de google, con la clave de acceso:

2.- Llamamos a la librería de Leaflet:

3.- Incluimos el archivo JavaScript: Leaflet.GridLayer.GoogleMutant. Podemos hacerlo de dos formas: mediante el CDN que nos carga GoogleMutant directamente.

O bien, descargando el archivo Leaflet.GoogleMutant.js del plugin de Iván Sánchez en cuyo caso escribiremos:

4.- Creamos una referencia a L.GridLayer.GoogleMutant.

Como vemos las capas de Google disponibles son: roadmap, satellite y terrain.

Aplicando estilos a las capas de Google

Tenemos la opción de personalizar el estilo de visualización de las capas.

Por ejemplo, podemos actuar sobre la capa roadmap, ocultando las etiquetas del mapa y haciendo que la capa “road.higway” se muestre de color rojo.

Este sería el resultado:

Ver en tiempo real:

https://mappinggis.com/visores_webmapping/Leaflet_google_plugin.html

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos