| Versions |
  |
|
| Author |
 Topic  |
|
cedric67
France
12276 Posts |
 Posted - 25 nov. 2008 : 07:35:08
|
GUIDE - COMMENT UTILISER L'API DU GEOPORTAIL (IGN) SUR SON SITE
Visualisation de données GPS sur cartes IGN Topo et Photo
https://api.ign.fr/geoportail/
Prérequis:
- 1 espace d'hébergement web et FTP gratuit ou payant (ex: pages perso chez votre FAI)
- 1 logiciel client FTP (ex: "FileZilla" pour Mac OS X, Linux et Windows)
- 1 logiciel éditeur de texte (ex: "SubEthaEdit" pour Mac OS X / "Gedit" ou "Kedit" pour Linux / "WordPad" pour Windows)
- "Google Earth" (pour Mac OS X, Linux et Windows)
Principe et fonctionnement:
L'API du Géoportail est un moteur hébergé sur les serveurs "Géoportail" de l'IGN qui permet la distribution et l'affichage du contenu du Géoportail (cartes IGN et orthophotos) sur d'autres sites web. En plus de pouvoir afficher des cartes IGN sur votre site, l'API du Géoportail vous offre également la possibilité d'afficher sur la carte un ou plusieurs tracés de vos randonnées. Ces tracés doivent être au format "KML" (Google Earth).
Pour pouvoir utiliser l'API, vous devez installer sur votre espace d'hébergement web un fichier HTML contenant du code Javascript. C'est ce code qui fera appel à l'API et qui gèrera l'affichage final des données Géoportail. Ce code contient également une clé (licence d'utilisation), ainsi que tous les paramètres d'affichage nécessaires tel que la taille de la carte, les fichiers KML à charger par-dessus la carte, les couches à afficher (cartes IGN et/ou orthophotos).
La clé (licence d'utilisation) se présente sous cette forme: "4301424684524488775". Chaque clé est unique et liée à l'adresse de votre site web. De ce fait, elle ne peut donc pas être utilisée sur un autre site ou en local sur votre ordinateur.
 - 
A gauche: Utilisée sur le site web autorisé par la clé, l'API affiche le contenu du Géoportail.
A droite: Utilisée en local sur un ordinateur ou sur un site web non autorisé, l'API bloque l'accès au contenu du Géoportail.
Pour obtenir une clé, il est nécessaire de s'inscrire sur le site de l'API du Géoportail, puis de créer un "Nouveau contract" (gratuit). Ce contrat a une durée de validité de 5 ans. A noter que si vous avez déjà une clé pour les versions précédentes de l'API, le fait de passer à la version v1.0 impose de resouscrire une nouvelle clé.
Lorsque le contract est créé, vous obtenez votre clé, ainsi que le code minimal à utiliser.
Le code:
Pour obtenir un affichage correcte et complet, il est nécessaire de rajouter des bouts de codes supplémentaires, qu'il est malheureusement difficile à trouver, car l'IGN n'est vraiment pas très explicite à ce sujet. Pour vous faciliter la tâche, voici le code complet que j'utilise sur mon site "Bibliorando".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page web de test - API Geoportail - Tuto GpsPasSion</title>
<!-- IE8 compatibility mode -->
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.0beta4&key=xxxxxxxxxxxxxxxxxxx&instance=viewer&">
<!-- --></script>
<script type="text/javascript">
<!--
// the viewer variable is declared by the API through the instance parameter
viewer= null;
var kbControl= null;
function initGeoportalMap() {
geoportalLoadviewer("viewerDiv", "normal", 'FXX', null, null);
if (!viewer) {
OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
return;
}
viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS:WMSC'],{visibility:false});
viewer.addGeoportalLayers(['GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],{opacity:0.8});
viewer.openLayersPanel(false);
viewer.openToolsPanel(false);
viewer.setInformationPanelVisibility(false);
viewer.getMap().addControl(new OpenLayers.Control.LoadingPanel());
kbControl= viewer.getMap().getControlsByClass(OpenLayers.Control.KeyboardDefaults.prototype.CLASS_NAME)[0];
// Ajout de la couche KML 1
viewer.getMap().addLayer("KML", "Mon parcours 1", "mon_parcours_1.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
// Ajout de la couche KML 2
// viewer.getMap().addLayer("KML", "Mon parcours 2", "mon_parcours_2.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
// Ajout de la couche KML 3
// viewer.getMap().addLayer("KML", "Mon parcours 3", "mon_parcours_3.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
// Coordonnees GPS de centrage
viewer.getMap().setCenterAtLonLat(7.21903,48.66222,13);
}
--></script>
<style type="text/css">
<!--
.gpToolBoxClass .gpControlLabelClass {
background-color: #58a3d7;
}
/* Geoportal.Control.LayerSwitcher : */
.gpControlLayerSwitcher .gpControlLabelClass {
background-color: #58a3d7;
color: #FFFFFF;
}
.gpLayerNameGroupDivClass{
background-color: #f3f3f3;
}
.gpControlBasicLayerToolbar{
background-color: #58a3d7;
}
.gpToolBoxClass .gpToolBoxContentContainer div.gpToolBoxContent {
background-color: #f3f3f3;
}
.gpToolBoxClass .gpControlLabelClass center {
color: #FFFFFF;
}
.gpControlNavToolbar {
background-color: #f3f3f3;
}
.gpZoomBarClass {
background-color: #f3f3f3;
}
.gpMainMap {
border:3px solid #58a3d7 !important;
}
.gpControlInformation {
background: #58a3d7 none !important;
}
.gpLong, .gpLat {
background-color:#58a3d7!important;
}
.gpSelectProjections, .gpSelectUnits {
background-color:#58a3d7!important;
}
-->
</style>
</head>
<body style='width:100%;height:100%;border:0;margin:0;background:url(mon_image_de_fond.jpg) no-repeat;'>
<div id="viewerDiv" style="width:800px;height:600px;"></div>
</body>
</html>
Copiez tout le script ci-dessus dans un nouveau fichier texte (à l'aide d'un éditeur de texte), puis enregistrez ce fichier en mettant ".html" à la fin du nom (ex: "mon_parcours.html"). Il va ensuite falloir modifier les bouts de codes en rouge pour adapter le script à votre site.
quote:
<title>Page web de test - API Geoportail - Tuto GpsPasSion</title>
Placez le titre de votre page web entre les balises <title> et </title>.
quote:
<script src="http://api.ign.fr/api?v=1.0beta4&key=xxxxxxxxxxxxxxxxxxx&instance=map"></script>
Remplacez xxxxxxxxxxxxxxxxxxx par la clé (licence d'utilisation) qui vous a été attribué lors de votre inscription.
quote:
viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS:WMSC'],{visibility:false});
Vous pouvez choisir ici d'afficher ou non les "orthophotos" de l'IGN. Les valeurs sont exprimées de la sorte: true = oui / false = non.
quote:
viewer.addGeoportalLayers(['GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],{opacity:0.8});
Vous pouvez régler ici l'opacité des cartes IGN. Les valeurs sont exprimées de la sorte: 0.0 = 0 % / 0.55 = 55 % / 0.8 = 80 % / 1.0 = 100 %.
quote:
viewer.openLayersPanel(false);
Vous pouvez choisir ici d'afficher ou non le panneau des couches de l'IGN. Les valeurs sont exprimées de la sorte: true = oui / false = non.
quote:
viewer.openToolsPanel(false);
Vous pouvez choisir ici d'afficher ou non le panneau d'outils. Les valeurs sont exprimées de la sorte: true = oui / false = non.
quote:
viewer.setInformationPanelVisibility(false);
Vous pouvez choisir ici d'afficher ou non le panneau d'information (coordonnées GPS, altitude, etc...). Les valeurs sont exprimées de la sorte: true = oui / false = non.
quote:
// Ajout de la couche KML 1
viewer.getMap().addLayer("KML", "Mon parcours 1", "mon_parcours_1.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
Dans la première balise, vous indiquez le nom que vous souhaitez donner à votre parcours. Ce nom apparaitra sur la carte. Dans la deuxième balise, vous indiquez le nom de votre fichier "KML" (Google Earth) qui contient le tracé du parcours à afficher sur la carte. Dans la troisième balise, vous définissez le niveau de zoom minimum. Dans la quatrième balise, vous définissez le niveau de zoom maximum. Dans la cinquième balise, vous pouvez insérer votre logo pour le copyright. Dans la sixième balise, vous pouvez indiquer l'adresse de votre site web. Il sera combiné au logo pour le copyright.
quote:
// Ajout de la couche KML 2
// viewer.getMap().addLayer("KML", "Mon parcours 2", "mon_parcours_2.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
// Ajout de la couche KML 3
// viewer.getMap().addLayer("KML", "Mon parcours 3", "mon_parcours_3.kml", {minZoomLevel:3, maxZoomLevel:16,
originators:[{logo:'Nom de mon logo', pictureUrl: 'mon_logo.gif', url: 'http://www.mon_site_web.fr/'}]});
Si vous avez besoin de superposer d'autres parcours de randonnées pour pouvoir les comparer (voir exemple ci-dessous), supprimez simplement la balise "//" (en rouge) et complétez les autres balises comme pour les lignes ci-dessus. Vous pouvez rajouter d'autres couches si nécessaire.
quote:
// Coordonnees GPS de centrage
viewer.getMap().setCenterAtLonLat(7.21903,48.66222,13);
Indiquez ici les coordonnées GPS (longitude et latitude) du point central de votre parcours, afin de centrer la carte sur votre parcours. La dernière valeur représente le niveau de zoom appliqué sur la carte. Par défaut la valeur est 13. Vous pouvez monter jusqu'à 15 pour les carte IGN. Au-delà, seules les orthophotos s'afficheront.
Voilà, votre page html est désormais prête. Vous pouvez à présent la copier sur votre serveur web (via le protocole FTP) en utilisant votre logiciel client FTP.
Pour un affichage correct du présent topic, j'ai dû rajouter des retours à ligne dans le code, ce qui peut avoir pour incidence qu'il ne fonctionne plus correctement lorsque vous l'utiliserez. Dans ce cas, vous pouvez le télécharger en cliquant sur le lien ci-dessous.
>> page_web_de_test_api_geoportail_tuto_gpspassion.zip <<
Précision importante:
Dans la version gratuite de l'API, l'IGN ne vous autorise à afficher au maximum que 10000 dalles cartographiques de 256 x 256 pixels par jour et par clé d’utilisation, et à une taille de fenêtre cartographique maximale de 800 x 600 pixels. Au-delà, l'IGN se réserve le droit de casser le "contrat" et de vous interdire l'utilisation de l'API.
Une version payante permet d'aller au-delà de ces limites.
Vos parcours en KML:
Si vous disposez de traces de vos randonnées au format "GPX", vous pouvez les convertir au format "KML" pour ensuite les afficher sur les cartes IGN fournient par l'API du Géoportail.
Ces traces au format GPX peuvent être soit:
- dessinées à l'aide du logiciel "Bayo CartoExploreur v3".
- enregistrées en temps réel à l'aide d'un GPS datalogger ou d'un GPS sport.
- téléchargées sur des sites spécialisés (ex: "Bibliorando").
Pour convertir ce fichier GPX en KML, lancez le logiciel "Google Earth", puis allez dans le menu "Fichier" -> "Ouvrir..." -> choisissez votre fichier GPX, puis patientez le temps que l'importation se termine.
Dans la colonne de gauche de "Google Earth" apparait une nouvelle ligne "GPS device", c'est votre fichier GPX. Faites un clic-droit dessus -> "Propriétés". Vous pouvez donner un nom à votre trace. Cliquez ensuite sur l'onglet "Style, Couleur". Vous pouvez y choisir la couleur de votre trace, ainsi que sa largeur et son niveau d'opacité. Ce sont ces paramètres qui seront ensuite repris par l'API du Géoportail pour afficher votre trace sur les cartes IGN.
Refaites un clic-droit sur votre trace -> "Enregistrer le lieu sous". Enregistrez-la au format "KML". Vous pouvez à présent copier ce fichier KML sur votre serveur web (via le protocole FTP) en utilisant votre logiciel client FTP. N'oubliez pas que le nom de votre fichier KML doit être le même que celui que vous avez défini dans le script, sinon l'API ne sera pas capable de le trouver.
Voilà, vous pouvez dès à présent visualiser votre parcours sur les cartes et/ou sur les orthophotos de l'IGN.
- 
A gauche: 1 tracé affiché.
A droite: Comparaison de 2 tracés. |
Edited by - cedric67 on 28 juil. 2011 02:29:48
|
|
|
Ads
|
|
|
gpspassion
94521 Posts |
|
|
sylque
France
24 Posts |
Posted - 28 nov. 2008 : 18:24:58
|
veuillez excuser mon intrusion, mais juste pour indiquer les utilisateurs linux comme moi,
Filezilla existe aussi sous linux (ubuntu entre autres)
Googleearth est porté sous linux
editeur de text: Gedit ou Kedit (gnome ou kde)
sinon merci pour ce tuto que je vais essayé ce week |
GARMIN FR305, FR405 SPORTTRACKS MEMORYMAP |
 |
|
|
barbudor
France
1829 Posts |
|
|
cedric67
France
12276 Posts |
|
|
sylque
France
24 Posts |
Posted - 06 déc. 2008 : 14:01:38
|
@cedric67:
MERCI pour ce tuto, grace à toi j'ai reussi à faire ma carte sur mon site que je suis en train de créer.
Par contre je n'arrive pas à centrer la carte, j'ai du loupé quelque chose....
|
GARMIN FR305, FR405 SPORTTRACKS MEMORYMAP |
|
|
|
cedric67
France
12276 Posts |
|
|
sylque
France
24 Posts |
Posted - 06 déc. 2008 : 15:05:14
|
regarde si tu as le temps ce que cela donne ds la section gps
http://membres.lycos.fr/doudcvq/photoalbum.html
soyez cool je debute :) |
GARMIN FR305, FR405 SPORTTRACKS MEMORYMAP |
Edited by - sylque on 06 déc. 2008 15:05:57 |
|
|
|
cedric67
France
12276 Posts |
|
|
sylque
France
24 Posts |
Posted - 06 déc. 2008 : 18:05:05
|
sitot dit sitot fait par contre cela fait gros sur la page....surtout que j'ai mit celle du marathon de Marsenay, mais elle ne veut pas s'affiché, 2 en 1 jour cela fait peut etre beaucoup 
Par contre qua nd je clic sur le lien parcours, comment les rendres executable......il s'ouvre en page code chez moi
Comme je suis sur linux.... |
GARMIN FR305, FR405 SPORTTRACKS MEMORYMAP |
Edited by - sylque on 06 déc. 2008 18:11:45 |
|
|
|
cedric67
France
12276 Posts |
|
|
sylque
France
24 Posts |
Posted - 06 déc. 2008 : 18:18:36
|
ROOOH tu te rends compte si je dois mettre une carte par page il va m'en falloir une tonne
Tu as raison, une carte par page et cela fonctionne 
Un énorme merci à vous
Grace à vous, je peus partager ma passion amateur de la course, meme si elle ce limite aux dep. 21,25,39 |
GARMIN FR305, FR405 SPORTTRACKS MEMORYMAP |
Edited by - sylque on 07 déc. 2008 09:00:29 |
|
|
|
cedric67
France
12276 Posts |
|
|
gya41
6 Posts |
Posted - 24 déc. 2008 : 18:42:01
|
Merci pour ce tuto !!! En regardant la doc du géoportail on commence à s'arracher les cheveux et puis, tout à coup, on tombe sur un tuto tout simple et très bien fait qui débloque la situation, merci encore.
Par contre, j'ai un petit problème concernant le point central de mon tracé, je n'arrive pas à centre l'affichage dessus, j'ai toujours un décalage de quelques km.
Les coordonnées que je demande : map.setCenterAtLonLat(1.44349, 47.39285, 12);
ma page affichée est centrée sur les coordonnées 1.2627, 47.2332
Je n'arrive pas à trouver la solution, si quelqu'un à une idée ?
Merci et bon noël à tous ! |
|
|
|
cedric67
France
12276 Posts |
|
|
gya41
6 Posts |
Posted - 26 déc. 2008 : 09:25:59
|
Moi j'ai un décalage d'un bonne 10zaine de km en X et Y. Comment mesures-tu le point centrale de ton tracé ? Entre temps, j'ai résolu mon problème en utilisant un autre outil développé sous l'api geoportail pour mesurer le point central de mes tracés. Curieusement cet outil me donne des coordonnées correctes, il s'agit d'EditGPX (http://www.skitour.fr/maps/ign/gpx-online.php).
Bonne fêtes de fin d'années et merci pour l'accueil,
Gérald |
|
|
|
Topic |
|
|
|
| This page was generated in 0,88 seconds. |
 |
|
- 
- 
[GUIDE] API Géoportail: traces GPS sur son site
