Estudio de Leaflet.js

• Mapas interactivos
• Capas de tiles, marcadores, popups
• Fácil de extender con plugins

• Mapas interactivos
• Datos geoespaciales
• Aplicaciones de geolocalización

Instalación: npm i leaflet (o CDN)

const map = L.map('mapa').setView([6.244, -75.581], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

1. Marcador con popup

Mapa con un marcador y ventana de información.

const map = L.map('mapa').setView([6.244, -75.581], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([6.244, -75.581]).addTo(map)
  .bindPopup('<b>Medellín</b><br>Coordenadas del marcador').openPopup();

2. Geolocalización del usuario

Centra el mapa en la ubicación del navegador.

const map = L.map('mapa').setView([0, 0], 2);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

navigator.geolocation.getCurrentPosition((pos) => {
  const { latitude, longitude } = pos.coords;
  map.setView([latitude, longitude], 15);
  L.marker([latitude, longitude]).addTo(map).bindPopup('Estás aquí').openPopup();
});