{"id":20515543,"url":"https://github.com/ignf/geoportal-sdk","last_synced_at":"2026-03-08T07:31:18.618Z","repository":{"id":37484675,"uuid":"75778252","full_name":"IGNF/geoportal-sdk","owner":"IGNF","description":"French Geoportal SDK Javascript","archived":false,"fork":false,"pushed_at":"2024-09-03T21:32:42.000Z","size":536640,"stargazers_count":31,"open_issues_count":3,"forks_count":14,"subscribers_count":9,"default_branch":"develop","last_synced_at":"2025-02-16T18:16:35.270Z","etag":null,"topics":["3d","geoportail","geoportal-access-lib","geoportal-extensions","itowns","openlayers","sdk"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IGNF.png","metadata":{"files":{"readme":"README-SDK-2D.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-06T22:45:41.000Z","updated_at":"2025-02-05T08:54:39.000Z","dependencies_parsed_at":"2024-01-13T04:12:08.158Z","dependency_job_id":"5dc6d770-09e3-4094-b706-a9ade48e0011","html_url":"https://github.com/IGNF/geoportal-sdk","commit_stats":{"total_commits":931,"total_committers":11,"mean_commits":84.63636363636364,"dds":0.4457572502685284,"last_synced_commit":"316168e8de142627da59dff008cc4c4b308bf2c2"},"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGNF%2Fgeoportal-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGNF%2Fgeoportal-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGNF%2Fgeoportal-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGNF%2Fgeoportal-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IGNF","download_url":"https://codeload.github.com/IGNF/geoportal-sdk/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242118505,"owners_count":20074589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","geoportail","geoportal-access-lib","geoportal-extensions","itowns","openlayers","sdk"],"created_at":"2024-11-15T21:22:39.862Z","updated_at":"2026-03-08T07:31:18.581Z","avatar_url":"https://github.com/IGNF.png","language":"HTML","readme":"# Kit de Développement (SDK) Géoplateforme - version 2D\n\n\u003c!-- toc --\u003e\n\n- [Mise en oeuvre](#mise-en-oeuvre)\n  * [Téléchargement](#telechargement)\n    + [Téléchargement direct](#telechargement-direct)\n    + [Récupération avec NPM](#recuperation-avec-npm)\n    + [Accès direct](#acces-direct)\n  * [Intégration dans une page web](#integration-dans-une-page-web)\n  * [Utilisation dans module ES6](#utilisation-dans-module-es6)\n  * [Interfaces de programmation](#interfaces-de-programmation)\n  * [Création et affichage d'une carte](#creation-et-affichage-dune-carte)\n  * [Configuration de l'accès à la Géoplateforme](#configuration-de-lacces-a-la-geoplateforme)\n  * [Configuration dynamique](#configuration-dynamique)\n  * [Optimisation du chargement : configuration locale](#optimisation-du-chargement--configuration-locale)\n  * [Configuration du centrage de la carte](#configuration-du-centrage-de-la-carte)\n    + [Centrage par coordonnées](#centrage-par-coordonnees)\n    + [Centrage en utilisant le service de géocodage du Géoplateforme](#centrage-en-utilisant-le-service-de-geocodage-du-geoplateforme)\n    + [Centrage par géolocalisation du terminal utilisé](#centrage-par-geolocalisation-du-terminal-utilise)\n  * [Configuration des couches utilisées pour composer la carte](#configuration-des-couches-utilisees-pour-composer-la-carte)\n    + [Affichage des couches Géoplateforme WMS et WMTS](#affichage-des-couches-geoplateforme-wms-et-wmts)\n    + [Affichage des couches \"externes\"](#affichage-des-couches-externes)\n  * [Configuration des markers](#configuration-des-markers)\n  * [Configuration des outils additionnels à proposer sur la carte](#configuration-des-outils-additionnels-a-proposer-sur-la-carte)\n  * [Abonnement aux intéractions des utilisateurs avec la carte](#abonnement-aux-interactions-des-utilisateurs-avec-la-carte)\n  * [Autres possibilités de paramétrage](#autres-possibilites-de-parametrage)\n  * [Gestion des projections](#gestion-des-projections)\n  * [Interaction avec la carte créée](#interaction-avec-la-carte-creee)\n\n\u003c!-- tocstop --\u003e\n\nLe Kit de Développement Web Géoplateforme dans sa version \"SDK-2D\" s’adresse à des gestionnaires de site internet désireux de proposer rapidement une cartographie dynamique en 2D utilisant les fonds IGN sur leur site et faisant appel à des fonctionnalités simples :\n\n* positionnement de la carte ([centrage, orientation, niveau de zoom](#center))\n\n* composition de la carte ([choix et assemblage du fond cartographique](#layers), [positionnement de repères visuels](#markers))\n\n* mise à disposition [d’outils d’interaction avec la carte](#controls) aux internautes\n\n* gestion de l’interaction de l’internaute avec la carte ([événements](#events))\n\n## Mise en oeuvre\n\n### Téléchargement\n\nVous pouvez récupérer le Kit de Développement Web Géoplateforme soit par [téléchargement direct](#download-direct), soit en utilisant le [gestionnaire de dépendances javascript NPM](#download-npm).\n\n\nIl contient l'arborescence suivante :\n\n    \u003cKit de Développement Web Géoplateforme\u003e/\n        GpSDK2D.js\n            (version minifiée du code javascript pour une utilisation en production)\n        GpSDK2D.css\n            (version minifiée des css pour une utilisation en production)\n        GpSDK2D-src.js\n            (version non minifiée du code javascript pour une utilisation en développement)\n        GpSDK2D-src.css\n            (version non minifiée des css pour une utilisation en développement)\n        GpSDK2D-map.js\n            (version source map du code javascript pour une utilisation en développement)\n        GpSDK2D-map.css\n            (version source map des css pour une utilisation en développement)\n\n\n\u003ca id=\"download-direct\"/\u003e\n\n#### Téléchargement direct\n\nVous pouvez télécharger la dernière version du Kit de Développement Web Géoplateforme directement sur [la page Github des releases du SDK](https://github.com/IGNF/geoportal-sdk/releases).\nKit de Développement Géoplateforme\nL'archive téléchargée (GpSDK.zip) comprend l'arborescence décrite ci-dessus.\n\n\n\u003ca id=\"download-npm\"/\u003e\n\n#### Récupération avec NPM\n\nLe Kit de Développement Web Géoplateforme est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/@ignf-geoportal/sdk-2d).\n\nPrérequis : [NodeJS](https://nodejs.org/en/) et [npm](https://www.npmjs.com/) installés.\n\n```\nnpm i @ignf-geoportal/sdk-2d\n```\n\nL'arborescence décrite ci-dessus sera alors accessible dans le répertoire `node_modules/@ignf-geoportal/sdk-2d/dist/` de votre projet.\n\n#### Accès direct\n\nVous pouvez aussi choisir d'utiliser des fichiers hébergés en ligne, pour y accéder directement, lors de vos tests par exemple. Cependant, pour une utilisation en production, nous vous conseillons de télécharger ces fichiers et de les héberger vous-même, sur le même serveur qui héberge votre application.\nPar exemple sur Github Pages :\n```\nhttps://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D.js\nhttps://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D.css\nhttps://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D-src.js\nhttps://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D-src.css\n```\n\n### Intégration dans une page web\n\nPlacez les fichiers du SDK géoportail dans l'arborescence de votre serveur web. Vous pouvez positionner à votre guise les fichiers css et javascript.\n\nIntégrez le SDK géoportail dans votre page web classiquement à l'aide d'une balise **script** pour charger le fichier javascript et d'une balise **link** pour charger le fichier css.\n\n``` html\n\u003c!-- SDK web Géoplateforme --\u003e\n\u003cscript src=\"chemin/vers/GpSDK2D.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"chemin/vers/GpSDK2D.css\" /\u003e\n\n```\n\n### Utilisation dans module ES6\n\n``` javascript\nimport * as Gp from \"@ignf-geoportal/sdk-2d\";\n\n// votre utilisation du SDK\nvar map = Gp.Map.load(\"myDivId\",{\n    apiKey : \"monThemeGeoplateforme\",\n    ...\n});\n```\n\n### Interfaces de programmation\n\nLe chargement du SDK vous donne accès à son [interface de programmation](https://ignf.github.io/geoportal-sdk/latest/jsdoc/index.html) en plus des interfaces de programmation de [la bibliothèque d'accès](http://ignf.github.io/geoportal-access-lib/latest/jsdoc/index.html) ; d'[OpenLayers](https://openlayers.org/en/latest/apidoc/) et de son [extension géoportail dédiée](http://ignf.github.io/geoportal-extensions/current/jsdoc/openlayers/).\n\n\n\n### Création et affichage d'une carte\n\nLa création et l'affichage d'une carte se fait à l'aide de la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html). Elle prend deux paramètres en entrée :\n\n* l'identifiant du container HTML (typiquement un élément ```\u003cdiv\u003e```) dans lequel on veut qu'elle s'affiche.\n\n* un objet javascript, de type [Gp.MapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html) contenant le paramétrage de la carte.\n\nElle retourne un objet de type [Gp.Map](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html) avec lequel il sera ensuite possible [d'intéragir](#interact).\n\n\nExemple : le code suivant :\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {           \n         // thème(s) d'accès à la plateforme\n         apiKey: \"cartes,essentiels\",\n         // centrage de la carte\n         center : {\n             location : \"73 avenue de Paris, Saint-Mandé\"\n         },\n         // niveau de zoom de la carte (de 1 à 21)\n         zoom : 17,\n         // Couches à afficher\n         layersOptions : {\n             \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\" : {\n             }\n         },\n         // Outils additionnels à proposer sur la carte\n         controlsOptions : {\n             // ajout d'une barre de recherche\n             \"search\" : {\n                 maximised : true\n             }\n         },\n         // Repères visuels\n         markersOptions : [{\n             content : \"\u003ch1\u003ePôle Géosciences\u003c/h1\u003e\u003cbr/\u003e\u003cp\u003e73 avenue de Paris, Saint-Mandé\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003ca href='http://www.pôle-géosciences.fr/index.htm' target='_blank'\u003eSite Web\u003c/a\u003e\u003c/p\u003e\"\n         }]\n    }    \n) ;\n```\n\nPermet, d'afficher une carte avec les options suivantes :\n\n* utilisation facultative de **configurations des ressources d'un ou plusieurs thème Géoplateforme** 'THEME-1', 'THEME-2'. Si absent, une configuration Géoplateforme complète est récupérée ([Plus d'infos sur les possibilités de paramétrage des droits...](#config));\n\n* **centrage** sur l'adresse *\"73 avenue de Paris, Saint-Mandé\"* (en utilisant le service de géocodage du Géoplateforme) zoomée au niveau 17 ; ([Plus d'infos sur les possibilités de centrage...](#center))\n\n* **fonds de carte** : ressource *Cartes SCAN Express Standard (GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2*). [Plus d'infos sur le paramétrage des couches...](#layers);\n\n* **outils additionnels** : barre de recherche (*controlsOptions*). [Plus d'infos sur le paramétrage des outils additionnels...](#controls) ;\n\n* **Affichage d'un marker**, associé à du contenu riche, au point de centrage de la carte (*markersOptions*). [Plus d'infos sur le paramétrage des markers...](#markers) ;\n\n**Voir le code sur jsFiddle :**\n\n[![jsFiddle](https://ignf.github.io/geoportal-sdk/latest/jsdoc/images/sdk-basic.png)](http://jsfiddle.net/ignfgeoportail/a9Lhp3tz/embedded/result,js,html,css/)\n\n\n\u003ca id=\"config\"/\u003e\n\n### Configuration de l'accès à la Géoplateforme\n\nL'extension Géoplateforme pour iTowns exploite les services web exposés par la Géoplateforme. Ceux-ci sont en libre accès.\n\nVous pouvez cependant paramétrer l'utilisation de l'extension avec une ou plusieurs thématiques Géoplateforme qui correspondent à vos besoins en générant un fichier de configuration local à partir de [cette interface](https://geoplateforme-configuration.onrender.com/) ou en passant par le paramètre apiKey.\n\nSi ni apiKey, ni fichier de configuration local n'est spécifié, l'utilisateur récupérera une configuration complète avec toutes les ressources de la Géoplateforme (qui pourra donc être très volumineuse).\n\n\nLe SDK web Géoplateforme exploite les services web exposés par la Géoplateforme. Ceux-ci sont en libre accès. \n\nVous pouvez cependant paramétrer l'utilisation de l'extension avec une ou plusieurs thématiques Géoplateforme qui correspondent à vos besoins en générant un fichier de configuration local à partir de [cette interface](https://geoplateforme-configuration.onrender.com/) ou en passant par le paramètre apiKey.\n\nSi ni apiKey, ni fichier de configuration local n'est spécifié, l'utilisateur récupérera une configuration complète avec toutes les ressources de la Géoplateforme (qui pourra donc être très volumineuse).\n\nIl est possible de savoir quelle thème est associée à quelle ressource [ici](https://geoservices.ign.fr/documentation/services/tableau_ressources).\n\n\n### Configuration dynamique\n\nUne fois la ou les thèmes voulus choisies, vous pouvez les utiliser pour paramétrer le SDK à l'aide de la propriété **apiKey** lors de l'initialisation de la carte :\n\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         ...\n         // clef d'accès à la plateforme\n         apiKey: \"THEME-1,THEME-2\",\n         ...\n    }\n) ;\n```\n\nLors du chargement de la carte, le SDK récupèrera automatiquement la configuration associée à votre clef et s'en servira pour paramétrer la carte en fonction des droits disponibles.\n\n\n### Optimisation du chargement : configuration locale\n\nVous pouvez améliorer le temps de chargement de votre page en mettant en cache sur votre plateforme la configuration associée à votre ou vos clefs d'accès. Il vous suffit pour cela de récupérer le fichier de configuration (customConfig.json) obtenu à l'aide [du formulaire de ce tutoriel](https://geoportal-configuration.onrender.com/).\n\nEnregistrez ce fichier sur votre plateforme et paramétrez le SDK à l'aide de la propriété **customConfigFile** lors de l'initialisation de la carte :\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         ...\n         // configuration de l'accès à la plateforme\n         configUrl : \"chemin/vers/customConfig.json\",\n         ...\n    }\n) ;\n```\n\n\n\u003ca id=\"center\"/\u003e\n\n### Configuration du centrage de la carte\n\nLe paramétrage du centre de la carte se fait à l'aide de la propriété **[center](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html).\n\nOn peut centrer la carte de differentes façons :\n\n#### Centrage par coordonnées\n\nOn précise les coordonnées à l'aide des propriétés **x** et **y** en y associant l'identifiant de la projection dans laquelle elles sont exprimées à l'aide de la propriété **projection**. Par défaut, la projection utilisée est celle de la carte.\n\n**Exemple :**\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         // centrage de la carte\n         center : {\n             x : -4.620391,\n             y : 48.268698,\n             projection : \"CRS:84\"\n         },\n    }\n) ;\n```\n\nPlus d'informations sur le paramétrage des projections [ici](#projections).\n\n\n#### Centrage en utilisant le service de géocodage du Géoplateforme\n\nLa propriété **location** permet de préciser le lieu à géocoder et la propriété **locationType** permet de préciser le type de Géocodage à appliquer, selon la terminologie suivante (rendez vous [ici](https://geoservices.ign.fr/documentation/geoservices/geocodage.html) pour plus d'informations sur le service de Géocodage du Géoplateforme...) :\n\n* \"PositionOfInterest\" : géocodage par noms de lieux\n\n* \"StreetAddress\" : géocodage par adresses\n\n* \"CadastralParcels\" : géocodage d'indentifiants de parcelles cadastrales\n\n* \"location\" : regroupe les types \"PositionOfInterest\" et \"StreetAddress\"\n\n\n**Exemple :**\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         // centrage de la carte\n         center : {\n             location : \"73 avenue de Paris, Saint-Mandé\",\n             locationType : \"StreetAddress\"\n         },\n    }\n) ;\n```\n\n*NB* : Cette possibilité de centrage ne fonctionne que si au moins [une clef d'accès à la Géoplateforme utilisée pour paramétrer le SDK](#config) possède les droits nécessaires sur les ressources utilisées pour le Géocodage, par exemple la clé \"essentiels\".\n\n\n#### Centrage par géolocalisation du terminal utilisé\n\nLa propriété **geolocate**, si elle est positionnée à **true**, permet de déclencher - sous réserve d'acceptation de l'internaute - une géolocalisation du terminal consultant la page et d'utiliser les coordonnées obtenues pour centrer la carte.\n\n**Exemple :**\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         // centrage de la carte\n         center : {\n             geolocate : true\n         },\n    }\n) ;\n```\n\n*NB* : on peut modifier le centre de la carte à tout moment après son chargement initial à l'aide de la méthode [setCenter()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.setCenter), de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie \"Interaction avec la carte\"](#interact)\n\n\n\u003ca id=\"layers\"/\u003e\n\n### Configuration des couches utilisées pour composer la carte\n\nLe paramétrage des couches qui vont composer la carte se fait à l'aide de la propriété **layersOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html).\n\nC'est un objet javascript dont chaque propriété va représenter une couche composant la carte : la clef est un identifiant associé à la couche ; la valeur d'un objet de type [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html) permettant de préciser les caractéristiques de la couche à afficher.\n\nSi cette propriété n'est pas renseignée, l'affichage se fera par défaut avec la couche des Photographies aériennes (\"ORTHOIMAGERY.ORTHOPHOTOS\") servie en images tuilées (WMTS) si la [clef d'accès utilisée pour initialiser la carte](#config) en possède les droits.\n\nSelon le type de couches à afficher (\"Géoplateforme\" ou externe), le paramétrage varie.\n\n\n#### Affichage des couches Géoplateforme WMS et WMTS\n\nLes couches Géoplateforme sont les couches auxquelles donne droit [les clefs utilisées pour paramétrer la carte](#config). Pour ajouter une telle couche à la carte, il suffit d'utiliser son nom technique comme clef de l'objet **layersOptions** et de passer comme valeur associée, un objet javascript de type [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html) contenant, si besoin, des propriétés particulières ou vide si la configuration par défaut convient.\n\n**Exemple 1** : ajout des couches WMTS Photographies aériennes et cartes avec une opacité de 30%.\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         ...\n         // Couches à afficher\n         layersOptions : {\n             // Couche photographies aériennes\n             \"ORTHOIMAGERY.ORTHOPHOTOS\" : {},\n             // Couche photographies aériennes\n             \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\" : {\n                 opacity : 0.3\n             }\n         }\n         ...\n    }    \n) ;\n```\n\n**Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/oLy81mf6/embedded/result,js,css,html/)**\n\n\n**Exemple 2** : ajout de couches WMS INSPIRE servies par la Géoplateforme.\n\n``` javascript\nvar map = Gp.Map.load(\n    \"map\", // html div\n    {\n         ...\n         layersOptions : {\n             \"OI.OrthoimageCoverage\" : {},\n             \"BU.Building\" : {}\n         }\n         ...\n    }    \n) ;\n```\n\n**Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/7dg0yj9v/embedded/result,js,css,html/)**\n\n\n\n#### Affichage des couches \"externes\"\n\nLes couches externes sont des données issues d'autres serveurs que ceux de la Géoplateforme. Pour ajouter de telles couches à la carte, vous utilisez un identifiant de votre choix comme clef de l'objet **layersOptions** et passez comme valeur associée, un objet javascript de type [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html) contenant le paramétrage nécessaire qui permettra au SDK d'afficher la couche.\n\nLes formats supportés par le SDK pour les couches externes sont les suivants :\n\nPour les données images : WMS, WMTS, Open Street Map\n\nPour les données vecteur : WFS, KML, GPX, GeoJSON\n\nLe type de couches à afficher, lorsqu'il ne s'agit pas d'une couche Géoplateforme, doit être passé via la propriété \"format\" de l'objet [Gp.LayerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html).\n\n\n**Exemple** : ajout d'une couche WMS externe.\n\n\n``` javascript\nvar map = Gp.Map.load(\n    \"map\", // html div\n    {\n         ...\n         layersOptions : {\n             \"ORTHOIMAGERY.ORTHOPHOTOS\" : {},\n             \"ifremer-sables-languedoc\" : {\n                 title : \"Sables Languedoc\",\n                 description :\"IFREMER : Formations superficielles du précontinent Languedocien - Sable\",\n                 format : \"WMS\",\n                 version : \"1.3.0\",\n                 url : \"http://www.ifremer.fr/services/wms/geosciences?\",\n                 layers : [\"IFR_FACIESSABLE_GDL_1986_P\"],\n                 outputFormat : \"image/png\",\n                 legends : [{\n                     url : \"http://www.ifremer.fr/services/wms/geosciences?version=1.3.0\u0026service=WMS\u0026request=GetLegendGraphic\u0026sld_version=1.1.0\u0026layer=IFR_FACIESSABLE_GDL_1986_P\u0026format=image/png\u0026STYLE=default\",\n                     format : \"image/png\"\n                 }]\n             }\n         },\n         ...\n    }\n) ;\n```\n\n**Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/pLcebctq/embedded/result,js,css,html/)**\n\n*NB* : on peut ajouter, modifier ou retirer les couches de la carte à tout moment après son chargement initial à l'aide des méthodes [addLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.addLayers), [modifyLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.modifyLayers) ou [removeLayers()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.removeLayers) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie \"Interaction avec la carte\"](#interact)\n\n\u003ca id=\"markers\"/\u003e\n\n### Configuration des markers\n\nLe SDK vous permet de rajouter des repères (markers) sur votre carte. Cela se fait à l'aide de la propriété **markersOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html).\n\nIl s'agit d'un tableau javascript contenant autant d'éléments que de markers à rajouter. Chaque élément est un objet javascript de type [Gp.MarkerOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MarkerOptions.html) ; il permet de préciser les caractéristiques (positionnement, apparence, ...) du repère de positionnement à afficher.\n\n**Exemple** : Positionnement d'un marker au centre de la carte.\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {           \n         ...\n         // Repères visuels\n         markersOptions : [{\n             content : \"\u003ch1\u003ePôle Géosciences\u003c/h1\u003e\u003cbr/\u003e\u003cp\u003e73 avenue de Paris, Saint-Mandé\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003ca href='http://www.pôle-géosciences.fr/index.htm' target='_blank'\u003eSite Web\u003c/a\u003e\u003c/p\u003e\"\n         }],\n         ...\n    }    \n) ;\n```\n\n**Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/a9Lhp3tz/embedded/result,js,html,css/)**\n\n\n\u003ca id=\"controls\"/\u003e\n\n### Configuration des outils additionnels à proposer sur la carte\n\nPar défaut la carte se présente avec les boutons de zoom et l'affichage des attributions. Le SDK vous permet de rajouter des outils sur la carte qui vont permettre à l'internaute d'interagir avec celle-ci.\n\nL'ajout d'outils se fait à l'aide de la propriété **controlsOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html). Il s'agit d'un objet javascript dont chaque propriété a le nom de l'outil à rajouter et chaque valeur de propriété permet de préciser - si besoin - le paramétrage de l'outil. Ce paramétrage se fait à l'aide d'un objet javascript de type [Gp.ControlOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html), dont les propriétés vont varier selon l'outil.\n\nLes outils disponibles sont les suivants :\n\n* boutons de zoom ([\"zoom\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#zoom)) ;\n\n* gestionnaire de couches ([\"layerswitcher\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#layerswitcher))\n\n* affichage des informations attributaires ([\"getfeatureinfo\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#getfeatureinfo))\n\n* barre de recherche ([\"search\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#searchctrl))\n\n* recherche inversée ([\"reversesearch\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#reversesearch))\n\n* outils de dessin ([\"drawing\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#drawing))\n\n* affichage des producteurs de données ([\"attributions\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#attributions))\n\n* mini vue ([\"overview\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#overview)) ;\n\n* bouton d'orientation ([\"orientation\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#orientation)) ;\n\n* échelle graphique ([\"graphicscale\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#graphicscale)) ;\n\n* coordonnées de la souris ([\"mouseposition\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#mouseposition))\n\n* calcul d'isochrones ([\"isocurve\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#isocurve))\n\n* affichage d'une grille ([\"graticule\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#graticule))\n\n* import de couches ([\"layerimport\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#layerimport))\n\n* calcul de distances ([\"length\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#length))\n\n* calcul de surfaces ([\"area\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#area))\n\n* calcul d'azimuth ([\"azimuth\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#azimuth))\n\n* calcul de profil altimétrique ([\"elevationpath\"](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.ControlOptions.html#elevationpath))\n\n*NB* : on peut ajouter, modifier ou retirer les outils de la carte à tout moment après son chargement initial à l'aide des méthodes [addControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.addControls), [modifyControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.modifyControls) ou [removeControls()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.removeControls) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie \"Interaction avec la carte\"](#interact)\n\n\n\u003ca id=\"events\"/\u003e\n\n### Abonnement aux interactions des utilisateurs avec la carte\n\nLe SDK permet d'écouter certains événements qui se produisent lorsque les internautes interagissent avec la carte et de définir des comportements à appliquer lorsque ces événements se produisent.\n\nCela se fait à l'aide de la propriété **mapEventsOptions** de l'objet [mapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html).\n\nIl s'agit d'un objet javascript dont les propriétés ont le nom de l'événement auquel on souhaite s'abonner et les valeurs associées sont des fonctions javascript à déclencher lorsque l'événement se produit. Chaque fonction prend comme paramètre un objet javascript représentant l'événement et ses propriétés qui vient de se produire.\n\nLes événements auxquels on peut s'abonner sont les suivants :\n\n* Evénements d'initialisation : \"mapLoaded\", \"geolocated\", \"located\", \"configured\"\n\n* Evénements de changement d'état de la carte : \"centerChanged\", \"zoomChanged\" ,\"azimuthChanged\", \"layerChanged\"\n\n\n**Exemple** : Déclenchement d'une alerte à la fin de l'initialisation de la carte.\n\n``` javascript\nvar map = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {           \n         ...\n         mapEventsOptions : {\n             // when map has finished to initialize and to render\n             \"mapLoaded\" : function(evt) {\n                 alert(\"map ready !\") ;\n             }\n         }\n         ...\n    }    \n) ;\n```\n\n**Voir l'exemple complet sur [jsFiddle](http://jsfiddle.net/ignfgeoportail/gwxLbrdd/embedded/result,js,html,css/)**\n\n\n*NB* : on peut s'abonner aux événements à tout moment après le chargement initial de la carte à l'aide de la méthode [listen()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html#.listen) de l'objet map retourné par la fonction Gp.map.load(). [Voir la partie \"Interaction avec la carte\"](#interact)\n\n\n\u003ca id=\"others\"/\u003e\n\n### Autres possibilités de paramétrage\n\nL'objet [Gp.MapOptions](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.MapOptions.html) permet de jouer sur d'autres paramètres de la carte lors de son initialisation avec la fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html). Entre autres :\n\n* la projection\n\n* les niveaux de zoom courant, minimal et maximal\n\n* l'orientation (azimuth) de la carte\n\n* ...\n\n\u003c!--\n\u003ca id=\"projections\"/\u003e\n\n### Gestion des projections\n--\u003e\n\n\u003ca id=\"interact\"\u003e\n\n### Interaction avec la carte créée\n\nLa fonction [Gp.Map.load()](https://ignf.github.io/geoportal-sdk/latest/jsdoc/module-Utils_MapLoader.html) retourne un objet de type [Gp.Map](https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Map.html) avec lequel il sera possible d'intéragir programmatiquement **à partir du moment où l'événement \"mapLoaded\" sera émis**.\n\nPour un bon fonctionnement, il faut donc conditionner les traitements ultérieurs au chargement de la carte à la réception de cet événement à l'aide de la propriété mapEventsOptions [comme décrit précédemment](#events). Un script javascript utilisant le SDK web Géoplateforme aura donc l'allure générale suivante :\n\n``` javascript\n\nvar map = null ;\n\nfunction afterInitMap() {\n    // le code de l'application interagissant avec la carte\n    // ici, l'objet map est initialisé.\n    ...\n}\n\n// Chargement de la carte et initialisation de l'objet Map\nmap = Gp.Map.load(\n    \"mapDiv\",   // identifiant du conteneur HTML\n    // options d'affichage de la carte (Gp.MapOptions)\n    {\n         apiKey : \"THEME-1, THEME-2\",\n         ...\n         mapEventsOptions : {\n             // Appel de la fonction après le chargement de la carte\n             \"mapLoaded\" : afterInitMap\n         }\n         ...\n    }    \n) ;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignf%2Fgeoportal-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fignf%2Fgeoportal-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignf%2Fgeoportal-sdk/lists"}