¿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 mapa

Cargar un market

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

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 mapa

Centrar el mapa estableciendo un nivel de zoom

const options = {"maxZoom": 13}
map.fitBounds(markerBounds, options);
Centrado con Zoom
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?