La visualisation Infos localisations est une carte interactive permettant d'accéder à du contenu détaillé sur ces localisations, notamment par le biais de fiches configurables.

Dans ce tutoriel, nous expliquons comment créer une carte infos localisations à l'aide de la plateforme Koumoul, sans avoir besoin de programmer.

Dans notre exemple, nous présentons les différents événements des Journées européennes du patrimoine en Bretagne pour l'année 2025. Pour réaliser cette visualisation, vous aurez besoin de ces données, d’être connecté à votre compte Data Fair et de quelques minutes.

Les concepts Libellé, Description, Image et Page web seront affichés sur chacune des fiches informatives correspondant à un point.

• Colonne Nom de l'événement - FR = concept : Libellé ;
• Colonne Description longue - FR = concept : Description ;
• Colonne Image = concept : Image ;
• Colonne Latitude = concept : Latitude ;
• Colonne Longitude = concept : Longitude ;
• Colonne Lieu : Site internet = concept : Page web.

Pour créer votre visualisation infos localisations, descendez la page de votre jeu de données récemment importé jusqu’à la partie utilisations et cliquez sur configurer une visualisation.

Parmi la liste d’applications disponibles sur la plateforme Koumoul, choisissez la visualisation infos localisations, ajoutez un titre à votre visualisation et cliquez sur enregistrer.

Vous êtes redirigé sur la page de configuration de votre visualisation. Commencez par vérifier que le jeu de données que vous avez importé est bien sélectionné dans la partie données.

Dans cette visualisation, nous souhaitons localiser les évènements en Bretagne et pouvoir identifier de nombreuses informations sur ces évènements, soit directement sur la carte, soit sur une petite fiche informative. Pour cela, nous allons commencer par configurer le rendu de la carte.

Infos localisations offre la possibilité d’afficher des points de différentes couleurs, mais également d’afficher différents marqueurs, sous forme de pictogrammes, afin de mettre en évidence encore plus de variables.

Sélectionnez Type d'événement dans la section Couleur par valeur d’un champ, puis attribuez les couleurs souhaitées aux variables à l'aide des icônes en forme de crayon. Les marqueurs de vos événements affichent maintenant une couleur correspondant à leur Type d'événement.

Dans l'onglet Fiche, personnalisez les informations affichées lors d'un clic sur un marqueur d'événement.

Ajoutez les Champs à utiliser que vous souhaitez voir s'afficher dans ces fiches en utilisant le bouton (+). Par exemple, vous pouvez inclure : Description longue - FR, Résumé horaires - FR, Type d’événement, Lieu : adresse, Conditions de participation, Type de public, Outils d'inscription, Accessibilité - FR, et Crédit de l'image.

Enfin, définissez la position initiale dans la section Navigation, et votre visualisation sera prête.

Cliquez sur Valider pour sauvegarder votre visualisation.

Vous pouvez intégrer votre visualisation sur un autre site en copiant le code de votre visualisation à l'aide du bouton d'action intégrer dans un site, à droite. Votre code devrait ressembler à celui-ci :

<iframe src="https://demo.koumoul.com/data-fair/app/carte-des-journees-europeennes-du-patrimoine-2025-bretagne?embed=true" width="100%" height="500px" style="background-color: transparent; border: none;"></iframe>

Pour rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données ainsi que dans la page de configuration de votre visualisation.

Lorsque vous l'intégrerez dans votre site, vous obtiendrez le rendu suivant :

Vous pouvez naviguer et utiliser la carte présentée ci-dessus.
Cliquez sur un marqueur pour obtenir plus d'informations sur l'événement.

Vous avez créé votre carte Infos Localisation en quelques minutes.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.