Avant de manipuler les données, il peut être intéressant de se demander quels sont les contrôles que nous allons accorder à l’utilisateur pour pouvoir manipuler la cartographie. Nous verrons dans un article ultérieur comment lui accorder un contrôle à partir de filtres ou de boutons cliquables mais dans un premier temps, nous allons voir les contrôles innés d’ une cartographie Mapbox que nous pouvons rapidement mettre en place.
1- Composant d’attribution ou copyright
Avec vue-mapbox (voir article précédent), il suffit d’activer les différents composants et de les utiliser directement dans la balise <MglMap>.
Le premier composant concerne l’attribution, c’est-à-dire les copyrights associés à la cartographie (© Mapbox et OpenStreetMap). Cela permet d’avoir un bouton cliquable qui affiche ou cache ces copyrights sachant qu’ils sont visibles par défaut en bas à droite de votre cartographie. Il vous suffit de spécifier la propriété attributionControl au booléan False sur votre composant <MglMap> pour cacher les copyrights par défaut. Vous pouvez également spécifer la position du composant en choisissant u des 4 coins de l’écran.
Un des contrôles les plus importants (si ce n’est le plus important) est la possibilité de naviguer sur la carte via le composant de navigation constitué de 3 boutons : un zoom (bouton +), un dézoom (bouton) et l’orientation (bouton boussole). Ce dernier est également utilisable via le clic droit enfoncé de votre souris qui vous permet d’orienter la cartographie selon l’axe que vous désirez. Un clic gauche sur la boussole vous permettra de réaxer la carte sur l’axe Nord-Sud.
3- Composant de géolocalisation
Un autre composant de contrôle très utile est celui concernant la géolocalisation. Cela permet en un clic à l’utilisateur de visualiser la cartographie en la centrant sur sa géolocalisation actuelle (dans le cas où l’utilisateur l’active et l’autorise). Un clic sur le bouton de géolocalisation générera un déplacement du centre de la carte vers le nouveau point de géolocalisation détecté.
4- Composant fullscreen
Un autre composant utile est celui du plein écran qui permet comme son nom l’indique d’avoir la cartographie en mode plein écran en cliquant sur le bouton constitué de 4 flèches.
5- Composant d’échelle
Vous pouvez enfin activer le composant Scale qui affiche l’échelle associée au zoom actuel de la carte.
Vous noterez dans le code le changement de position des différents contrôles : <MglScaleControl> a été intégré AVANT <MglAttributionControl> ce qui fait que le composant d’échelle sera placé en PREMIER dans le coin en bas à droite et que le composant des copyrights sera placé APRÈS donc au-dessus du composant d’échelle. Cela est très pratique pour agencer correctement vos contrôles de la cartographie sans avoir besoin d’écrire la moindre règle CSS.
Vos utilisateurs peuvent maintenant manipuler la carte à leur guise et nous verrons dans l’épisode suivant comment injecter et manipuler de la donnée brute et de la donnée intelligente dans une cartographie Mapbox.
