Open Street Map leaflet.js

¿Qué es leaflet.js?

Es una librería de Javascript que nos permitirá manipular fácilmente los mapas de openstreetmaps

Instalación

En este enlace tenemos las ligrerías necesarias de leaflet.js.

Cargar un mapa

	var map = L.map('map').setView([51.505, -0.09], 13);

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

Cargar un market

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. Easily customizable.')
.openPopup();

Centrar el mapa en una posición al pulsar sobre un botón

function centerLeafletMapOnMarker(map, marker) {
	var latLngs = [ marker.getLatLng() ];
	var markerBounds = L.latLngBounds(latLngs);
	map.fitBounds(markerBounds);
}

Centrar el mapa estableciendo un nivel de zoom

const options = {"maxZoom": 13}
map.fitBounds(markerBounds, options);