Premiers pas avec l`API du Géoportail

Premiers pas avec l’API du Géoportail
La documentation

Site de l’api du Géoportail

Forum API sur developpez.com

Exemples utilisant l'API Géoportail

Documentation développeur :

o
Documentation API Geoportail JS
o
Documentation OpenLayers
Téléchargements :
o
Codes sources de l'API
o
Documentation de l'API en PDF
L’environnement de développement

Installer ZazouMiniWebServer en double cliquant sur
"ZMWS-20100729_mysql5.1.49.exe"

Un dossier ZMWS se crée suite à cette action

Copier le dossier TP dans le dossier "_web.zmwsc"

Démarrer le serveur en double cliquant sur "_start_all.bat"

Télécharger "Notepad++" et la dernière version de "Firefox" (10.0.2)
Affichage de la première fenêtre cartographique

Se rendre sur le site http://api.ign.fr/geoportail

Créer un compte

Créer un contrat
o
L'url à saisir dans le formulaire est : http://localhost

Copier / coller le code source généré dans le fichier "TP_intro.html"

Afficher la première page dans votre navigateur Web en tapant l’url suivante:
o
http://localhost/TP/TP_intro/TP_intro.html
Analyse du code :

<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.3/Geoportal.js"> :
script permettant de charger le code source de l'api.

window.onload : Au chargement de la page, on déclenche une fonction qui fait appel à la
méthode Geoportal.load() .Cette dernière charge le visualiseur grâce aux paramètres suivants:
▪
'viewerDiv' : identifiant de la balise qui doit contenir la carte.
▪
['1711091050407331029'] : tableau contenant la/les clé(s) du contrat API.
▪
{pos} : objet contenant la position du centre de la carte
▪
zoom : entier inclus entre 0 et 20
▪
{options}: objet contenant les options permettant de configurer le visualiseur :
◦
viewerClass :Modifie la type du visualiseur. Par défaut, c'est la classe
Geoportal.Viewer.Simple qui est utilisée. Pour afficher les outils de
navigation et le gestionnaire de couches, ajouter l'option suivante :
viewerClass : Geoportal.Viewer.Default ;
◦
layers : Tableau contenant les identifiants des couches Géoportail. Si cette
option n'est pas définie,
toutes les couches Géoportail du contrat seront
ajoutées à la carte.
Layers :["GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC",
"ADMINISTRATIVEUNITS.BOUNDARIES:WMSC"
];
◦
LayersOptions : Permet de modifier les options par défaut des couches
Géoportail ajoutées:
layersOptions :{
"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC":{opacity:0.5},
"ADMINISTRATIVEUNITS.BOUNDARIES:WMSC":{visibility:true}
};
Aller plus loin avec l'API du Géoportail :
1) Ajouter à la méthode Geoportal.Load() l’option onView
avec pour valeur le nom d'une
fonction qui sera exécutée une fois le visualiseur chargé :
onView:initMap ;
2) La méthode Geoportal.Load() retourne une instance de la classe Geoportal.InterfaceViewer :
 Déclarer au début de la balise script une variable globale iv :
var iv=null ;
 Cette variable aura pour valeur le retour de la méthode Geoportal.Load() :
iv=Geoportal.Load(....)
3) Écrire la méthode initMap() :
 Commencer par déclarer au début de la balise script une deuxième variable globale
viewer :
var viewer=null ;
 Dans la méthode initMap(), récupérer le visualiseur de la carte en utilisant la méthode
Geoportal.InterfaceViewer.getViewer() :
viewer=viewer.getMap().getViewer() ;
4) L'ajout des couches KML, GPX, WMS,... se situera dans la méthode initMap(), une fois qu'on a
récupéré le visualiseur.
Installation et prise en main de Firebug

Pour télécharger Firebug, aller dans le menu outils de Firefox, sélectionner modules
complémentaires et choisir l'onglet catalogue. Ensuite, saisir "Firebug" et cliquer sur la loupe
pour démarrer la recherche.
 Une fois ce module installé, il suffit de redémarrer Firefox.
 Une icône vient se placer en bas à droite de l'écran.
 Un simple clic sur celle-ci permet l'ouverture de Firebug dont voici un aperçu des différents
onglets qu’il faut activer :
La console:
 Liste les actions qui se déroulent sur la page au fil du temps comme les appels Ajax et les
réponses renvoyées par le serveur.
 Permet de tester les variables et les fonctions : console.log("message")
 En cas d'erreurs, ces dernières sont détaillées dedans.
L’onglet RESEAU :
 Affiche sous forme de graphiques les temps d'exécution et / ou d'insertion des éléments d'une
page.
L’onglet DOM (Document Object Model):
 Permet d’inspecter le DOM d'une page web en affichant un certain nombre d'informations sur
la page, comme la liste des données relatives à l'écran, à la fenêtre actuelle, au navigateur,...
L’onglet SCRIPT:
 Chaque script JavaScript de la page courante est visualisable dans cet onglet.
 On peut ainsi voir les scripts localisés dans la page et les scripts situés dans des fichiers
externes.
L’onglet HTML:
 Permet de visualiser le contenu de la page web affichée dans le navigateur.
 Firebug propose plusieurs manières de retrouver l'élément HTML d'une page
web,
en
partant du code HTML affiché dans la fenêtre de Firebug, ou bien en partant de l'affichage de
la page dans le navigateur.
L’onglet CSS:
 Permet la gestion du CSS à la volée.
 NB : toutes les modifications faites dans Firebug restent dans Firebug.