Leaflet: un'ottima alternativa a Google Maps
Quando parliamo di aggiungere una mappa su un sito web, pensiamo subito a:
- Google Maps
- Bing Maps
- OpenStreetMap (già qualcuno di più scafato però)
Ma in verità ci stanno altre valide alternative.
Una è Leaflet, ottima libreria Javascript scritta da uno dei collaboratori di Mapbox.
La libreria è completa, funziona a layer come OSM, la grafica è gradevole e soprattutto pesa molto poco.
Qua sotto potete vedere un esempio completo, con tanto di marker e figure:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
#mapid { width: 800px;height: 600px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(mymap);
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
marker.bindPopup("POPUP").openPopup();
circle.bindPopup("TONDO");
polygon.bindPopup("POLIGONO");
</script>
</body>
</html>
Come vedete, come layer, abbiamo usato uno basato su OpenStreetMap e Mapbox.
(L'API key l'ho trovata negli esempi del sito).
Il suo uso è abbastanza semplice; nel sito ufficiale trovate un'ottima documentazione ed altri esempi.
Enjoy!
javascript leaflet google maps openstreetmap mapbox
Commentami!