16 avril 2013
Category:
Javascript
Comments: 1

Carte Interactive en Javascript avec OpenStreetMap + Leaflet

Un grand nombre d’entre nous pense automatiquement à Google Maps lorsqu’il s’agit d’intégrer une carte interactive dans un site web. Et c’est parfaitement compréhensible tant l’intégration de ces cartes se fait facilement. L’API de Google est simple, flexible et facilement personnalisable pour y ajouter des marqueurs et points d’intérêts.
L’alternative libre de droit, OpenStreetMap, ne propose pas d’API aussi simple pour intégrer des cartes, ce qui fais fuir un grand nombre d’entre nous … Il existe désormais une librairie Javascript nommée Leaflet, qui va désormais nous simplifier l’intégration des cartes interactive et Open Source de OpenStreetMap.

OpenStreetMap + Leaflet

Pour commencer avec OpenStreetMap et Leafler vous allez intégrer le code Javascript et votre feuille de style à votre page. Vous devrez ensuite créer une div qui vous servira plus tard à afficher votre carte :

En utilisant le CSS vous pourrez définir les dimensions de votre carte. Le code suivant va vous permettre de définir la zone à afficher pour votre carte :

Les valeurs à l’intérieur de l’option setview() correspondent aux coordonnées de votre carte, ainsi que pour finir du niveau de zoom. A noter que par défaut, vous n’aurez pas besoin d’ajouter d’options pour afficher les boutons de zoom avant/arrière.

Ajouter des marqueurs sur la carte

carte
Si vous souhaitez enrichir votre carte en plaçant des marqueurs, vous allez retrouvez quelques infos ci-dessous.

Pour ajouter le marqueur type « Google Maps » :

Vous noterez que le marqueur est vraiment très proche graphiquement de celui de Google Maps. Vous pouvez également ajouter une popup sur ce marqueur et insérer du contenu texte comme suit :

Vous pourrez également placer des polygones, rectangles, cercles … sur vos cartes afin de les enrichir de plus de détails. Dans son approche et son apparence vous ne devriez pas voir de grande différences avec Gmaps, ce qui fait de Leaflet une excellente alternative.

La géolocalisation et les appareils tactiles

Leaflet supporte également les navigateurs mobiles et leur fonctionnalité tactile. Ces appareils seront également en capacité de se géolocaliser sur vos cartes :

Avec un mobile, vous pourrez naviguer dans la carte et utilisez les mouvement de glisse ou de zoom avec le multi-touch.

Vous trouverez plus d’explications sur Leaflet, des démonstrations et des exemples d’utilisations sur le site : http://leafletjs.com/

En conclusion

Leaflet est une alternative très sérieuse pour les personnes souhaitant stopper l’intégration et/ou l’utilisation de carte type Google Maps, que ce soit pour des raisons pratiques ou morales, mais souhaitant conserver des fonctionnalités avancées. Leaflet ne vous apportera pas toujours la même précision puisque reposant sur OpenStreetMap, l’exactitude des données et détails est parfois constestable, mais si vous avez besoin d’une carte dans une zone connues et bien détaillées, nul doute que Leaflet fera le job !

Pensez-vous changer vos cartes Google Maps par une autre solution, trouvez-vous Leaflet simple, l’utilisez vous … ? N’hésitez pas à partager dans les commentaires ci-dessous.



Une réponse pour “Carte Interactive en Javascript avec OpenStreetMap + Leaflet

  1. Elyes dit :

    Si je peux me permettre de rectifier une élement!
    Leaflet.js est certes fameux mais rien ne nous oblige à utiliser les carte OSM, on peut très facilement utiliser plus de 20 tuiles (cartes de fond ou baselayers).
    De plus pour ce qui est de la geolocalisation, je ne penses pas que nous ayons un besoin de type militaire ou la précision doit être au centimètre près! leaflet peut trés facilement afficher un cercle de localisation, le rayon de ce cercle peut montrer la marge d’erreur, par exemple 20 metres ou 40 bref!!! dans tous les cas ca sera la bonne rue et généralement le bon numéro de maison. Un bon exemple se trouve sur google en recherchant les termes
    MI Geodata tout y es

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *