Thomas Gratier WebGeoDataVore
Ancien mais peut servir
<img src="super-mario-carte-monde.gif" width="960"
height="501" border="0" usemap="#map" />
<map name="map">
<area shape="circle" coords="232,40,12"
href="http://fr.wikipedia.org/wiki/Arctique" />
<area shape="circle" coords="531,391,12"
href="http://fr.wikipedia.org/wiki/Johannesburg" />
<area shape="circle" coords="226,301,12"
href="http://fr.wikipedia.org/wiki/Cordillère_des_Andes" />
<area shape="circle" coords="562,194,12"
href="http://fr.wikipedia.org/wiki/Turquie" />
<area shape="circle" coords="782,315,12"
href="http://fr.wikipedia.org/wiki/Indonésie" />
<area shape="circle" coords="637,92,12"
href="http://fr.wikipedia.org/wiki/Russie" />
</map>
Mise en oeuvre facilitée avec Gimp (un plugin est présent par défaut)
Bon choix dès qu'on évalue mal le besoin métier à venir.
Un bon choix par défaut pour la plupart des besoins simples comme "Où vous êtes"
var map = L.map('map').setView([47.2053814, -1.560521], 15);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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>'
}).addTo(map);
var quartierCrea = L.marker([47.20659, -1.56329]).addTo(map)
.bindPopup("<b>Bonjour quartier de la création!</b><br />Nous présentons ici.");
quartierCrea.openPopup();
var meltingPotes = L.marker([47.20508, -1.55777]).addTo(map)
.bindPopup("<b>Bon appétit bien sûr!!<b>");
L.polyline( [
[47.20665775248662, -1.563328206539154],
[47.20647553468404, -1.5632852911949155],
[47.20660308721156, -1.562080979347229],
[47.20456949895177, -1.5616893768310547],
[47.20499225848552, -1.5577894449234009]
]).addTo(map).bindPopup("Je mène à la nourriture.");
Pas de solution unique, juste des choix pour s'adapter au besoin