Leaflet bàsic: OpenStreetMap amb markers

 

Una altra de les llibreries JavaScript molt emprades per a webMapping és Leaflet:

 

 

 

Sovint s'ha referit a Leaflet com la germana petita d'openLayers, ja que és més lleugera, senzilla d'implementar i en principi sense tantes opcions. Però la quantitat de Plugins que s'estan oferint fa que hagi deixat la germana petita per a passar a ser una alternativa molt vàlida.

 

L'exemple a continuació consulta la base cartogràfica d'OpenStreetMap i posa un marcador al Parc Bit d'Alaior indicant les IV Jornades. El primer pas és cridar la llibreria Leaflet i el seu estil:

 

							<!--Leaflet-->
							<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
							<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" type="text/css">
						
 

Crearem un <DIV> a la pàgina amb el nom 'map' i amb les dimensions que volguem on hi inserirem el mapa:

 

							<div id="map"  style="width: 980px; height: 400px"></div>
						
 

Crearem la capa OSM, sempre dins el tag "script":

 

							var layerOSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
								maxZoom: 19
							});	
						
 

Crearem l'objecte mapa, i les coordenades de la vista inicial i el zoom:

 

						<script type="text/javascript">
							var mymap = L.map('map',{
								center: [39.933892, 4.149343]
								, zoom: 16
								, layers: [layerOSM]
							});						
						</script>
						
 

I finalment, afegirem un marcador:

 

							var marker = L.marker([39.933892, 4.149343]).bindPopup("
IV Jornades Geogràfiques
Parc Bit
").addTo(mymap);
 

I aquí teniu el codi agrupat:

 

						<html>
						<head>
							<meta charset="UTF-8">
							<!--Leaflet-->
							<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
							<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" type="text/css">
						</head> 

						<body > 
							<!--Mapa-->
							<div id="map"  style="width: 100%; height: 100%;"></div>
</body> <script type="text/javascript"> //Capa OSM var layerOSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }); //Mapa var mymap = L.map('map',{ center: [39.933892, 4.149343] , zoom: 16 , layers: [layerOSM] }); //Marcador var marker = L.marker([39.933892, 4.149343]).bindPopup("
IV Jornades Geogràfiques
Parc Bit
").addTo(mymap); </script> </html>