Leaflet.js la mejor alternativa gratuita a la API de Google Maps

A continuación 3 demos de uso con mapas Leaflet. Como ya sabes usar la API de Google Maps dejo de ser totalmente gratuita, ahora se necesita como mínimo crearte una cuenta de facturación… No voy a entrar en detalles, solo quería mostrar cual ha sido para mi la mejor alternativa gratuita a los mapas de google.

Leaflet.js es una librería JavaScript open-source para crear mapas interactivos de OpenStreetMaps.

Por si os interesa también podéis usar mi herramienta gratuita para obtener las coordenadas (latitud y longitud) de un punto o dirección concreta.

Al grano, a continuación los 3 ejemplos más comunes que veníamos usando con google maps… pero usando leafletjs:

1. Mapa simple con 1 marcador:

var lat = '42.603';
var lng = '-5.577';
var zoom = 10;

var map = L.map('map').setView([lat, lng], zoom);

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

L.marker([lat, lng])
.addTo(map);

Demo:

/p>

2. Mapa simple con 1 marcador y ventana o popup de marcador:

Lo que venia siendo el InfoWindow en google maps:

var lat = '42.603';
var lng = '-5.577';
var zoom = 10;

var map = L.map('map').setView([lat, lng], zoom);

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

L.marker([lat, lng])
.addTo(map)
.bindPopup('Lorem ipsum<br><a href="https://www.bufa.es/">www.bufa.es</a>')
.openPopup();

Demo:

(*) Sino quieres que por defecto la ventana este abierta, elimina la última linea (.openPopup()) y solo se abirar cuando pinches en el marcador.

3. Mapa con múltiples marcadores: (más info)

Creamos un array para almacenar el texto de la ventana, latitud y longitud de cada marcador.

var markers = [
  ["León", 42.5989995, -5.5682413],
  ["Zamora", 41.6857693, -5.9423150],
  ["Salamanca", 40.7665581, -6.0217649]
];
var zoom = 6;

var map = L.map('map').setView([41.6857693, -5.9423150], zoom);

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

for (var i = 0; i < markers.length; i++) {
  marker = new L.marker([markers[i][1],markers[i][2]])
    .bindPopup(markers[i][0])
    .addTo(map);
}

Demo: