FORMATION API GEOPORTAIL Développer avec l’API Géoportail Web 2D en JavaScript ENSG, 7 mars 2012

Documentation disponible : API.IGN.FR Forum API sur developpez.com Documentation en ligne JsDoc Exemples Téléchargements Codes sources Doc API en PDF

Environnement de Développement ZazouMiniWebServer (ZWMS) PHP, Apache, MySQL Installer ZWMS Copier le dossier : « TP_API » dans le dossier « _web.zmwsc » Double cliquer sur le fichier '_start_all.bat' pour démarrer le serveur Firefox / Firebug Notepad++

Premiers pas avec l’API Géoportail Javascript Objectifs : Afficher sa première fenêtre carto Analyser le code source Étapes : Se rendre sur le site http://api.ign.fr Créer un compte Créer un contrat Copier / coller le code source généré dans le fichier tp.html Afficher la première page dans votre navigateur Web http://localhost/tp_api/tp.html

Premier pas avec l’API Géoportail Javascript Analyse <meta> : pour la définition de la langue, de l’encodage… < <style> : définition des CSS <script> : contient l’import de l’API Géoportail - Appel du loader cf documentation du Geoportal.load()

Personnaliser la carte Objectifs : Modifier les paramètres par défaut Identifier les composants du viewer Changer le style par défaut du viewer Étapes : - Modifier le type de visualiseur option viewerClass du loader - Afficher seulement la carte et les limites administratives option layers du loader - Rendre toutes les couches visibles au chargement de la page et mettre l’opacité de la couche administrative à 1.0 option layerOptions du loader - Recentrer la carte sur Marseille, au zoom 9 argument lon, lat et zoom du loader - Modifier la couleur du Panneau de Zoom et la couleur du bord du viewer Avec Firebug repérer les noms des différents composants de l’API, et modifier leurs propriétés CSS.

Personnaliser le Viewer La gestion des styles : 1- Repérer les classes de styles à modifier (Firebug) 2- Modifier les propriétés CSS dans la balise <style> gpControlNavToolbar gpToolBoxClass gpLayersClass gpSelectProjections gpLong gpLat gpControlMousePosition gpControlInformation

Ajouter des couches de données locales Objectifs : Importer des données métiers locales Manipuler des couches KML, GPX Étapes : L Le code qui suit est à ajouter au sein de la méthode init() associée à l'évènement 'onView' du loader: - Ajouter la couche KML (monumentmarseille.kml) utiliser la méthode Geoportal.Map.addLayer - Ajouter la couche GPX (cassisrando.gpx) - Modifier le style de la couche GPX ajouter le paramètre styleMap aux options de la couche GPX - Changer le comportement sur la couche GPX : quand on clique sur le parcours, une popup s'ouvre et indique la distance. option onSelect, onUnselect des options de la couche GPX

Ajouter des données provenant d’un serveur distant Objectifs : Importer des données à partir d’un serveur distant Manipuler des couches WMS, WFS Étapes : - Ajouter la couche WMS «Cours d’eau» du sandre : url : http://services.sandre.eaufrance.fr/geo/zonage-shp? couche : RWBODY - Ajouter la couche «Cours d’eau» WFS du sandre : url : http://services.sandre.eaufrance.fr/geotest/mdo_metropole? couche : 'MasseDEauRiviere' projection: 'EPSG:2154‘ NB: l’appel à une couche vectorielle provenant d’un serveur distant nécessite l’utilisation d’un proxy! (Paramètre proxyUrl du loader) L'utilisation du wfs nécessite de passer en version étendue de l'api

Ajouter des données provenant d’un serveur distant Analyse : Cross-domain & Proxy Proxy

Ajouter des outils Objectifs : Étapes : Maîtriser les outils fournis par l’API Intégrer ses propres outils Étapes : - Ajouter les outils de mesure en grâce au contrôle MeasureToolbar - Ajouter un bouton extérieur à la visualisation permettant de se recentrer sur Paris au zoom 12. ajouter une bouton html dans la page utiliser la méthode setCenter sur la Map.