25:["$","title",null,{"children":"Ma carte - iFrameAPI | Jean-Marc Viglino | Observable"}] 4b:T43e,// Importation des scripts et intégration de l'iFrame-API MapIFrameAPI = { const MapIFrameAPI = await require("https://macarte.ign.fr/carte/MapIFrameAPI.js"); const mapAPI = {}; MapIFrameAPI.ready('map', function(api) { // Récupération de l'API pour un accès global mapAPI.api = api; // Afficher les coords lors d'un déplacement de la carte api.on('move', function(e) { document.querySelector('#lonlat').innerText = e.center[0].toFixed(5)+', '+e.center[1].toFixed(5); }) // Center la carte sur Paris api.setCenter([2.33, 48.85, 10]); // Placer un écouteur pour récupérer les objets sélectionnés api.on('select', function(sel) { const feature = sel[0] // On a une sélection if (feature) { const prop = feature.properties; console.log(prop) // Afficher le nom de la sélection document.querySelector('#title').innerText = prop.lib_epci; } else { // Rien a afficher document.querySelector('#title').innerText = '-'; } }) }) return mapAPI ; }4c:[] 47:{"id":"8596403ad9c57a0b","slug":"ma-carte-iframeapi","title":"Ma carte - iFrameAPI","thumbnail":"d0d3a104cf2c83abfd4dd834d808fd8492a03499a21254225d55297ef4497fa6","access_level":"public","create_time":"$D2023-02-02T08:35:37.381Z","update_time":"$D2023-08-25T13:47:46.997Z","view_time":null,"first_public_time":"$D2023-02-02T08:35:37.381Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8aae6147f9e4216b","login":"viglino","name":"Jean-Marc Viglino","avatar_url":"https://avatars-next.observableusercontent.com/9c0a0d9057004b03c7261e1709b75e564e5269fa59ebfc7a39159f1365f00e85","tier":"starter_2024","bio":"🌐 Ingénieur @IGNFrance 🧭\n🔧#developers | #OpenData #lool | #Macarte #logicielsIGN #mobile 📱#MobilisInMobile #GeoCommuns","following":false},"version":149,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f1bdd758d44b4086","login":"viglino","name":"Jean-Marc Viglino","avatar_url":"https://avatars-next.observableusercontent.com/9c0a0d9057004b03c7261e1709b75e564e5269fa59ebfc7a39159f1365f00e85","tier":null,"bio":"🌐 Ingénieur @IGNFrance 🧭\n🔧#developers | #OpenData #lool | #Macarte #logicielsIGN #mobile 📱#MobilisInMobile #GeoCommuns","following":false}],"members":[{"type":"individual","id":"f1bdd758d44b4086","login":"viglino","name":"Jean-Marc Viglino","avatar_url":"https://avatars-next.observableusercontent.com/9c0a0d9057004b03c7261e1709b75e564e5269fa59ebfc7a39159f1365f00e85","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c30777471cd28e6d","slug":"macarte-iframeapi","title":"Macarte-iFrameAPI","owner":{"id":"8aae6147f9e4216b","login":"viglino","name":"Jean-Marc Viglino"}},"type":"notebook","body":{"titling":"auto","title":"Ma carte - iFrameAPI","cells":[{"id":0,"value":"# Ma carte - iFrameAPI\n

\nL'API iFrame de Ma carte vous permet d'intégrer simplement une carte sur votre site Web et de la contrôler à l'aide de JavaScript.\nLes fonctions de l'API JavaScript vous permettent déplacer la carte ou connaitre sa position, d'afficher un popup ou récupérer les objets affichés sur la carte, de changer d'étape.\n
\nVous pouvez également ajouter des écouteurs d'événements qui s'exécutent en réponse à certains événements déclenchés sur la carte, tel que le déplacement de la carte, la sélection d'un objet ou le changement d'étape (pour les cartes narrative en modèle étape).\n\n💡 Cet exemple montre comment récupérer les objets sélectionnés sur la carte ou le centre de celle-ci. \n[📚 Voir la documentation de l'API ](https://ignf-ma-carte.github.io/mcviewer/doc/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"

sélectionnez un objet sur la carte

Position de la carte :

\n ⇧\n Commencez par ajouter la carte sur la page sous forme d'une iFrame. \n La configuration de la carte se fait simplement, de manière interactive sur le site Ma carte. \n
\n Dans un second temps, intégrez le code de l'API et placez un écouteur dans l'attente du chargement de la carte.\n
\n Une fois la carte chargée, utilisez la variable renvoyée pour contrôler la carte et placer des écouteurs. ⇩\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null