Le composant Carte

Le composant Carte permet d'afficher une carte dans votre application, d'y créer des marqueurs (points d'intérêt, zones) ou d'afficher un itinéraire. Ce composant s'appuie sur un fournisseur de cartes : Google Maps, OpenStreetMap et Mapbox.

Google Maps, OpenStreetMap et Mapbox sont des outils de cartographie en ligne :

Google Maps est la référence en la matière.
OpenStreetMap est une carte du monde entier publiée gratuitement sous une licence de contenu libre. Construite par des contributeurs bénévoles, elle est éditable par tous et en constante évolution.
Mapbox est plus avancé et offre de nombreuses personnalisations du fond de carte. Par contre, son utilisation nécessite un abonnement.

Afficher une carte

Cliquez sur Composants et insérez le composant Carte.

Dans les Propriétés, choisissez le fournisseur : Google Maps, OpenStreetMap ou Mapbox.

Double-cliquez sur le composant au sein de votre espace de travail pour afficher la carte.

Saisissez les coordonnées (Latitude et Longitude) du point central de votre carte. Définissez le niveau de zoom.

💡 Si vous choisissez Google Maps, il est nécessaire d'insérer votre clé API. Pour Mapbox, vous devez impérativement créer un compte au préalable et récupérer votre Access Token pour afficher la carte. En savoir plus

Avec l'option Localisation utilisateur, vous pouvez actualiser la carte en fonction de la position de l'utilisateur.

Vous pouvez choisir d'afficher ou non l'épingle du centre.

Ajouter des marqueurs et un itinéraire

Vous pouvez créer des marqueurs, des points d'intérêts situés à une position spécifique sur la carte.

Pour créer un marqueur, il faut passer par les boutons d'édition qui apparaissent au-dessus de la carte. Sélectionnez le type de marqueurs (point d'intérêt, zone rectangulaire ou circulaire) et cliquez directement sur la carte pour le positionner. Vous pouvez également créer des tracés pour représenter un itinéraire.

Lorsque vous créez un marqueur, celui-ci s'affiche dans la liste de gauche.

Vous pouvez éditer les propriétés de ces marqueurs :

Définissez sa position exacte (latitude et longitude)
Personnalisez l'apparence de l'icône. Pour personnaliser l'apparence de ces marqueurs, indiquez l'URL d'une icône, sa taille et sa position.

💡 Pour l'apparence des marqueurs, nous utilisons le service Geopify : vous pouvez personnaliser l'apparence et générer une nouvelle URL. Vous pouvez également utiliser n'importe quel autre service.

Choisissez si vous souhaitez afficher une pop-up au clic sur le marqueur. Vous pouvez personnaliser le texte.

Il est également possible de créer des marqueurs dynamiquement depuis une source de données.

Cette vidéo vous explique comment créer des marqueurs dynamiques sur une carte interactive :

Associer des actions aux marqueurs

Une fois que vos marqueurs sont créés, vous pouvez les utiliser pour déclencher une action.

Ouvrez la fenêtre Actions et sélectionnez un marqueur dans la liste. Associez l'action de votre choix (par exemple Aller à un écran ou Ouvrir une pop-up)

💡 Si vous souhaitez aller plus loin, le composant GPS / Géo-repérage vous permet de déclencher des actions en fonction des coordonnées GPS de l'utilisateur.