Comment créer une carte interactive sur-mesure ?
Certaines histoires se racontent mieux au travers d’une carte. Une carte interactive est une carte sur laquelle le lecteur agit : il zoome, se déplace, touche un point pour ouvrir un texte, une image, une vidéo ou un son, et choisit les informations qu’il affiche. Le fond peut être une carte géographique (Google Maps, OpenStreetMap, Mapbox) ou n’importe quelle image : le plan d’un zoo, d’un salon, ou d’une ville inventée.
Pour créer une carte interactive, il y a deux approches. Avec un fond de carte, vous partez d’une carte géographique existante et vous y placez vos points par leurs coordonnées : c’est la bonne approche pour des lieux réels mais la personnalisation est plus limitée. Avec une carte sur-mesure, vous dessinez le fond vous-même : le plan, le style et les lieux, réels ou inventés, sont entièrement les vôtres.
Pour les JO de Paris 2024, les organisateurs ont publié une carte interactive des restrictions de circulation, sur un fond de carte. Le Zoo de Chester a dessiné la sienne sur le plan illustré du zoo, pour les participants d’un congrès européen, consultable en ligne et sur une borne du zoo.
Les fonds de carte et leurs limites
Les outils traditionnels partent tous d’une carte géographique du monde réel : vous la stylez, puis vous y placez vos points.
- Google My Maps place des points et trace des zones sur Google Maps et se partage par un lien. Pour une carte de vos magasins ou d’un événement, c’est souvent suffisant.
- Mapbox est un fournisseur de cartes très connu. Il pousse loin la personnalisation du style : couleurs, typographies, routes, bâtiments, couches de données.
- OpenStreetMap est une carte du monde libre et gratuite, construite par des contributeurs bénévoles.
Ces outils ont la même limite, qui tient à leur nature : le fond est toujours le territoire réel. Vous pouvez changer ses couleurs, pas le dessiner. Un stand de salon, une salle de musée, un site industriel vu en coupe ou une ville inventée n’y ont pas de place, faute d’adresse et de coordonnées.
Et une carte n’est souvent qu’une partie du projet. My Maps accepte des photos et des vidéos, et s’intègre à un site sans code. Mais dès que la carte doit s’enchaîner avec d’autres écrans, suivre un parcours ou tourner sur une borne, ces outils s’intègrent dans un site ou une application, en général par du développement.
Pour des lieux réels, en revanche, ils restent la bonne réponse, et PandaSuite les utilise aussi (voir plus bas).
Créer sa carte à partir d’une image
Une carte sur-mesure commence par une image : une illustration, un plan d’architecte, un schéma, un SVG importé d’Illustrator. Dans PandaSuite, trois gestes suffisent à en faire un plan interactif.
- Rendre l’image explorable : le composant Zoomable rend votre image explorable, le lecteur zoome et s’y déplace comme sur une carte.
- Poser des points cliquables : sur l’image, vous placez des hotspots qui ouvrent des pop-ups ou des popovers (un texte, une photo, une vidéo, un son).
- Animer le parcours : les états créent des effets de zoom et des animations d’une zone à l’autre.
Sur une image, les points ne sont pas géolocalisés : ils sont placés sur le dessin, pas sur des coordonnées GPS. Pour un plan de zoo, c’est exactement ce qu’on veut ; pour une carte de vos agences, un fond de carte fera mieux.
La plateforme Connect de NaTran (ex-GRTgaz), réalisée avec l’agence Virtuoz, explique ainsi le réseau gazier sur un plan dessiné : chaque étiquette de la carte est un point cliquable.
Un clic ouvre la fiche de l’étape, avec son texte et un lien pour aller plus loin :
Le Zoo de Chester a fait de même avec le plan illustré du zoo, pour présenter ses zones et ses projets éducatifs, en quatre langues. Publiée en web app, la carte tourne aussi sur une borne du zoo et se met à jour à distance.
Et lors d’un hackathon avec Flammarion, l’Atlas de Rome des éditions Autrement a été transformé en cartes interactives multimédia :
La lecture charge le lecteur YouTube (Google Ireland Ltd), qui enregistre des données sur votre appareil pour la lecture et la mesure d'audience, comme décrit dans la politique de confidentialité de Google. Vous pouvez aussi la regarder sur YouTube .
La même approche fonctionne sur une vraie carte. Le composant Carte affiche Google Maps, OpenStreetMap ou Mapbox, avec des points d’intérêt, des zones et des itinéraires ; les marqueurs peuvent venir d’une source de données, comme dans le template Bonnes adresses Paris alimenté par Airtable. Google Maps demande une clé API ; Mapbox, un compte, gratuit jusqu’à 50 000 chargements de carte par mois puis payant à l’usage.
Avec le GPS et le géo-repérage, un contenu se déclenche même quand le visiteur entre dans une zone : c’est le principe du template Balade sonore interactive.
Les étapes pour créer une carte interactive
Une carte interactive est composée de trois éléments : le fond de carte, les points d’intérêt (ou hotspots) et les contenus additionnels (texte, image, vidéo…).
- Définir l’objectif : Commencez par définir l’objectif de votre carte interactive. Que voulez-vous montrer ou raconter ? Cela orientera le choix des données, de l’outil et la structure de votre carte.
- Sélectionner les données : Choisissez les données que vous souhaitez afficher sur votre carte : des emplacements, des points d’intérêt, des itinéraires, des zones géographiques… ? Définissez également si vous souhaitez les intégrer manuellement sur la carte ou bien dynamiquement depuis une source de données.
- Personnaliser l’apparence : Personnalisez le graphisme de votre carte interactive en choisissant le style, les couleurs, les icônes, les polices et d’autres éléments de design pour correspondre à votre marque ou à vos besoins spécifiques.
- Ajouter des interactions : Créez des interactions dynamiques en configurant des actions spécifiques (par exemple, cliquer sur un point pour afficher des informations supplémentaires).
- Tester et publier : Avant de publier votre carte, testez-la sur différents appareils pour vous assurer qu’elle fonctionne bien partout. Une fois satisfait, publiez votre carte interactive directement sur votre site web, partagez-la via un lien ou exportez-la au format application.
Par où commencer
Tout part du fond. Si vos lieux sont réels et que le rendu d’une carte géographique vous convient, un fournisseur de cartes peut suffire ; PandaSuite prend le relais quand la carte doit s’insérer dans une expérience plus large. Si vous voulez un plan à votre image, un lieu inventé ou une carte qui s’ouvre sur des contenus riches, partez d’un plan dessiné (une image).
Pour essayer, créez un compte gratuit et importez votre plan.
