Lors d’un premier tutoriel nous avons vu comment créer une carte simple avec MapLibre. Maintenant nous allons voir comment la décorer et la rendre un peu interactive. Pour ce faire, nous allons gérer les contrôles.
Téléchargez les fichiers d’exemple : https://www.philippe-poisse.eu/zip/maplibre/maplibre_controles.zip
Utilités et informations fondamentales
MapLibre fournit des outils de contrôles par défaut qui sont :
- La navigation, qui consiste en deux boutons (+ et -) pour gérer le niveau de zoom et une boussole pour orienter la carte vers le nord ;
- Le plein écran, qui consiste en un bouton, qui, comme son nom l’indique, permet de passer la carte en mode plein écran ;
- L’échelle, qui permet d’évaluer rapidement les distances ;
- La géolocalisation, qui permet de récupérer les coordonnées GPS du client et d’adapter la carte à celles-ci.
Tous ces contrôles sont implémentés en utilisant la méthode map.addControl(contrôle, position);
Il existe quatre positions :
'top-left''top-right''bottom-left''bottom-right'
Par défaut, les contrôles sont affichés en haut à droite (top-right).
Lorsque plusieurs contrôles sont placés au même endroit, MapLibre va les empiler les uns au-dessus des autres. L’ordre d’ajout dans le code JavaScript devient donc très important, celui-ci étant suivi par MapLibre.
Navigation
// Zoom + boussole (en haut à droite)
map.addControl(
new maplibregl.NavigationControl(),
'top-right'
);
Ce code permet afficher les boutons pour contrôler le zoom et la boussole. La boussole permet de réorienter la carte vers le nord après que l’utilisateur a effectué une rotation.
Si votre carte est exclusivement en 2D, le code suivant permet de désactiver la rotation.
//Zoom sans boussole et rotation désactivée
const nav = new maplibregl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-right');
Plein écran
// Plein écran (en haut à droite, sous la navigation)
map.addControl(
new maplibregl.FullscreenControl(),
'top-right'
);
Ce bouton permet de basculer en mode plein écran. C’est particulièrement utile pour les cartes intégrées dans une page Web proposant d’autres contenus.
Il n’y a pas d’option particulière à connaître pour un usage standard. MapLibre gère automatiquement l’entrée et la sortie du mode plein écran via l’API Fullscreen du navigateur.
Échelle
// Échelle (en bas à gauche)
map.addControl(
new maplibregl.ScaleControl({
maxWidth: 120,
unit: 'metric'
}),
'bottom-left'
);
Le `ScaleControl` affiche une règle graphique en bas de carte, indiquant la distance réelle correspondant à une longueur à l’écran. Elle se met à jour automatiquement lors du zoom.
Trois unités sont disponibles :
- « metric », qui utilisera le mètre ou le kilomètre. Cette unité est utile pour la majorité des cartes.
- « imperial », qui utilisera la verge (yard) ou le mille terrestre internationale (mile). Cette unité est utile pour les cartes destinées à un public anglo-saxon.
- « nautical », qui utilisera le mille marin. Cette unité est utile pour les cartes marines.
Par convention, l’échelle se place en bas de la carte, le côté gauche étant le plus fréquemment utilisé.
Géolocalisation
// Géolocalisation (en haut à droite)
map.addControl(
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true },
trackUserLocation: true,
showAccuracyCircle: true
}),
'top-right'
);
Voici ce que font les principales options :
- trackUserLocation — lorsque la valeur « true » est choisie, la carte suit la position de l’utilisateur en continu, comme un mode navigation. Lorsque « false » est choisie, la carte se centre une seule fois sur sa position.
- showAccuracyCircle — cette option permet d’afficher un cercle semi-transparent autour du point GPS pour donner une idée de la précision de la localisation. C’est très utile pour signaler à l’utilisateur que sa position est approximative.
- positionOptions.enableHighAccuracy — cette option indique au navigateur d’utiliser la source de localisation la plus précise disponible (le GPS plutôt que le WiFi ou le réseau mobile). En contrepartie, la position peut être légèrement plus longue à obtenir.
Il est important de retenir que l’API du navigateur Web exige que la page soit servie en HTTPS. Dans le cas contraire, l’API ne fonctionnera tout simplement pas. Le bouton s’affichera mais sera inactif. De toute manière, il est préférable d’utiliser HTTPS plutôt que HTTP.
Voilà, vous disposez maintenant du code pour gérer les contrôles fournis par MapLibre. Des contrôles personnalisés peuvent être créés, ce sera l’objet d’un autre tutoriel.
