Créer une pop-up au clic sur une ressource de type calque

L'ajout d'une pop-up au clic sur un objet vous permet de personnaliser votre carte et de la rendre plus dynamique et interactive pour les utilisateurs.

🛠️ Format du GeoJSON

L'affichage d'une pop-up au clic nécessite l'import d'un fichier au format GeoJSON, dont la structure est la suivante :

json
{
  "type": "Feature",
  "properties": {
    "Name": "nom de mon point",
    "description": "je décris mon objet",
    "id": 1.0,
    "template_data": { "description": "test"
    }
  }
}

💡 Astuce :

La clé template_data contiendra le contenu affiché dans la pop-up :

"template_data" correspond à la clé / au nom de la propriété dans le fichier
"description" correspond à la clé du contenu à afficher
"test" correspond au contenu à afficher

Il suffit d’ajouter la propriété template_data à un GeoJSON classique et de remplacer "test" par le contenu que vous souhaitez afficher pour chaque objet.

Vous pouvez aussi ajouter une autre clé que "description", par exemple “name” etc (selon le contenu que vous lui associez).

🗺️ Intégration dans Wemap Pro

☝️ Ajout du fichier GeoJSON

Rendez-vous dans Wemap Pro.
Créez une nouvelle ressource : "Créer" > "Ressources".
Renseignez le nom de la ressource et sélectionnez "Couche de données".
Cliquez sur "Créer la ressource".
Ajoutez votre fichier GeoJSON en cliquant sur "Importer depuis un fichier".

🧪 Personnalisation & Intégration

Personnalisez votre ressource à votre goût et pensez à vérifier qu’elle ne contient pas d’erreurs (noms, description, structure JSON...).

Aperçu d'une personnalisation de ressource : carte Hauts-de-France Bassins de mobilité

🗺️ Ajouter la ressource à une carte

Deux options s’offrent à vous :

Créer une nouvelle carte → "Créer" > "Carte"
Utiliser une carte existante → "Gérer" > "Mes cartes"

Depuis l’interface de la carte :

Sélectionnez "Mise en forme", dans la barre latérale gauche.
Cliquez sur "Gérez les calques".
Choisissez "Ajouter depuis l’éditeur".
Sélectionnez la ressource GeoJSON que vous avez créée, puis cliquez sur "Ajouter".

🎯 Déclencher l’action au clic et personnaliser la description de la pop up

Dans les options du calque :

Sélectionnez "Pop-up", dans le champ "Action au clic".

Cliquez sur le bouton "Personnaliser le template" apparu en dessous.

Renseignez la clé du contenu à afficher en respectant le format indiqué : {{clé du contenu à afficher}}

Ex : si la propriété "template_data" correspond à "description": "test", vous devez renseigner {{description}}
Cliquez sur "Sauvegarder", en bas à droite.

Cliquez ensuite sur "Sauvegarder", en haut à droite pour enregistrer le calque.

Votre texte s'affiche désormais lors du clic sur l’objet.

Aperçu d'une pop-up : carte Hauts-de-France Bassins de mobilité

📌 À noter :

Le contenu à afficher peut également être mis en forme ou contenir un lien de redirection.

Pour ce faire, la personnalisation du template depuis la carte (étape 3 ci-dessus) doit avoir une mise en forme au format html.

Ex : <a href="https://my.parisjetaime.com/plan-cimetiere-du-pere-lachaise\">{{name}}

⚙️ Paramétrage du calque

Lors de la configuration de la carte dans Wemap Pro, vous pouvez initialiser et personnaliser le contenu de la pop-up directement via les paramètres du calque.

👍 Bonne pratique :

N’oubliez pas de sauvegarder vos actions 😉