Cómo crear un visor Leaflet con datos personalizados desde Google My Maps.


En este tutorial veremos cómo crear un mapa básico Leaflet en el que incluiremos puntos creados con el servicio de mapas personalizados ofrecidos por la plataforma Google My Maps.


Nota: También existe la posibilidad de hacerlo con geometrías de líneas y polígonos, pero en este tutorial nos centraremos en los puntos.


Generación de datos en Google My Maps

Lo primero, sería crear una cuenta en la plataforma con nuestro usuario de Gmail en este enlace.

Una vez iniciada la sesión, daremos clic en EMPEZAR y a continuación sobre la pestaña CREAR UN NUEVO MAPA.


Haremos zoom hasta la localización donde queremos crear geometrías de tipo puntos. Para este tutorial, hemos elegido la localidad de Sant Joan d’Alacant en la provincia de Alicante, en la que crearemos puntos de establecimientos comerciales del municipio.

Nota: ¿Qué otros datos se te ocurre que se pueden recoger? ¿Puntos de interés turístico? ¿parques? ¿hoteles? Dale rienda suelta a tu imaginación y crea tu propio mapa fácil y rápidamente con este tutorial.


1. Cuadro de comandos: Desde aquí podemos definir el nombre del mapa, de la capa, controlar los contenidos e importar y exportar datos, modificar las opciones.

2. Añadir marcador: Herramienta con la que podremos crear nuestros puntos personalizados. Al hacer clic, aparecerá una pestaña en la que definir el título y la descripción de ese punto.

Una vez hemos colocado todos los puntos que necesitamos para nuestro mapa. Tendremos que clicar sobre al lado del título de mapa y a continuación clic sobre “Exportar a KML/KMZ”.

En el desplegable seleccionaremos únicamente la capa de puntos que nos ocupa, en este caso “Establecimientos” que es como la hemos denominado en el cuadro de mandos y nos aseguraremos de marcar la casilla “Exportar como KML en lugar de KMZ”, no admite todos los iconos.

Una vez descargado nuestro archivo “.kml”, deberemos guardarlo en una ubicación adecuada para poder hacer utilizarlo en nuestro visor Leaflet.


Código para Leaflet

Creamos un archivo con formato .html básico. Importante, deberemos cargar el plugin “Omnivore”, un plugin desarrollado por Mapbox que permite utilizar archivos, en formato csv, kml, gpx y wkt.

						
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visor Leaflet con datos personalizados de Google My Maps</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
  <link rel="stylesheet" type="text/css" href="./css/tutorial_css.css">
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <!-- Carga del plugin omnivore-->
  <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
  <script type="text/javascript" src="./js/tutorial_js.js"></script>
</body>
</html>
						

					

Un archivo .css básico.

						
html, body, #map {
  height: 100%;
  padding: 0;
  margin: 0;
}
						

					

Y por último el JavaScript de nuestro visor web.

						
// Creamos la variable "map" que será el contenedor de nuestro visor
var map = L.map('map',{
  center: [38.398600, -0.436578],
  zoom: 15
});

// Carga del mapa base de OSM
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom : 18,
  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>'
}).addTo(map);

// Le damos estilos .SVG a nuestra capa personalizada de tiendas de Sant Joan d'Alacant
// (opcional, otra opción es definir una variable de estilos para puntos de leaflet)

var iconoSVG = L.icon({
    iconUrl: './datos/shop.svg',
    iconSize: [30, 65],
    });

// Capa de puntos .kml cargada con omnivore
var establecimientos = L.geoJson(null, {
	onEachFeature: function(feature, layer){
		layer.bindPopup(feature.properties["name"])
	},
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: iconoSVG});
    }
});

omnivore.kml('./datos/Establecimientos.kml', null, establecimientos).addTo(map);

						
					

Llegados a este punto, deberían aparecer en nuestro mapa los .SVG como icono de los establecimientos.

Nota: Tener en cuenta que para evitar errores con la política de CORS, es necesario lanzar el mapa desde un servidor, podéis valeros de la aplicación XAMPP.



Sobre el Autor


Eduardo Saldaña Olcina

Tecnología, territorio y tapear son las tres t’s que más me interesan. Busco la manera de orientar mi actividad profesional con el fin de aportar un beneficio para las sociedades del hoy y del mañana y qué mejor forma de hacerlo que poniendo al servicio conocimientos y técnicas geoespaciales aplicadas. De perfil multidisciplinar, podrás encontrarme en Alicante o perdido por el mundo, ¡pero siempre listo para contactar para nuevos retos!.


¿Eres desarrollador? Únete a la red