API Géoportail Travaux Pratiques

Transcription

API Géoportail
Travaux
Pratiques
NEIL GUION
Juillet 2012
Table des
matières
3
Configurer l'environnement de travail
I - Configurer l'environnement de travail
5
A. Installer un serveur HTTP...............................................................................5
B. Installer un environnement de développement..................................................8
C. Le navigateur web et le debugger...................................................................8
II - Afficher sa première carte avec les APIS Geoportail
11
A. Afficher une carte simple..............................................................................11
B. Description du code source...........................................................................14
C. Passer de l'API JavaScript à l'API Flash/Flex...................................................21
D. Passer de l'API JavaScript à l'API 3D.............................................................22
III - Paramétrer finement l'affichage initial
23
A. Différentes manières de définir le centre de la carte........................................23
B. Changer le type de viewer (interface graphique).............................................24
C. Modifier l'affichage des couches par défaut (visibilité, opacité, etc..)..................25
IV - Ajouter des couches de données externes (KML, GPX,
WMS, WFS)
27
A. Ajouter des données KML et GPX hébergées localement...................................27
B. Ajouter des données KML et GPX hébergées sur un serveur distant...................29
C. Ajouter des données WMS............................................................................31
D. Ajouter des données WFS............................................................................32
V - Loader
35
A. Sortir du Loader..........................................................................................35
VI - Ajouter des outils
37
A. Ajouter un bouton.......................................................................................37
B. Ajouter un outil d'impression........................................................................40
C. Outils de mesure (longueur, surface, azimuth)................................................41
D. Outils d'édition...........................................................................................43
E. Moteurs de recherche par toponyme ou adresse..............................................44
4
4
4
Configurer
l'environnement
de travail
I-
I
Installer un serveur HTTP
5
Installer un environnement de développement
8
Le navigateur web et le debugger
8
Nous avons vu dans la partie théorique de ce cours que les APIs Géoportail sont des
bibliothèques de fonctions réutilisables par un développeur pour la mise en œuvre
d'une cartographie dynamique. Nous allons donc développer et pour cela nous
aurons besoin des éléments suivants :
 Un serveur HTTP
 Un environnement de développement (ou un éditeur de texte adapté)
 Un navigateur web et un « debugger »
Seule l'installation d'un serveur HTTP est indispensable, les deux autres
rubriques sont des conseils que vous n'êtes pas obligé de suivre.
A. Installer un serveur HTTP
Comme nous l'avons vu dans la partie théorique de ce cours l'infrastructure
Géoportail utilise un système de gestion des droits d'accès basé sur des clés
d'accès. Chaque requête aux serveurs nécessite une clé d'accès qui utilise un des
modes d'authentification suivant :
 Le protocole HTTP AuthBasic qui exige la fourniture d'un login et d'un mot de
passe
 Des paramètres de provenance des requêtes tels que le nom de domaine du
serveur (referer) ou l'adresse IP de la machine à l'origine de la requête.
Dans le cadre de ce cours nous nous limitons à l'utilisation des APIs Géoportail (Flex
et JavaScript) sur un site internet et nous utiliserons donc pour nous authentifier le
referer qui sera envoyé automatiquement par le serveur HTTP à chaque requête.
D'où la nécessité d'utiliser un serveur HTTP.
Il existe de nombreux serveurs HTTP libres et gratuits, dont le plus connu est sans
doute Apache1. L'installation et la configuration d'un serveur HTTP n'étant pas
1 - http://httpd.apache.org/
5
toujours triviale et n'étant pas l'objet de ce cours nous allons utiliser un serveur
rapide à installer et portable (installable sur une clé USB).
Si vous êtes familier de l'installation et de la configuration d'un serveur HTTP, ou si
vous avez déjà installé un serveur HTTP en utilisant des solutions comme EasyPHP
ou WampServer vous pouvez les utiliser et passer cette étape. Si vous êtes sous
linux vous pouvez utiliser la solution XAMPP2 et sous Mac la solution MAMP3.
Néanmoins l'installation de ces solutions ne sera pas décrite dans la suite de ce
cours.
Méthode
Pour installer Zazou Mini Server commencez par télécharger le pack tout intégré
disponible :
 Ici dans la version utilisée pour la conception des exercices 4
Une fois téléchargé double-cliquez sur l'exécutable puis choisissez l'endroit ou vous
voulez installer votre serveur HTTP et cliquez sur « Extraire »
Image 1
L'extraction peut prendre un peu de temps, notamment aux alentours des 34%,
c'est normal. Une fois terminée vous disposez d'un dossier « ZMWS à l'endroit
spécifié avant l'extraction. Ce dossier contient l'ensemble des fichiers et dossiers de
votre serveur HTTP sous l'arborescence suivante :
Image 2
Le dossier « _web.zmwsc » est ce qu'on appelle la racine de votre serveur HTTP.
Son contenu est accessible grâce à un navigateur web, c'est donc dans ce dossier
2 - http://www.apachefriends.org/fr/xampp.html
3 - http://www.mamp.info/en/index.html
4 - http://api-geoportail.ensg.eu/zazou/
6
6
6
que nous allons travailler. Commencez par créer un dossier nommé « geoportail »
dans le dossier « _web.zmwsc ».
Revenez ensuite dans le dossier « ZMWS » et double-cliquez sur le fichier «
_start_all.bat » pour démarrer votre serveur HTTP. Une fois le serveur démarré
votre navigateur web par défaut s'ouvre sur la page suivante :
Image 3
Méthode
Le dossier « geoportail créé précédemment est référencé dans l'onglet «
Répertoires » à gauche de l'écran. Toutes les pages HTML que nous allons créer
seront placées dans le dossier « geoportail » et accessible grâce à l'URL :
http://127.0.0.1:8080/geoportail/ ou http://localhost:8080/geoportail/.
Votre serveur HTTP est désormais installé et démarré comme en témoigne
l'icône
en bas à droite de votre écran (à gauche de l'heure). Un clic droit sur
cette icône vous permet d'administrer votre serveur HTTP et notamment de le «
redémarrer » ou de le « quitter ».
Pour en terminer avec la configuration du serveur HTTP vous êtes invités à
télécharger et à copier dans le dossier « geoportail » précédemment créé les
données et fichiers utiles aux exercices disponibles ici5. Une fois téléchargée,
décompressez l'archive de manière à obtenir l'arborescence suivante « ZMWS >
_web.zmwsc > geoportail > data / img / proxy »
5 - http://api-geoportail.ensg.eu/gpp3/a_copier.zip
7
Image 4
B. Installer un environnement de développement
Pour développer en HTML et JavaScript il n'est pas forcément nécessaire de
disposer d'un environnement de développement proprement dit. En effet un éditeur
de texte suffit à développer dans ces langages.
Il en existe pléthore, dont Notepad++6, gratuit et publié sous licence libre.
Il n'y a aucune contrainte sur l'environnement de développement et vous êtes donc
libre de choisir celui qui vous convient le mieux des plus complets comme Eclipse
aux plus rustres comme Wordpad.
C. Le navigateur web et le debugger
Pour tester les résultats de vos développements et les débugger vous aurez besoin
d'un navigateur web. Encore une fois la liste des navigateurs web est longue :
Internet Explorer, Firefox, Chrome, Safari, Opéra, etc..
Méthode
Afin de faciliter le debuggage de vos développements il est suggéré d'utiliser
Firefox7 avec le plugin Firebug8. Pour ce faire installez Firefox, ouvrez le et entrez
l'URL : https://addons.mozilla.org/fr/firefox/addon/firebug/ puis cliquez sur «
Ajouter à Firefox », le module s'installe et redémarre Firefox.
6 - http://notepad-plus-plus.org/fr/
7 - http://www.mozilla.org/fr/firefox/fx/
8 - https://addons.mozilla.org/fr/firefox/addon/firebug/
8
8
8
Pour ouvrir Firebug sur n'importe quelle page web appuyez sur la touche F12, idem
pour le refermer. Firebug se présente sous la forme d'une fenêtre habituellement
en bas de page :
Image 5
Vérifiez que l'onglet « console » est activé comme illustré sur l'image ci-dessus.
Lorsque Firebug est ouvert et que vous chargez une page web toutes les erreurs
détectées sont remontées dans l'onglet « console » ce qui vous permet d'identifier
plus ou moins finement l'origine des erreurs.
L'utilisation de Firefox et de Firebug ne sont aucunement une obligation, vous
pouvez utiliser le navigateur de votre choix avec ou sans debugger mais l'utilisation
d'un debugger peut s'avérer très utile dans certains cas. Pour apprendre à utiliser
finement
Firebug
vous
pouvez
consulter
cette
page
:
http://getfirebug.com/wiki/index.php/FAQ.
Remarque
Notons que le navigateur Chrome propose un debugger par défaut que vous pouvez
actionner en appuyant sur la touche F12.
9
Afficher sa
première carte
avec les APIS
Geoportail
II -
II
Afficher une carte simple
11
Description du code source
14
Passer de l'API JavaScript à l'API Flash/Flex
21
Passer de l'API JavaScript à l'API 3D
22
11
Afficher sa première carte avec les
Afficher
APIS Geoportail
sa première carte avec les APIS Geoportail
A. Afficher une carte simple
Pour utiliser les APIs du Géoportail vous devez posséder une clé d'utilisation. Cette
clé d'utilisation est nécessaire pour être reconnu comme « ayant-droit » par le
système de gestion des droits d'accès de l'infrastructure Géoportail. Pour obtenir
une clé d'utilisation, rendez vous sur le site http://api.ign.fr/ dans la rubrique créer
un compte9 :
Image 6
Méthode
Dans le mail qui vous est envoyé cliquez sur le lien « Activer » puis connectez
vous sur http://api.ign.fr/moncompte/login
Connectez-vous ensuite sur la page de gestion de vos contrats :
http://api.ign.fr/moncompte/contract et cliquez sur « Ajouter un contrat »
Image 7
9 - http://api.ign.fr/moncompte/creer
12
12
12
Afficher sa première carte avec les APIS Geoportail
Remplissez les champs comme indiqué ci-dessus, n'oubliez pas de choisir « Web »
dans la rubrique « Type de clé » et de cocher toutes les couches dans « Choisir les
ressources du contrat » puis de prendre connaissance des « conditions générales
d'utilisation » avant de cliquer sur « envoyer ».
Dans le détail de votre contrat qui s'affiche copier le code source qui s'affiche en
bas de page en prenant soin de le copier dans son intégralité.
Enfin ouvrez votre éditeur de texte, par exemple Notepad++, collez y le code que
vous
venez
de
copier
et
enregistrez
le
fichier
sous
«
ZMWS/geoportail/carte1.html ».
Vérifiez que votre serveur HTTP est bien démarré (sinon double cliquez sur le fichier
«
ZMWS/_start_all.bat
»)
et
entrez
l'url
:
http://localhost:8080/geoportail/carte1.html.
Remarque
Si tout s'est bien passé vous devriez voire apparaître votre première carte comme
c'est le cas ici :
http://api-geoportail.ensg.eu/gpp3/carte1.html.
B. Description du code source
Pour partir sur de bonnes bases il est primordial de comprendre le code source
utilisé pour l'affichage de cette première carte, notamment les éléments clés.
Méthode
Pour ce faire commencez par ouvrir le fichier carte1.html dans un éditeur de texte
(Notepad++).
Méthode
: Définir l'emplacement de la carte
Repérez la ligne de code suivante :
<div id="viewerDiv"></div>
Cette ligne permet de définir l'emplacement dans lequel la carte sera insérée.
L'attribut « id » dont la valeur est ici « viewerDiv » permet à l'API Géoportail
d'identifier cet emplacement comme nous le verrons ci-dessous.
Il est impératif de définir une largeur (width) et une hauteur (height) pour cet
emplacement afin qu'il soit visible ce qui est fait à l'aide du code suivant :
<style type="text/css"><![CDATA[/*></style>
13
Afficher
APIS Geoportail
Méthode
: Charger l'API Géoportail
Repérez la ligne de code suivante :
<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/js/latest/Geoportal.j
s"></script>
Cette ligne permet le chargement de l'API Géoportail JavaScript. Remarquez qu'elle
contient le numéro de version, ici « latest » (qui permet d'appeler
systématiquement la dernière version de l'API Géoportail).
Remarque
Notez également qu'ici le fichier chargé est "Geoportal.js" qui correspond au niveau
standard du code source. Vous pouvez remplacer ce fichier par :
 « GeoportalMin.js » pour la version minimale
 « GeoportalExtended.js » pour obtenir la version étendue
 « GeoportalFlash.js » pour la version Flash/Flex
 « GeoportalMobile.js » pour la version mobile
Méthode
: Charger la carte avec l'API Géoportail
Repérez les lignes de code suivantes :
<script type="text/javascript"><![CDATA[//><!-var iv= null;
window.onload= function() {
iv= Geoportal.load(
// identifiant de la div qui accueille la carte:
'viewerDiv',
// la ou les clés API Géoportail :
['8rkcsx679oyaqru90ito8znk'], //clé dev
{// le centre de la carte :
// longitude:
lon:2.731525,
// latitude:
lat:45.833333
},
//Niveau de zoom
null,
{ //options
type :'js'
}
);
};
//--><!]]></script>
On utilise l'évènement JavaScript « window.onload » qui nous permet de
déclencher le chargement de la carte dès que celui de la page HTML dans son
ensemble est terminé.
14
14
14
Afficher sa première carte avec les APIS Geoportail
La fonction « Geoportal.load10 » permet de charger la carte en utilisant les variables
suivantes :
Nous verrons par la suite que les variables « pos » et « options » permettent de
paramétrer la carte de manière assez fine.
C. Passer de l'API JavaScript à l'API Flash/Flex
La fonction « Geoportal.load » est la fonction fondamentale de l'API Géoportail,
elle permet notamment d'accéder aux APIs JavaScript, Flex, 3D en utilisant un code
similaire. C'est pourquoi elle peut être considérée comme une API haut niveau,
c'est-à-dire englobant les différentes APIs précitées.
Même si l'utilisation exclusive de cette API « haut niveau » est limitée pour des
usages poussés elle permet de répondre à la plupart des usages basiques des APIs
du Géoportail.
Ainsi, si vous souhaitez utiliser l'API Flash/Flex plutôt que JavaScript en passant par
l'API « haut niveau » il vous suffit de :
Remplacer le script de chargement de l'API comme suit :
src="http://api.ign.fr/geoportail/api/js/latest/GeoportalFl
ash.js"></script>
Et d'ajouter le paramètre type:
Geoportal.load comme suit :
'flex'
dans
les
options
de
la
fonction
iv= Geoportal.load(
'viewerDiv',
10 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Loader-js.html#Geoportal.Loader.Geoportal.load
15
Afficher
APIS Geoportail
// longitude:
lon:2.731525,
// latitude:
lat:45.833333
},null,{type:'flex'}
);
};
//--><!]]></script>
Enfin pour voir s'afficher l'API Flash/Flex vous devrez télécharger et décompresser
le fichier Geoportal.Viewer.Simple.swf dans le même répertoire que votre fichier
"carte1.html". Ce fichier est téléchargeable sur le site de l'API Geoportail11 ou ici12.
Le résultat de cette opération est visible ici, sous réserve d'avoir le plugin Flash
installé sur votre machine :
http://api-geoportail.ensg.eu/gpp3/carte1_flex.html
D. Passer de l'API JavaScript à l'API 3D
Si vous souhaitez utiliser l'API 3D plutôt que JavaScript en passant par l'API "haut
niveau" il vous suffit de :
Remplacer le script de chargement de l'API comme suit :
src="http://api.ign.fr/geoportail/api/js/latest/Geoportal3D
.js"></script>
Et d'ajouter le paramètre type:'3d' dans les options de la fonction Geoportal.load
comme suit :
iv= Geoportal.load(
'viewerDiv',
// longitude:
lon:2.731525,
// latitude:
lat:45.833333
},null,{type:'3d'}
);
};
//--><!]]></script>
Le résultat de cette opération est visible ici, sous réserve d'avoir le plugin
VirtualGeoGP installé sur votre machine :
http://api-geoportail.ensg.eu/gpp3/carte1_3D.html
11 - http://api.ign.fr/tech-docs-js/fr/developpeur/download.html
12 - http://api-geoportail.ensg.eu/gpp3/telechargement/
16
16
16
Paramétrer
finement
l'affichage initial
III -
III
Différentes manières de définir le centre de la carte
23
Changer le type de viewer (interface graphique)
24
Modifier l'affichage des couches par défaut (visibilité, opacité,
etc..)
25
Nous savons désormais afficher une carte basique grâce à la fonction «
Géoportal.load (div, key, pos, zoom, options) ». Cette fonction offre de multiple
possibilité de paramétrage que nous allons détailler dans la suite de ce chapitre. Au
menu donc :
 Différentes manières de définir le centre de la carte
 Changer le type de viewer pour une interface graphique plus ou moins riche
 Modifier l'affichage des couches géoportail par défaut (visibilité, opacité,
etc..).
A. Différentes manières de définir le centre de la
carte
Nous avons vu dans le chapitre précédent que la fonction « Geoportal.load13 »
permet de définir le centre de la carte grâce à la variable « pos » de type « Object
». Dans le premier exemple nous avons défini le centre de la carte par sa longitude
et sa latitude en coordonnées géographiques en affectant à la variable « pos » la
valeur suivante :
{ lon:2.731525, lat:45.833333 }
Vous pouvez définir le centre de la carte en utilisant d'autres paramètres. Pour
utiliser un lieu-dit (Paris, par exemple) vous affecterez la valeur suivante à la
variable
« pos » :
{ place : 'Paris' }
13 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Loader-js.html#Geoportal.Loader.Geoportal.load
17
Paramétrer finement l'affichage initial
Dans ce cas l'API Géoportail utilise automatiquement le service OpenLS de
positionnement aux lieux-dits de l'infrastructure Géoportail pour positionner le
centre de la carte.
Pour utiliser une adresse, l'adresse de l'IGN par exemple, vous affecterez la valeur
suivante à la variable « pos » :
{ address : '73 Avenue de Paris, 94160, Saint-Mandé' }
Le format de l'adresse utilisé doit être de la forme : « numéro rue, code postal,
commune ».
Enfin vous pouvez tenter d'utiliser la position de l'utilisateur grâce à la Geolocation
API14 implémentée dans certains navigateurs web. Cette API demandera à
l'utilisateur si il accepte de partager sa position, auquel cas elle utilisera différentes
méthodes (adresse IP, antenne mobile, GPS, etc.) pour le localiser. Pour ce faire
vous affecterez la valeur suivante à la variable « pos » :
{ geolocate : true }
Vous trouverez ci-dessous un exemple d'implémentation de chacune de ces
méthodes :
Exemple



Positionnement au lieu-dit15
Positionnement à l'adresse16
Positionnement suivant l'emplacement de l'utilisateur final 17
B. Changer le type de viewer (interface graphique)
Nous avons vu dans la partie théorique de ce cours qu'il existe plusieurs type de «
viewer » (Simple, Default, Standard). Jusqu'à maintenant nous utilisons le viewer «
Simple » qui n'affiche aucun contrôle en superposition de la carte. Pour disposer
d'une interface graphique plus riche (bouton de déplacement, de zoom,
gestionnaire de couches) il faut utiliser un des autres viewer.
Pour ce faire nous allons ajouter à la variable « options » de la fonction «
Geoportal.loader » le paramètre « viewerClass ».
Pour utiliser le viewer « Default » vous affecterez à la variable « options » la valeur
suivante :
{
type:'js',
viewerClass : Geoportal.Viewer.Default
}
Pour utiliser les autres viewer vous changerez simplement la valeur de l'attribut
viewerClass en :
 Geoportal.Viewer.Standard
 Geoportal.Viewer.Mobile
Le viewer de type « Mobile » prend en charge le déplacement au doigt et le zoom
14
15
16
17
-
http://dev.w3.org/geo/api/spec-source.html
http://api-geoportail.ensg.eu/gpp3/positionnement_lieudit.html
http://api-geoportail.ensg.eu/gpp3/positionnement_adresse.html
http://api-geoportail.ensg.eu/gpp3/positionnement_geolocate.html
18
18
18
multipoint des écrans tactiles.
Vous trouverez ci-dessous un exemple d'implémentation de chacun des viewer :
Exemple
Default18
 Standard19
 Mobile20
Dans la suite des exemples le viewer « Default » sera utilisé systématiquement
dans les exemples de corrections.

C. Modifier l'affichage des couches par défaut
(visibilité, opacité, etc..)
Jusqu'à maintenant l'API Géoportail affiche les couches de données définies par
défaut avec une opacité de 100%. Il est plus que probable que vous ayez besoin de
modifier l'affichage par défaut en choisissant les couches de données que vous
voulez voir apparaître parmi celles définies dans votre contrat d'utilisation.
Pour ce faire nous allons ajouter un attribut « layers » dans la variable « options »
de la fonction « Geoportal.load ». La valeur de l'attribut « layers » est un tableau
(Array) contenant le nom des couches à charger sous forme de chaîne de caractère
(String) comme illustré ci-dessous :
{ // options
layers
:
['ORTHOIMAGERY.ORTHOPHOTOS',
'GEOGRAPHICALGRIDSYSTEMS.MAPS'],
viewerClass : Geoportal.Viewer.Default,
}
La couche « parcelles cadastrales » qui était chargée par défaut ne l'est plus. Il est
également possible d'ajouter des couches qui n'étaient pas présente par défaut. Les
noms des couches disponibles dans l'API Géoportail sont listés ici :
http://api.ign.fr/tech-docs-js/fr/webmaster/layers.html.
Nous avons vu comment choisir les couches que l'on veut charger, il nous reste à
voir comment changer la visibilité et l'opacité par défaut. Pour ce faire nous allons
ajouter un attribut « layersOptions » à la variable « options » de la fonction «
Geoportal.load ». La valeur de l'attribut « layersOptions » est un objet JavaScript
(Object) un peu complexe dont les attributs ont eux même pour valeur des objets
JavaScript. Le plus simple est donc d'illustrer la définition de « layersOptions »
Exemple
{ // options
layers : ['ORTHOIMAGERY.ORTHOPHOTOS', 'GEOGRAPHICALGRIDSYSTEMS.MAPS'],
layersOptions : { 'GEOGRAPHICALGRIDSYSTEMS.MAPS': {visibility:false,
opacity:0.5} },
}
Dans l'exemple ci-dessus on définit la visibilité de la couche « Cartes IGN » à «
18 - http://api-geoportail.ensg.eu/gpp3/viewer_default.html
19 - http://api-geoportail.ensg.eu/gpp3/viewer_standard.html
20 - http://api-geoportail.ensg.eu/gpp3/viewer_mobile.html
19
false » ce qui signifie que la couche sera chargée mais pas visible par défaut. Ainsi
dans le gestionnaire de couche la checkbox est décochée par défaut, l'utilisateur
final est libre de la cocher quand bon lui semble. On définit également son opacité
par un chiffre compris entre 0 (totalement transparent) et 1 (totalement opaque).
Signalons que l'on peut définir les options de plusieurs couches en même temps en
utilisant l'attribut « global » comme suit :
{ // options
layers : ['ORTHOIMAGERY.ORTHOPHOTOS', 'GEOGRAPHICALGRIDSYSTEMS.MAPS'],
layersOptions : { 'GEOGRAPHICALGRIDSYSTEMS.MAPS': {visibility:false,
opacity:0.5} , global : { opacity:0.8 } },
}
Ainsi toutes les couches pour lesquelles nous n'aurons pas défini de propriété
spécifique se comporteront comme indiqué dans l'attribut « global »
Exemple
Vous trouverez ici21 un exemple illustrant l'ensemble de ce paragraphe.
21 - http://api-geoportail.ensg.eu/gpp3/couches_gp_perso.html
20
20
20
Ajouter des
couches de
données externes
(KML, GPX, WMS,
WFS)
IV -
IV
Ajouter des données KML et GPX hébergées localement
27
Ajouter des données KML et GPX hébergées sur un serveur
distant
29
Ajouter des données WMS
31
Ajouter des données WFS
32
Vous êtes maintenant familier de l'ajout et du paramétrage de couches de données
en provenance de l'infrastructure Géoportail. L'API Géoportail vous permet
également d'ajouter d'autres données tels que des fichiers KML ou GPX mais aussi
des données de services web WMS, WFS, WMTS ou GEORSS.
Pour ce faire nous allons continuer d'explorer le potentiel de la fonction «
Geoportail.load » en distinguant le cas des données stockées dans des fichiers du
cas des données provenant de services.
A. Ajouter des données KML et GPX hébergées
localement
Pour commencer nous allons ajouter un fichier KML et un fichier GPX hébergés sur
le même serveur HTTP que nos pages HTML.
Pour l'exemple vous pouvez utiliser les fichiers « velib.kml » et « rando.gpx » que
vous avez téléchargé précédemment et placé dans « ZMWS/geoportail/data/ ». Si
par hasard vous n'avez pas ces fichiers vous pouvez les télécharger maintenant et
les placer dans le répertoire adéquat :
 Fichier KML22
22 - http://api-geoportail.ensg.eu/gpp3/data/velib.kml
21
Ajouter des couches
Ajouter
de données
des couches
externes
de données
(KML, GPX,
externes
WMS, (KML,
WFS) GPX, WMS, WFS)
Fichier GPX23
Pour ajouter une couche KML ou GPX à votre carte vous utiliserez l'attribut «
overlays » de la variable « options » de la fonction « Geoportal.load(div, key, pos,
zoom, options) » comme illustré ci-dessous :

{ // options
overlays:{
'kml':[{name:'mon_kml', url:'./data/velib.kml', options:
{params:{opacity:0.5}, options:{}}}],
'gpx':[{name:'mon_gpx', url:'./data/rando.gpx', options:
{params:{visibility:false}}}]
}
L'attribut « name » correspond au nom de la couche dans le gestionnaire de couche
et l'attribut « url » au chemin d'accès vers le fichier à charger (KML ou GPX).
Cette syntaxe permet de paramétrer finement le comportement des couches de
données externes notamment grâce à l'attribut « options{params:{}, options{}}
». Vous trouverez dans la documentation de l'API Géoportail les attributs que vous
pouvez définir :
 Pour « params » qui définit les paramètres de couches24
 Pour « options » qui définit les paramètres de popup et des objets
vectoriels25
Exemple
Vous trouverez ici26 un exemple d'import de couche KML et GPX.
Pour illustrer l'utilisation des paramètres de couches de couches "params" nous
allons utiliser l'attribut "styleMap" de la classe OpenLayers.StyleMap27 qui va nous
permettre de modifier le style d'affichage de nos couches externes. Une liste, non
exhaustive, des attributs de style disponibles est faite au bas de cette page28.
Ainsi nous pouvons définir notre StyleMap comme suit :
var mon_style = new OpenLayers.StyleMap(
{
pointRadius : 8, // rayon des objets ponctuels
fillColor:'pink', // couleur de rempissage
fillOpacity:0.5, // Opacité
strokeWidth:0.5 // Largeur du bord
}
);
Remarque
Notons que l'on peut différencier dans l'objet StyleMap le style par défaut (default),
le style des objets sélectionnés (select) ainsi que le style des objets en cours de
saisie ou de modification (temporary).
23
24
25
26
27
28
-
http://api-geoportail.ensg.eu/gpp3/data/rando.gpx
http://api.ign.fr/tech-docs-js/fr/webmaster/js/vector_layers.html
http://api.ign.fr/tech-docs-js/fr/webmaster/js/add_layers.html
http://api-geoportail.ensg.eu/gpp3/kml_gpx_local.html
http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/StyleMap-js.html
http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/Feature/Vector-js.html
22
22
22
Ajouter des couches de données externes (KML, GPX, WMS, WFS)
Exemple
Un exemple de StyleMap différenciant est donné ci-dessous :
var mon_style = new OpenLayers.StyleMap(
{
'default' : new OpenLayers.Style(
{
pointRadius : 8,
fillColor:'pink'
}),
'select' : new OpenLayers.Style(
{
pointRadius : 10,
fillColor:'yellow'
})
});
Ainsi les objets apparaîtront par défaut en rose et en jaune lorsqu'ils seront
sélectionnés.
Pour que ce style soit appliqué, à notre couche KML par exemple, il faut indiquer
lors du chargement de cette couche :
 Que le StyleMap de la couche est « mon style » ( params:
{styleMap:mon_style} )

Que les styles définis dans le fichier KML ne doivent pas être extraits (
options:{formatOptions:{extractStyles :false}} )
Ce qui nous donne le code suivant pour l'import de la couche KML :
overlays:{
'kml':[
{
name:'mon_kml',
url:'./data/velib.kml',
options:
{
params:{opacity:0.5, styleMap:mon_style},
options:{formatOptions:{extractStyles:false}}
}
}
]
}
Exemple
Vous trouverez ici29 un exemple illustrant l'ensemble de ce paragraphe.
29 - http://api-geoportail.ensg.eu/gpp3/kml_gpx_local_style.html
23
Ajouter des couches
Ajouter
de données
des couches
externes
de données
(KML, GPX,
externes
WMS, (KML,
WFS) GPX, WMS, WFS)
B. Ajouter des données KML et GPX hébergées sur
un serveur distant
Pour des raisons de sécurité le langage JavaScript tout comme le langage
Flash/Flex (sauf autorisation particulière) n'autorisent pas les requêtes XML sur des
serveurs distants. Les APIs Géoportail ne peuvent donc pas directement accéder à
des fichiers KML, GPX ou encore à des serveurs WFS directement dans leur langage
propre.
Plusieurs méthodes permettent néanmoins de palier cette limite connue sous le
nom de "cross-domain". Parmi elles, la plus sécurisée consiste à utiliser un service
mandataire aussi appelé "proxy". Partant du principe que certains langages de
programmation (PHP, le JSP, l'ASP et d'autres) parce qu'ils sont exécutés du côté
du serveur HTTP (contrairement au JavaScript qui est interprété côté client)
peuvent effectuer des requêtes sur des serveurs distants, l'idée est d'utiliser ces
langages pour effectuer les requêtes distantes et de récupérer le résultat ensuite en
JavaScript.
Ce processus peut être schématisé comme suit :
Image 8
Ainsi il suffit de disposer d'un proxy écrit dans un langage qui autorise les requêtes
distantes, PHP par exemple, d'envoyer nos requêtes JavaScript vers ce proxy qui
les transmet au serveur distant puis récupère le résultat et le transmet à notre
client JavaScript.
La compréhension de ce mécanisme n'est pas forcément évidente au premier abord
mais son implémentation dans le cadre des APIs Géoportail est relativement simple
comme nous allons le voir ci-dessous.
Normalement vous avez déjà récupéré le fichier "proxy.php" lors du premier
téléchargement effectué, ce dernier doit se trouver dans le dossier
"ZMWS/geoportail/proxy". Si ce n'est pas le cas vous pouvez le télécharger ici30 et
le décompresser dans le dossier idoine.
30 - http://api-geoportail.ensg.eu/gpp3/telechargement/proxy.php.zip
24
24
24
Pour charger la couche « velib.kml » directement depuis le serveur distant (http://
www.parisavelo.net/velib.kml) nous utiliserons le code suivant dans les « options »
de la fonction « Geoportal.load » :
{
proxyUrl:'./proxy/proxy.php?url=',
overlays:
{
'kml':[{name:'mon_KML_distant',
url:'http://www.parisavelo.net/velib.kml'}]
}
}
Remarque
Notons que l'attribut « proxyUrl » prend en valeur le chemin d'accès au fichier «
proxy.php » auquel s'ajoute « ?url= » car l'url de la requête sera passée en
paramètre de la requête faite au proxy.
Enfin si votre connexion internet est directe le code ci-dessus devrait marcher sans
que vous n'ayez à vous préoccuper du contenu du fichier « proxy.php ». Si en
revanche votre connexion à internet passe elle-même par un proxy vous devrez
renseigner l'url de votre proxy ainsi que son port aux lignes 20 et 21 du fichier
« proxy.php » comme suit (exemple pour l'IGN) :
// via un proxy d'entreprise/IP
$proxy_host= '10.0.4.2';
$proxy_port= 3128;
Exemple
Vous trouverez ici31 un exemple fonctionnel d'utilisation du proxy pour charger le
fichier distant « velib.kml ».
C. Ajouter des données WMS
Pour ajouter une couche en provenance d'un serveur WMS à votre carte vous
utiliserez l'attribut « overlays » de la variable « options » de la fonction
« Geoportal.load(div, key, pos, zoom, options) ». Nous allons importer la
carte géologique 1/50 000e (SCAN_D_GEOL50) scannée en provenance des
services web du BRGM (http://geoservices.brgm.fr/geologie) comme illustré cidessous :
overlays:{
'wms':[
{
name:'carte_geol',
url:'http://geoservices.brgm.fr/geologie',
options:
{
params:{ layers:'SCAN_D_GEOL50', transparent:true},
31 - http://api-geoportail.ensg.eu/gpp3/kml_distant.html
25
Ajouter des couches
Ajouter
de données
des couches
externes
de données
(KML, GPX,
externes
WMS, (KML,
WFS) GPX, WMS, WFS)
options:{ opacity:0.8, visibility:true,
projection:'EPSG:4326'}
}
}
]}
La syntaxe ressemble beaucoup à celle utilisée précédemment pour importer des
fichiers KML ou GPX cependant vous remarquerez que les réglages de couches
(opacité, visibilité, etc.) se trouve dans l'attribut « options » de la variable « options
» tandis que l'attribut « params » contient les paramètres de la requête au serveur
WMS (layers, transparent, etc.).
L'attribut « layers » permet de définir les noms des couches que l'on veut récupérer
depuis le serveur WMS séparés par des virgules.
L'attribut « transparent » permet de rendre les bords de l'image (blanc)
transparent.
L'attribut « projection » est obligatoire pour permettre à l'API de positionner l'image
en superposition des autres couches. EPSG:4326 correspond à la projection plate
carrée CRS84 des coordonnées géographiques.
Rappel
Rappelons que seule les données projetées en plate carrée ou en Web Maercator
sont superposables aux données WMTS fournies par l'infrastructure Géoportail.
Remarque
Enfin notez que l'ajout de couche WMS ne pose pas de problèmes « cross-domain »
en raison de la nature des données transférées qui sont des images. La déclaration
d'un proxy n'est donc pas nécessaire pour l'ajout de données en provenance d'un
service WMS.
Exemple
Vous trouverez ici32 un exemple d'ajout de couche WMS.
D. Ajouter des données WFS
Pour ajouter une couche en provenance d'un service WFS à votre carte vous
utiliserez l'attribut « overlays » de la variable « options » de la fonction
« Geoportal.load(div, key, pos, zoom, options) ». Nous allons importer la
couche « Hydroécorégion » en provenance des services web du Sandre
(http://services.sandre.eaufrance.fr/geo/mdo_FXX).
Remarque
Signalons au préalable que la fonction d'import de flux WFS n'est disponible que
dans la version étendue de l'API Géoportail que vous chargerez donc comme suit :
src="http://api.ign.fr/geoportail/api/js/latest/GeoportalEx
tended.js"></script>
De plus le flux WFS étant encodé en GML nous aurons besoin de définir un proxy de
32 - http://api-geoportail.ensg.eu/gpp3/wms.html
26
26
26
la même manière que nous l'avons fait pour l'import d'un fichier KML distant.
L'import du flux WFS proprement dit utilise le code source ci-dessous :
{ // options
overlays:{
'wfs':[
{
name:'Hydroécorégion',
url:'http://services.sandre.eaufrance.fr/geotest/mdo_metrop
ole',
options:
{
params:{typename: 'Hydroecoregion1'},
options:{
projection:'EPSG:2154',
opacity:0.8, visibility:true,
protocolOptions:
{
featurePrefix:'sa',
featureNS:'http://xml.sandre.eaufrance.fr/',
geometryName:'msGeometry'
},
}
}
}
] }
Remarque
Notons que la procédure est similaire à l'import d'une couche en provenance d'un
service WMS. Toutefois l'attribut « layers » a ici été remplacé par l'attribut
« typename ».
Les paramètres de l'attribut "protocolOptions" sont disponibles dans les capacités
sur
serveur :
http://services.sandre.eaufrance.fr/geo/mdo_FXX?
SERVICE=WFS&REQUEST=GetCapabilities
Exemple
Vous trouverez ici33 un exemple fonctionnel d'import du flux WFS ci-dessus.
33 - http://api-geoportail.ensg.eu/gpp3/wfs.html
27
V-
Loader
V
Sortir du Loader
35
A. Sortir du Loader
Jusqu'à maintenant nous avons utilisé de façon quasi exclusive la fonction «
Geoportal.load » aussi appelé « loader » ou « API haut niveau » car elle
permet de paramétrer aussi bien l'API JavaScript que l'API Flex/Flash ou l'API 3D.
Si cette fonction permet de traiter la plupart des cas basiques, tels que le
recentrage de la carte, l'ajout de couche en provenance de l'infrastructure
Géoportail ou d'autres serveurs, en revanche les cas d'utilisation avancés
nécessitent l'appel à d'autres fonctions des APIs Géoportail. Le cas de chaque API
devra donc être traité séparément et on se limitera dans la suite de ce cours au cas
de l'API JavaScript vous renvoyant aux tutoriels Flash34 du site http://api.ign.fr pour
l'API Flex/Flash.
Tout ce que nous avons vu précédemment avec la fonction « Geoportal.load »
reste d'actualités mais nous allons implémenter des fonctionnalités plus avancées
grâce à l'appel d'un « callback » en sortie du « loader ». Pour ce faire nous
ajouterons un attribut « onView » à la variable « options » de la fonction
« Geoportal.load(div, key, pos, zoom, options) » dont la valeur est le nom
de la fonction qui sera exécutée automatiquement en sortie du « loader ».
Exemple
Ci-dessous un exemple d'implémentation :
var iv=null;
window.onload = function()
{
iv = Geoportal.load(
'viewerDiv', // L'identifiant de la <div> qui accueillera la carte
(div)
['8rkcsx679oyaqru90ito8znk'], //clée dev
//['zfqvl3w4zlmx6jkb03wknk7s'], // http://api-geoportail.ensg.eu
{// positionnement du centre de la carte (pos)
lon:2.731525,
lat:45.833333
},
34 - http://api.ign.fr/tutoriel-flash
29
Loader
Loader
null, // zoom
{ // options
language:'fr',
onView:after_loading
}
);
};
function after_loading ()
{
alert ('chargement terminé');
}
Dans cet exemple dès que le « viewer » est chargé la fonction « after_loading »
est déclenchée et affiche « chargement terminé » dans une boîte de dialogue.
Nous allons utiliser cette fonction « after_loading » pour traiter des cas
d'utilisation avancés dans la suite de ce cours. Jusqu'à maintenant nous avons
ignoré la première ligne du code source « var iv=null » qui nous permet
simplement de définir « iv » comme étant une variable global, c'est-à-dire
réutilisable dans toute les fonctions de notre code. Elle prend ici une grande
importance puisque nous serons désormais capables de faire appel à notre variable
« iv » dans la fonction
« after_loading ».
Exemple
Vous trouverez ici35 un exemple d'implémentation de ce code source.
35 - http://api-geoportail.ensg.eu/gpp3/sortie_loader.html
30
30
30
VI -
Ajouter des outils
VI
Ajouter un bouton
37
Ajouter un outil d'impression
40
Outils de mesure (longueur, surface, azimuth)
41
Outils d'édition
43
Moteurs de recherche par toponyme ou adresse
44
L'API Géoportail dispose d'un certain nombre d'outils prédéfinis dont les outils
suivants :
 Outil d'impression
 Catalogue de couches Géoportail
 Outils de mesure (longueur, surface azimuth)
 Outils de croquis
 Moteurs de recherche par toponyme ou adresse
La première chose à savoir est que dans l'API Géoportail JavaScript les outils sont
des « Control ». Pour le reste nous allons apprendre à configurer chacun de ces
outils dans les prochains chapitres.
A. Ajouter un bouton
Pour commencer en douceur nous allons ajouter un simple bouton dont l'action
importe peu pour l'instant.
Ce contrôle n'étant pas spécifique de l'API Géoportail nous nous référons
directement
à
la
documentation
d'OpenLayers
sur
la
classe
OpenLayers.Control.Button36. Cette documentation nous apprend notamment qu'un
contrôle
de
type
bouton
s'insère
dans
un
contrôle
de
type
OpenLayers.Control.Panel37.
Nous pouvons donc insérer un contrôle de type bouton grâce au code suivant :
{
//récupération du viewer et de la carte
var viewer = iv.getViewer();
var map = viewer.getMap();
36 - http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/Control/Button-js.html
37 - http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/Control/Panel-js.html
31
Ajouter des outils
Ajouter des outils
// Création d'un control de type panel
var panel = new OpenLayers.Control.Panel({displayClass:
"MyPanel"});
// Création d'un control de type button
var button = new OpenLayers.Control.Button({displayClass:
"MyButton", trigger: myFunction});
//ajout du button au panel
panel.addControls([button]);
// ajout du panel à la carte
map.addControl(panel);
}
function myFunction ()
{
alert('Mon bouton a été activé');
}
Dans ce code nous avons de nouveau fait appel à la fonction « after_loading » en
sortie du viewer comme nous le ferons de manière systématique maintenant. Nous
avons également utilisé les fonctions « getViewer » et « getMap » pour accéder à
l'instanciation de notre Viewer et de notre Map.
La méthode « Map.addControl » permet d'ajouter un contrôle sur la carte tout
comme la méthode « Panel.addControls » permet d'ajouter des contrôles à un
panneau.
Nous avons ensuite créée un bouton qui déclenche la fonction « myFunction »
lorsqu'il est cliqué. Au niveau de l'affichage, notre bouton est un élément DOM
(Document Object Model) dont l'attribut « class » a la valeur « MyButtonItemActive
» au moment où il est cliqué et « MyButtonItemInactive » sinon. De même le
Panneau (panel) est représenté par un élément DOM dont l'attribut « class » porte
la valeur « MyPanel ». Nous pouvons donc configurer les styles de ces éléments en
CSS entre les balises <style> </style> de notre page comme suit :
<style type="text/css"><![CDATA[/*></style>
32
32
32
Ajouter des outils
Exemple
Vous trouverez un exemple d'ajout de bouton ici38.
B. Ajouter un outil d'impression
L'outil d'impression est un des plus simples à configurer comme en témoigne la
documentation Geoportal.Control.PrintMap39. En repartant de l'exemple précédent il
suffit de remplacer le contrôle de type bouton par celui d'impression comme suit :
{
// Création d'un control de type panel
var panel = new OpenLayers.Control.Panel({displayClass:
"MyPanel"});
// Création d'un control de type button
var print_control = new Geoportal.Control.PrintMap();
//ajout du control au panel
panel.addControls([print_control]);
// ajout du panel à la carte
}
Vous pouvez également ajouter ce contrôle avec le viewer de type « Default » ou
un autre. Pour cela il faut récupérer le contrôle de type « Panel » dans lequel vous
souhaitez
ajouter
le
bouton
d'impression
grâce
à
la
méthode
«
Map.GetControlsByClass » comme illustré ci-dessous :
{
// récupération du contrôle de type "NavToolbar" qui est un
"Panel"
var nv =
map.getControlsByClass('Geoportal.Control.NavToolbar')[0];
// Ajout d'un control de type "PrintMap"
nv.addControls([new Geoportal.Control.PrintMap()]);
}
38 - http://api-geoportail.ensg.eu/gpp3/control_button.html
39 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Control/PrintMap-js.html
33
Ajouter des outils
Ajouter des outils
Exemple
Vous trouverez un exemple d'illustration des deux cas de figure ci-dessus :
 Ici pour le Viewer Simple40
 Ici avec le viewer Default41
C. Outils de mesure (longueur, surface, azimuth)
L'API Géoportail permet d'ajouter plusieurs outils de mesure :
 Mesure de distance et de surface : OpenLayers.Control.Measure42
 Mesure d'azimuth : Geoportal.Measure.Azimuth43
Nous n'allons pas détailler les procédures d'ajout de chacun de ces outils d'une part
parce qu'elles sont très similaires à celles vues précédemment et d'autre part parce
que l'API Géoportail permet de les ajouter toutes en même temps. Le code suivant
en est une illustration avec le Viewer de type « Default » :
// récupération du contrôle "ToolBox"
var tbx=
map.getControlsByClass('Geoportal.Control.ToolBox')[0];
// Ajout du "Panel" d'outil de mesure
var measurebar = new Geoportal.Control.MeasureToolbar(
{
div: OpenLayers.Util.getElement(tbx.id+'_measure'), // la
<div> qui accueil le contrôle
displaySystem:
(map.getProjection().getProjName()=='longlat'?'geographic':
'metric'), // le système d'affichage des résultats
targetElement: OpenLayers.Util.getElement(tbx.id+'_meares')
// la <div> qui accueil les résultats
}
);
// ajout du contrôle à la carte
map.addControl(measurebar);
Ce code qui mérite quelques explications est à placer dans la fonction «
after_loading » comme précédemment.
Le Viewer de type « Default » charge automatiquement dans la <div> du contrôle «
ToolBox » une <div> pour accueillir la barre d'outil de mesure. L'identifiant de cette
<div> est composé de l'identifiant de la <div> de la « ToolBox » auquel est
concaténé « _measure ». De même pour l'affichage des résultats sauf que la chaîne
de caractère concaténée est « _meares ».
On définit donc les attributs « div » et « targetElement » grâce à la fonction «
OpenLayers.Util.getElement » qui permet d'accéder à un élément du DOM par
son identifiant.
Exemple
Vous trouverez ici44 un exemple d'implémentation des outils de mesure.
40 - http://api-geoportail.ensg.eu/gpp3/control_printmap.html
41 - http://api-geoportail.ensg.eu/gpp3/control_printmap_navtoolbar.html
42 - http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/Control/Measure-js.html
43 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Control/Measure/Azimuthjs.html#Geoportal.Control.Measure.Azimuth
44 - http://api-geoportail.ensg.eu/gpp3/control_measure.html
34
34
34
Ajouter des outils
D. Outils d'édition
L'API Géoportail permet d'ajouter de nombreux outils d'édition d'objets vectoriels
tels que des outils de création, de sélection, de modification, de suppression et bien
d'autres. Pour ce faire nous pouvons utiliser directement la barre d'outils
Geoportal.Control.DrawingToolbar45.
Pour faire simple nous nous limiterons à l'utilisation de la barre d'outils illustrée par
le code ci-dessous :
{
// Création d'une couche éditable
var layer = new OpenLayers.Layer.Vector("édition");
map.addLayer(layer);
// Création du contrôle d'édition
var edit_control = new
Geoportal.Control.DrawingToolbar(layer, {mode:'single'});
map.addControl(edit_control);
}
Pour paramétrer plus finement cette barre d'outils vous pouvez vous reporter à la
documentation en ligne et aux exemples.
Exemple
Vous trouverez ici46 un exemple d'implémentation de la barre d'outils d'édition.
E. Moteurs de recherche par toponyme ou adresse
Le paramétrage des outils de recherche est un peu complexe et vous êtes invités à
vous reporter à la documentation de la classe LocationUtilityService47.
Le code suivant permet de paramétrer un outil de recherche sur les toponymes et
un outil de recherche par adresse :
{
var tbx=
map.getControlsByClass('Geoportal.Control.ToolBox')[0];
var panel= new Geoportal.Control.Panel({
div:OpenLayers.Util.getElement(tbx.id+'_search')
});
var geonames= new
Geoportal.Control.LocationUtilityService.GeoNames(
new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
//'TOPONYMS.ALL:OPENLS',
'PositionOfInterest:OPENLS;Geocode',
45 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Control/DrawingToolbar-js.html
46 - http://api-geoportail.ensg.eu/gpp3/control_edit.html
47 - http://api.ign.fr/tech-docs-js/2.0.0beta/jsdoc/files/Geoportal/Control/LocationUtilityService-js.html
35
Ajouter des outils
Ajouter des outils
{
maximumResponses:100,
formatOptions: {
//version:'1.2'
}
}
),{
title: 'gpControlLocationUtilityService.geonames.title',
setZoom:Geoportal.Control.LocationUtilityService.GeoNames.s
etZoomForBDNyme,
autoCompleteOptions: {}
}
);
var geocode = new
Geoportal.Control.LocationUtilityService.Geocode(
new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
'StreetAddress:OPENLS;Geocode',
{
maximumResponses:100,
formatOptions: {
//version:'1.2'
}
}
),{
title: 'gpControlLocationUtilityService.geocode.title',
//setZoom:Geoportal.Control.LocationUtilityService.GeoNames
.setZoomForBDNyme
}
);
panel.addControls([geonames, geocode]);
}
Exemple
Un exemple d'implémentation est disponible ici48
Remarque
Il est également possible de faire appel aux services de positionnement OpenLS
sans passer par les Control.LocationUtilityService. Ceci nécessite une bonne
maîtrise de la documentation et du JavaScript et peut constituer un bon exercice.
Exemple
Vous trouverez ici49 un exemple d'implémentation de moteur de recherche
personnalisé.
48 - http://api-geoportail.ensg.eu/gpp3/control_search.html
49 - http://api-geoportail.ensg.eu/gpp3/control_search_custom.html
36
36
36

API Géoportail Travaux Pratiques

Transcription

Documents pareils

LECON ORTHOGRAPHE 1 L`alphabet phonetique

RADIOPROTECTION DES LOCAUX

frais d`approche et divers - Agence de Promotion de l`Industrie et de

Premier conseil d`école du jeudi 17 octobre 2013

le communiqué logiterm

Nicolas Ferrand développeur windows / php / internet

pomme de reinette et pomme d`ap

Le C2i®niveau 2 «enseignant»

7.4 Récapitulatif et envoi de la commande où du devis