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

por

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 vs Leaflet ¿Cuál es mejor?. 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.

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. 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:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

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

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

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

<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/dist/Leaflet.GoogleMutant.js"></script>

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

<script src="Leaflet.GoogleMutant.js"></script>

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

var satMutant = L.gridLayer.googleMutant({
        maxZoom: 24,
        type: "satellite",
    }).addTo(map);

Las capas de Google disponibles son: roadmap, satellite y terrain. Sin embargo solo podremos acceder a los mapas de satellite. Si repetimos esta operación para roadmap o terrain obtendremos un mensaje indicándonos que la capa solo está disponible para fines de desarrollo. Si queremos acceder a estas capas tendremos que cumplir las condiciones de Google

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.

var styled = L.gridLayer.googleMutant({
        type: "roadmap",
        styles: [
            { elementType: "labels", stylers: [{ visibility: "off" }] },
            { featureType: "water", stylers: [{ color: "#FF0000," }] },
        ],
    }).addTo(map);

Este sería el resultado para la capa satellite:

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 en nuestro curso online de web mapping interactivo con Leaflet.