Chez 10h11, nous développons beaucoup de tableaux de bord qui contiennent des cartographies avec des visualisations de données géospatiales dynamiques et évolutives. Parmi toutes les solutions de cartographie disponibles aujourd’hui, notre choix s’est porté sur Mapbox et notamment VueMapbox pour l’intégrer directement à nos applications front développées avec le framework Vue.

Commençons par l’installation

L’installation est très simple et le résultat est rapidement visible. Après avoir créé un projet Vue, il vous suffira d’ajouter la dépendance vue-mapbox avec la commande suivante (si vous utilisez yarn) :

$ yarn add vue-mapbox mapbox-gl

Nous allons maintenant créer un nouveau composant “Map.vue” et modifier le fichier App.vue pour préparer l’intégration de notre cartographie.

Si vous consultez http://localhost:8080, vous devriez voir une page complètement grise. Sinon, cela veut dire que votre #map n’a pas de hauteur et/ou de largeur et qu’il vous faut adapter votre css.

Affichons la carte !

Une fois que ce problème est résolu, il est temps d’afficher une vraie cartographie en intégrant le composant MglMap dans notre template. Il vous faudra un access token de Mapbox (à créer sur votre compte personnel Mapbox) et choisir un style (ou en créer un à partir de Mapbox Studio) de fond de carte.

Vous devriez voir votre cartographie centrée aux alentours du golf de Guinée (qui correspond au point de latitude 0 et de longitude 0 sur la planète) ce que nous allons changer tout de suite en renseignant un nouveau centre pour notre vue cartographique ainsi qu’une valeur pour le niveau de zoom.

Attention à la valeur que vous renseignez pour le centre de la carte : Mapbox demande un objet de type LngLat (équivalent d’un Array avec 2 float), donc la première valeur du tableau est une longitude et la deuxième est une latitude comprise entre -90 et 90.
En ce qui concerne le zoom, plus la valeur est élevée, plus la caméra sera proche du sol terrestre.

Votre carte est maintenant prête à accueillir des données et nous verrons comment intégrer et manipuler des données dans le prochain article !

—

Bibliographie :
https://soal.github.io/vue-mapbox/
https://docs.mapbox.com/api/maps/styles/