La visualisation infos localisations est une 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 expliquons comment réaliser une carte infos localisations à l'aide de la plateforme Koumoul, sans programmer.

Dans notre exemple, nous projetons les différents évènements des Journées européennes du patrimoine dans le Morbihan en 2019. Pour réaliser cette visualisation, vous avez besoin de ces données, d’être connecté à votre compte Koumoul et de quelques minutes.

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.

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 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. Pour afficher si les évènements sont gratuits ou payants et s’ils nécessitent une inscription :

• choisissez gratuit-payant dans la section couleur par valeur d’un champ, puis définissez les couleurs que vous souhaitez associer aux variables ;
• choisissez inscription dans la section icône par valeur d’un champ et définissez les pictogrammes que vous souhaitez afficher (vous pouvez rechercher parmi la liste d’icônes en saisissant des mots clés, par exemple, ici : check circle).

Dans la partie fiche, vous pouvez configurer les fiches informatives. Afin de rendre cliquable le lien vers le site web de l’évènement, dans la section champ de lien, ajoutez le champ site web du lieu provenant de votre jeu de données.

Ajoutez ensuite, dans champs à utiliser, tous les champs que vous souhaiterez voir apparaître dans ces fiches, comme : type d’évènement, adresse, lien d’inscription 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>

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égrez dans votre site vous obtenez ce rendu :

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 maintenant toutes les informations pour créer une carte de localisations avec fiches détaillées sur la plateforme Koumoul et trouver le code pour pouvoir l’intégrer sur un site externe.

N'hésitez pas à nous contacter pour toute information complémentaire. Si vous souhaitez aller plus loin, nous pouvons aussi réaliser des visualisations personnalisées.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous contacter pour nous en faire part.