osmLeaflet.jQuery, mon plugin pour Open Street Map

Flattr this!

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 !

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.megaptery.com/ Pierrinho

    Super ! Dommage qu’il n’y ait pas un site dédié à ton plugin avec une identité visuelle 😉

    • http://www.mathieurobin.com/ Mathieu

      Ça viendra, je me suis juste lancé dans cette idée hier soir, du coup je me suis concentré sur l’essentiel. Mais il y aura certainement un site, avec tuto. Pour l’identité visuelle, je crois qu’on va faire simple. Ceux qui, comme toi, ont connu les premières versions de mon site savent que le design n’est pas vraiment ma spécialité 😉

  • https://twitter.com/antoinenelisse Antoine Nélisse

    Yeah ! Grande idée ! Y a-t-il une possibilité d’être tenu au courant de l’évolution du projet (newsletter, RSS, compte Twitter dédié,…) ?

    • http://www.mathieurobin.com/ Mathieu

      Pour le moment, il y aura assurément mon compte Twitter (@mathrobin), le RSS de ce même blog. Je ne pense pas créer de services dédiés hors un petit site et le repository github qui existe déjà, que tu peux mettre en « watch ». Merci pour le compliment !

    • http://www.mathieurobin.com/ Mathieu

      J’avais oublié une des fonctions de base de WordPress. Il y a possibilité d’avoir le flux RSS spécifique à ce plugin ici : http://www.mathieurobin.com/tag/osmleaflet-jquery/feed/

      • https://twitter.com/antoinenelisse Antoine Nélisse

        Super, merci !

  • http://html5-tutorial.fr Fabien Nicollet

    Salut,
    A quoi bon faire un plugin jQuery + leaflet + OSM quand l’intégration d’un layer OSM avec leaflet prend une ligne (définition de l’adresse du service TMS)? D’autant plus que leaflet n’est pas lié à un lib third-party, c’est bien dommage de sortir un wrapper de ce genre, non?

    Fabien

    • http://www.mathieurobin.com/ Mathieu

      Tout comme un plugin pour Google Maps ou Bing Map. Les API ne sont pas très compliquées pour nous développeurs, ça on est d’accord. Cependant, ce n’est pas forcément le cas de tous.
      De plus, si on a besoin de générer un rendu différent depuis le serveur, il est plus facile de générer un JSON que de générer du code à exécuter. Ou de se retrouver à écrire un wrapper qui exploitera les données envoyées, cas où on en revient au plugin.
      Après, on est d’accord, quelqu’un qui veut utiliser OSM n’est pas obligé de passer par Leaflet, il existe d’autres systèmes de tuiles/API, je l’ai dit dans mon post. Sauf que j’ai dû choisir, j’en ferai peut-être un second pour un autre fournisseur de tuiles/API mais dans ce cas, ça viendra plus tard.

    • Guillaume

      Il est clair que pour un intégrateur lambda qui a sur son site un tinymce, un highchart, un jquery, … en laissant de coté la lourdeur coté navigateur, on se retrouve à potasser les docs de X librairies, alors que la majorité des personnes utilisant javascript savent utiliser jquery.
      Et je rajouterai à ca que si l’on a une dixaine de maps à initialiser, un simple $(‘.map’).osmLeaflet({…}) ferait l’affaire, de même pour ajouter des marqueurs, pour la gestion des events … pour moi c’est un confort non négligeable :)

      • http://www.mathieurobin.com/ Mathieu

        Merci de me confirmer aussi bien l’utilité que mon idée première :-)
        Une version 1.0 finale devrait être disponible très prochainement. Plus complète, avec des tests, des commentaires, de la doc et une version minifiée.

  • http://www.meteor-center.com Pierre

    Bonjour Mathieu,

    super plugin pour un site web. J’utilise wordpress pour gérer mon site avec un template qui masque un peu le côté blog de wordpress.

    Y-a-t’il possibilité d’intégrer son plugin jquery openstreetmap dans une page wordpress ?

    Pierre

    • http://www.mathieurobin.com/ Mathieu

      C’est possible oui, j’avoue ne pas avoir essayé mais ça ne doit pas être plus compliqué que d’intégrer n’importe quel autre plugin jQuery. Je ne pense pas réaliser de plugin WordPress. L’API de ce système de blog me débecte et je n’ai pas envie de me prendre la tête avec. Si quelqu’un d’autre veut s’amuser avec, bien lui en fasse.

  • Guillaume

    N’était pas plus simple, d’un point de vue utilisateur, d’utiliser les sélecteurs jquery pour jouer avec le plugin. Par exemple, au lieu de spécifier un champ target dans les options lors de l’instanciation de l’objet, de faire cela à la manière d’un ui jquery. Ce qui donnerai finalement:

    $(document).ready(function () {
    // Initialisation de la map
    $('.map).osmLeaflet({
    zoom : 12,
    lattitude : 51.50,
    longitude : -0.09
    }).osmLeaflet('addMarker', {
    lattitude : 51.50,
    longitude : -0.09
    }).osmLeaflet('addPopup', {lattitude : 51.51, longitude : -0.13, text : "Hey !"});
    });

    Sinon excellente initiative. J’aurai bientot besoin de ce genre de plugin et je songeai à attaquer sont développement, du coup si tu cherche un contributeur, je répond présent à l’appel !!!

    • http://www.mathieurobin.com/ Mathieu

      Avec plaisir pour les contributions, j’attends les pull requests sans aucun problème!
      Pour le sélecteur, on est d’accord, sur le moment, j’ai fait comme ça pour aller vite et j’ai pas encore corrigé. Les défauts d’une alpha quoi 😉

    • http://www.mathieurobin.com/ Mathieu

      C’est corrigé, merci de la remontée !

  • http://www.g33k-zone.org CrazyCat

    Un grand merci pour ce plugin que j’utiliserai très bientôt.

    Je me suis permis de faire un billet au sujet de ton plugin car il mérite d’être connu !

    • http://www.mathieurobin.com/ Mathieu

      Hello, merci ! :)
      Attention pour rappel, il est pas encore en version définitive, donc utilisable à tes risques et périls en production. Mais je signalerai sur ce blog dès que j’en aurais fait une version utilisable. Enfin dès que j’en aurais le temps quoi

      • http://www.g33k-zone.org CrazyCat

        Je comprends tout à fait et j’espère pouvoir contribuer à en faire une version stable et bien utilisable.
        Pour ma part, je le teste mais ne m’en sers pas sur un site public, j’essaye juste de voir ce que je peux faire avec la géolocalisation et l’affichage de cartes. Si un jour j’ai une idée brillante, ce ne sera pas la même histoire :)

  • http://naturaliste.be jean marc

    bonjour

    j’ai découvert Leaflet hier soir (25 03 2013) et je découvre ce soir ton plug-in
    est-il toujours à l’état alpha, ou as tu publié une version définitive et qui
    permettrait de récupérer la géolocation des visiteurs ?
    je n’ai vraiment pas besoin de plus, et ton plug-in, pour autant qu’il soit
    maintenu, est très intéressant.

    • http://www.mathieurobin.com/ Mathieu

      Salut,

      Le site n’est pas à jour, il y a une version définitive sur le dépôt GitHub. J’ai quelques congés prochainement, je pourrai mettre le site a jour et au passage, développer les nouvelles fonctionnalités demandées ou espérées.

      N’hésite pas d’ailleurs à proposer des idées si tu souhaites quelque chose de spécifique. Je réfléchis à la possibilité d’intégrer des plugins.

Articles liés