Des cartes interactives avec Mapbox.js

Dans le domaine des cartes interactives, le géant Google avec son service Google Map dispose d’un certain monopole si bien que lorsqu’on souhaite intégrer un système de cartes interactives sur son site web ou dans son application, c’est souvent vers ce service que l’on va se tourner. Aujourd’hui nous allons voir une alternative qui vous permettra de proposer des cartes qui ne ressembleront pas à toutes les autres et qui a le mérite d’être open source.

Lorsqu’on souhaite mettre en place un système de cartes interactives, il y a en fait 3 éléments qui nous intéressent :

1. Les données cartographiques : la position des routes, des fleuves et de tous les éléments présents sur la carte
2. Les cartes en elles-même : il s’agit ici de l’aspect visuel, ce sont les cartes qui vont être affichées et qui reposent sur le principe de Tiles, les cartes sont découpées en images de 256×256 px pour être affichées rapidement à l’utilisateur et sont construites grâces aux données cartographiques citées ci-dessus
3. La librairie Javascript : c’est elle qui va permettre de gérer les cartes avec tous les Tiles et effectuer les diverses opérations tel que le zoom, le déplacement mais également des opérations plus poussées tel que l’ajout d’éléments sur les cartes

Le système Mapbox propose de l’open source pour 2 des 3 éléments précédents.

En ce qui concerne les données cartographiques, Mapbox utilise OpenStreetMap, à savoir l’alternative open source directe à Google en ce qui concerne les données cartographiques, fondée en 2004 le projet bénéficie maintenant d’une solide base.

Pour les cartes, Mapbox propose son propre système de cartes hébergées disposant de plusieurs plans et gammes de prix, dont un starter gratuit pour les petits projets. L’avantage c’est qu’il est possible de créer ses propres cartes avec ce système, permettant d’avoir des cartes réellement personnalisées. De plus, la librairie javascript n’oblige en rien l’utilisation des cartes Mapbox, il est possible d’utiliser un autre fournisseur ou une utilisation locale.

La librairie Javascript Mapbox.js est le coeur du système, 100% open source il est possible de contribuer au projet qui a beaucoup évolué au fil des années. D’abord grandement inspiré par le projet Leaflet.js elle est maintenant entièrement basée sur celui-ci, le développeur ayant même rejoint Mapbox.

Si vous souhaitez mettre en place un système de cartes interactives pour votre site web ou votre application vous savez maintenant qu’il existe des alternatives à Google, de plus Mapbox fournit toute une gamme d’outils pour les développeurs autres que la librairie javascript.

Exemple de carte créée avec Mapbox.js