1 / 11 ENSG, 7 mars 2012

Développer avec l’API Géoportail Web 2D en JavaScript

Développer avec l’API Géoportail Web 2D en JavaScript

FORMATION API GEOPORTAILFORMATION API GEOPORTAIL

2 / 11

Forum API sur developpez.com

Documentation en ligne JsDoc

Exemples

Téléchargements

Codes sources

Doc API en PDF

Documentation disponible : API.IGN.FRDocumentation disponible : API.IGN.FR

3 / 11

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++

Environnement de DéveloppementEnvironnement de Développement

4 / 11

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

Premiers pas avec l’API Géoportail JavascriptPremiers pas avec l’API Géoportail Javascript

5 / 11

Premier pas avec l’API Géoportail JavascriptPremier 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()

6 / 11

Personnaliser la cartePersonnaliser 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.

7 / 11

Personnaliser le ViewerPersonnaliser 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>

gpToolBoxClassgpLayersClass

gpControlNavToolbar

gpSelectProjections

gpControlMousePosition

gpControlInformation

gpLong gpLat

8 / 11

Ajouter des couches de données localesAjouter des couches de données locales

Objectifs :

Importer des données métiers locales

Manipuler des couches KML, GPX

Étapes :

LLe 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

9 / 11

Ajouter des données provenant d’un serveur Ajouter des données provenant d’un serveur distantdistant

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

10 / 11

Ajouter des données provenant d’un serveur Ajouter des données provenant d’un serveur distantdistant

Analyse :

Cross-domain & Proxy

Proxy

11 / 11

Ajouter des outilsAjouter des outils

Objectifs :

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.