Salut à tous ! Je viens de publier sur mon GitHub le résultat d'une première soirée de travail (bon en fait une petite heure) sur mon nouveau plugin jQuery que j'ai appelé : osmLeaflet.jQuery
A quoi ça sert ?
J'en avais marre J'étais lassé du "monopole" de Gmap3 qui, finalement, focalise toute l'attention des développeurs sur l'utilisation de Google Maps pour leurs cartes. Attention, je ne dis pas que Gmap3 est mauvais, je dis juste que j'avais envie de proposer une alternative. D'où l'envie d'utiliser Open Street Map.
Et je sais que je ne suis pas le seul à bosser sur une alternative, il y a un plugin Bing! Map en circulation dans ma boîte mail en ce moment.
Mais pourquoi "Leaflet" ?
Il faut savoir qu'Open Street Map ne fournit pas directement de couche graphique. Ce sont des bibliothèques séparées qui fournissent soit juste les "tuiles" graphiques, soit carrément les tuiles et toute une API d'utilisation pour pousser un peu plus loin. C'est le cas de Leaflet que j'utilise parfois quand je dois me passer de Google Maps.
L'avantage de Leaflet sur Google Maps, c'est que c'est sous licence BSD. Du coup, vous pouvez faire ce que vous voulez. Certains ont tendance à l'oublier, mais pour un usage commercial, Google Maps est payant 😉
Côté compatibilité des navigateurs, ça va, Leaflet n'a pas à rougir : IE 6+, FF 3+, Chrome (apparemment toutes versions), Safari 5+, iOS 3+, Android 2+.
Et moi je fais comment ?
Bon alors là le plus simple, ça reste d'aller sur mon GitHub et de récupérer mes sources. Étant encore en alpha, j'ai pas mis de licences dessus pour le moment. Mais ça sera sûrement du BSD ou du CreativeCommons BY.
Ensuite pour l'utilisation, c'est très simpliste aussi. Vous avez besoin d'une DIV côté HTML, de quelques appels CSS et JS :
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /> <![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
Comme vous l'aurez remarqué, mon plugin est compatible avec jQuery 1.7.1 (la dernière version disponible à l'heure où j'écris ces lignes). Je compte le tester avec les versions antérieures mais je vous encourage plutôt à vous mettre à jour.
Et pour utiliser, je vous laisse le soin d'inclure mon fichier osmLeaflet.jquery.js depuis là où vous l'aurez placé.
Enfin, voilà des exemples de code en attendant que je fasse une vraie documentation, que je commente et que je fasse aussi les tests unitaires qui seront nécessaires.
$(document).ready(function () {
// Initialisation de la map
var osmMap = $(document).osmLeaflet({
target : 'map',
zoom : 12,
lattitude : 51.50,
longitude : -0.09
});
// Ajout d'un marker
osmMap.osmLeaflet('addMarker', {lattitude : 51.50, longitude : -0.09});
// Ajout d'une popup
osmMap.osmLeaflet('addPopup', {lattitude : 51.51, longitude : -0.13, text : "Hey !"});
});
Voilà, à vous de jouer pour vos propositions de fonctionnalités, vos questions, vos critiques, vos correctifs ou encore vos remontées de bogues !
