Tutoriel : Comment réaliser une carte de localisations avec fiches détaillées ?
La visualisation « Infos-Localisations », est carte offrant la possibilité de visualiser des informations localisées de manière précise, et d'accéder à du contenu détaillé sur ces localisations, notamment par le biais de fiches configurables.
Dans ce tutoriel nous allons vous expliquer comment réaliser une carte Infos-Localisations à l'aide de la plateforme Koumoul, sans avoir besoin de programmer.
Dans notre exemple, nous allons projeter les différents évènements des journées européennes du patrimoine dans le Morbihan en 2019. Pour réaliser cette visualisation, vous allez avoir besoin de ces données, d’être connecté à votre compte Koumoul et de quelques minutes.
Import et préparation des Données
Lorsque vous êtes connecté à la plateforme, allez dans l'espace de Partage et visualisation de données, cliquez sur Jeux de données dans le menu de navigation. Chargez le fichier des données, que vous venez de télécharger, sur votre compte à l'aide du bouton Fichier dans la section de droite.
Choisissez le titre que vous allez donner à votre jeu de données, cliquez sur Lancer l’import. Vous arrivez sur la page d’édition du brouillon, cette étape vous permet d’accéder aux 100 premières lignes de votre jeu et donc de vérifier que tout s’est bien déroulé lors de l’import, ainsi que de préparer les données pour pouvoir configurer correctement la visualisation. Nous allons alors appliquer des concepts aux champs de notre jeu de données, c’est une étape à ne pas négliger. Les concepts sont des notions connus de la plateforme qui seront utilisé par la visualisation. Les concepts Libellé, Description, Image et Page web seront affichés sur chacune des fiches informatives correspondant à un point.
- Titre - FR = concept : Libellé
- Description longue - FR = concept : Description
- Image = concept : Image
- Latitude = concept : Latitude
- Longitude = concept : Longitude
- Site web du lieu = concept : Page web
Attention ! Lorsque vous avez effectué toutes ces modifications, pensez à bien cliquer sur le bouton « Appliquer » pour que les changements soient bien effectués.
Si les éléments sont encore en orange, cela signifie que vous n’avez pas encore validé.
Une fois ces changements bien effectués, vous pouvez maintenant valider votre brouillon, attendez de nouveau les 6 étapes afin que le reste du jeu s’importe. Votre fichier est maintenant disponible et prêt à être utilisé.
Configuration de la Visualisation
Pour créer votre visualisation « Infos-Localisations » : Descendez la page de votre jeu de données récemment importé jusqu’à la partie Utilisations ou vous cliquez sur Configurer une visualisation. Parmi la liste d’application 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. Tout d’abord, commencez par vérifier que le jeu de données que vous avez importé est bien sélectionné dans la partie : Données.
Ensuite, dans cette visualisation, nous souhaitons localiser les évènements dans le Morbihan 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. Nous avons choisi d’afficher si les évènements étaient gratuits ou payants et s’ils nécessitaient une inscription.
Vous allez donc choisir Gratuit-Payant dans la section « Couleur par valeur d’un champ » puis définir les couleurs que vous souhaitez associer aux variables et choisir Inscription dans la section « Icône par valeur d’un champ » et définir les pictogrammes que vous souhaitez afficher (vous pouvez rechercher parmi la liste d’icônes en saisissant des mots clés exemple ici : « check circle »).
Ensuite dans la partie Fiche, nous allons configurer les fiches informatives.
Afin de rendre cliquable le lien vers le site web de l’évènement, dans la section « Champ de lien » vous allez ajouter le champ provenant de votre jeu de données : Site web du lieu. Vous ajouterez par la suite dans « Champs à utiliser », tous les champs que vous souhaiterez voir apparaitre dans ces fiches, exemple : Types d’évènement, Adresse, lien d’inscription (qui contient les contacts, tel etc.) et conditions de participation.
Il ne vous reste plus qu’à définir la position initiale de votre visualisation dans la section navigation et celle-ci sera configurée.
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://koumoul.com/data-fair/app/carte-des-evenements-des-journees-europeennes-du-patrimoine-dans-le-morbihan-en-2019?embed=true" width="100%" height="500px" style="background-color: transparent; border: none;"></iframe>
Rendu final
Pour que votre visualisation soit accessible à tous les visiteurs de votre site, activez l'accès au public dans la page d'édition de vos données et la page de configuration votre visualisation. Lorsque vous l’intégrerez dans votre site vous aurez ce rendu :
Vous avez maintenant toutes les informations pour créer une carte de localisations avec fiches détaillées sur la plateforme Koumoul sans avoir besoin de programmer, et trouver le code pour pouvoir l’intégrer sur un site externe.
N'hésitez pas à nous contacter pour toute information supplémentaire.
Si vous souhaitez aller plus loin, nous pouvons aussi réaliser des visualisations personnalisées.