Maintenant que les utilisateurs peuvent manipuler une cartographie Mapbox à leur guise, il est temps de l’enrichir avec quelques données. Pour cela, nous vous proposons de jouer avec un dataset open source qui contient les délimitations de l’ensemble des pays du globe.

Pour commencer, vous pouvez télécharger la ressource à l’adresse suivante : https://data.world/dgreiner/world-spatial-data. Le fichier à récupérer étant le fichier “ne_50m_admin_0_countries.geojson”. Une fois récupéré, vous pouvez par exemple déposer le fichier à l’emplacement “src/files/” et renommez-le simplement “countries.geojson”. Comme les données seront visibles sur la planète entière, vous pouvez en profiter pour dézoomer la carte en assignant la valeur 2 à votre propriété “zoom” de votre composant MglMap.

Attention, ce fichier contient un objet geojson et cela peut vous poser problème pour l’importer. Pour remédier à cela, exécutez :

yarn add json-loader

Puis, créez un fichier “vue.config.js” à la racine contenant :

Cela permettra à votre application Vue de gérer l’importation de fichier geojson sans générer d’erreur de validité json.

Récupération du jeu de données

Ensuite, nous pouvons aller récupérer notre jeu de données. Pour cela, il vous faut comprendre la notion de layer et de source : une source contient des données et un layer sera une couche intégrée dans la cartographie associée à une source à laquelle vous pourrez modifier son aspect graphique. Il vous faut donc une source et au moins un layer pour pouvoir intégrer des données dans une cartographie Mapbox. Vous pouvez créer autant de layers que vous voulez à partir d’un même jeu de données.

Il y a différents types de sources de données disponibles et vous pouvez les tester à votre guise. Cependant, dans cet article, nous manipulerons du geojson, qui est l’un des plus répandus et des plus faciles à utiliser. Vous aurez donc besoin d’un composant intégré à vue-mapbox qui permet de visualiser des calques associés à des données geojson.

Beaucoup de changements !

Tout d’abord, concernant la source, nous importons le fichier geojson que nous injectons ensuite en tant que source dans le composant MglGeojsonLayer. Ensuite, pour le layer, nous déclarons un objet qui contient un des types de calques disponibles avec une simple propriété de couleur. Cela devrait vous permettre d’afficher l’ensemble des frontières des pays du monde.

Pour pouvoir utiliser la librairie Mapbox et manipuler les données dans les layers, il nous faut maintenant définir deux variables : mapbox et map qui contiennent respectivement la librairie et notre composant MglMap.

Ensuite, nous allons mettre en place un système de hover sur les pays, c’est-à-dire qu’au survol d’un pays, celui-ci sera distinguable des autres en le remplissant complètement de rouge par exemple. Pour cela, il nous faut :

1. détecter l’événement de Hover de la souris
2. récupérer le pays survolé et enfin
3. afficher le polygone du pays en rouge.

Problèmes : nous avons défini un layer de type ‘line’ qui ne nous permettra pas remplir le polygone du pays associé et cela sera peu pratique pour l’utilisateur s’il doit survoler uniquement les frontières du pays pour interagir avec. Nous devons donc utiliser deux layers, cette fois de type ‘fill’ qui vont venir par dessus notre layer de type ‘line’ pour permettre le survol sur tout le pays et lui assigner une couleur de survol.

Vous pouvez bien distinguer les 3 layers :

• celui qui contient l’ensemble des polygones des pays mais en mode contour (line),
• celui qui ne fait apparaître que les frontières (en rouge),
• celui qui contient l’ensemble des polygones des pays (fill) (en blanc),
• et enfin, celui qui ne contient que le polygone du pays survolé (en vert).

De la même manière, on peut ajouter un layer qui conserverait un pays cliqué.

Il existe plusieurs façons d’arriver au même résultat (notamment la méthode de filtre sur une propriété de feature) mais nous avons préféré utiliser cette méthode pour bien que vous compreniez ces notions de source et de layer. Nous vous recommandons de bien nommer vos sources et vos layers afin de ne pas vous mélanger (vous pourriez très vite vous perdre dès lors que vous manipulez une dizaine de layers).

Dans la partie suivante, nous irons plus loin dans la manipulation de données avec la mise en place de filtres permettant d’interagir avec les données intégrées dans la cartographie. En attendant, vous pouvez approfondir vos connaissances sur les calques et les layers, voir les méthodes, propriétés et événements associés sur la documentation Mapbox, et aussi pourquoi pas, rendre cette cartographie un peu plus attrayante 🙂

—

Bibliographie & ressources :
https://data.world/dgreiner/world-spatial-data
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/