Narrations avec IGN Ma Carte et MapiFrameAPI
- Problème :
gh=<geohash-zoom>ne s’applique pas aux narrations en modèle Onglets. - Solution : MapiFrameAPI + interface d’onglets reconstruite côté app.
- Résultat : une carte unique, narrations contextualisées par territoire, sans duplication.
- Exemple :
https://labs.s-pass.org/storymaps?mc=12345&gh=u0dqywrv-10.1
Expérimenter les narrations
Le CAUE du Nord exploite largement les services d’IGN Ma Carte pour concevoir des cartes web innovantes au service de ses missions.
Parmi les fonctionnalités proposées, les narrations se distinguent. Elles transforment une carte en support de storytelling :
- mise en valeur des données,
- guidage pas à pas,
- expérience immersive adaptée à un message précis.
Une narration intègre les éléments de la carte de base :
- couches cartographiques,
- objets dessinés,
- info-bulles et contenus enrichis.
Le modèle Onglets
Le modèle Onglets permet de regrouper plusieurs narrations en une seule interface. Chaque narration est accessible via un onglet.
Voici un exemple de narration à onglet dans le cadre dans un concours photo animé par l'Union Régionale des CAUE des Hauts-de-France en partenariat avec la Direction Régionale de l'Environnement, de l'Aménagement et du Logement.
Besoin identifié
Sur les portails S-PASS Territoires, nous devons contextualiser les narrations par territoire.
Exemple : ouvrir directement l’onglet “Patrimoine” centré sur Lille, puis le même onglet centré sur Douai.
Problème : impossible sans dupliquer la carte.
Limite rencontrée : le Geohash
Un Geohash est une manière compacte de représenter une position géographique sous forme de chaîne de caractères.
Il encode une latitude et une longitude en un code alphanumérique.
Dans IGN Ma Carte, le Geohash est utilisé comme paramètre d’URL (gh) pour ouvrir une carte directement centrée sur un lieu précis, avec un niveau de zoom.
https://macarte.ign.fr/carte/hcyelL/Concours-photo?gh=u140jbex-12.8¬itle&tab
u140jbex: le code geohash de la zone (ici, Lille),12.8: le niveau de zoom appliqué à l’ouverture.
Ainsi, un simple lien permet de partager une carte déjà centrée sur un territoire.
Problème : ce mécanisme ne fonctionne pas avec les narrations en mode Onglets.
Conséquence : impossible de fournir à chaque partenaire une narration réutilisable directement centrée sur leur zone sans dupliquer la narration.
Vers une solution avec MapiFrameAPI
Pour contourner cette limite, nous avons testé Ma Carte iFrameAPI.
Cette API permet d’intégrer une carte IGN dans un site via <iframe> et de la piloter avec JavaScript.
Capacités offertes
Avec l’API, on peut :
- contrôler l’affichage et la position de la carte (map.setView(lat, lon, zoom)),
- gérer dynamiquement le contenu (ajout/retrait de couches),
- récupérer des informations (couches visibles, objets sélectionnés),
- écouter des événements (déplacement, clic, changement d’onglet).
Reconstruction des narrations à onglets
Dans ce POC, nous avons exploré la reconstruction dynamique des narrations :
- Récupérer la composition d’une narration à onglets via son identifiant (id),
- Recréer l’interface des onglets dans notre application,
- Activer la prise en charge du Geohash pour ouvrir chaque onglet directement sur un territoire.
Exemple d’URL contextualisée :
Et après ?
Cette expérimentation illustre la philosophie S-PASS Labs :
- tester les limites des outils existants,
- prototyper des alternatives,
- ouvrir de nouvelles perspectives pour les usages cartographiques collaboratifs.
Prochaines étapes
- Valider la robustesse de l’intégration,
- Travailler avec l'IGN pour intégrer directement cette amélioration dans les cartes narratives
- Intégrer nativement la solution dans les portails S-PASS Territoires.
