test:geoportail-maps [Orel's Wiki]

Map GeoPortail

On se propose d'utiliser l'API GeoPortail (IGN) en JavaScript.

API : http://professionnels.ign.fr/api-web
Documentation : http://depot.ign.fr/geoportail/api/release/doc/2.0.3/jsdoc/
Exemples : http://api.ign.fr/tech-docs-js/examples/index.html
Prise en Main Rapide : http://api.ign.fr/jsp/site/Portal.jsp?page_id=24
Exemples minimalistes : http://api.ign.fr/tech-docs-js/examples/geoportalMap_simple1.html
Layers : http://depot.ign.fr/geoportail/api/develop/tech-docs-js/fr/webmaster/js/add_layers.html
Markers : http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html
Exemples pour les nuls : http://www.valroc.net/les-news/192.html
Test le plus simple : test0

Comment obtenir sa clé gratuite ?

On peut la commander gratuitement sur le site web du Geoportail (http://professionnels.ign.fr). Notons qu'il est possible de commander plusieurs clés, qui sont typiquement dédiés à un site web dans lequel on souhaite ajouter des cartes IGN interactive via une API JavaScript.

Il faut d'abord créer son compte sur ce site.
Puis Onglet Services Publics → Accéder aux géoservices IGN → Pour le Web → S'abonner : Pour un site internet grand public → Je choisis : Licence géoservices IGN pour usage grand public → URL = adresse de votre site web perso correspondant au referer (www.monsite.fr) ; puis Sélectionner au moins dans “Ressources d'images tuilées WMTS du Géoportail en WebMercator” : “WMTS-Géoportail - Cartes IGN” qui correspond à la variable layer du fichier geoportail.bsh (carte IGN TOP25) → Ajouter au Panier → Commander…
Vous recevez ensuite par mail une key gratuite valide pour 3 ans avec un usage limité à 50 utilisateurs simultanés et 100000 transactions par mois (~ 1.5M de tuilles 256×256 pixels représentant 1km2 en TOP25).

Demo

Code

Voici le code le plus simple qui utilise la propriété overlays pour ajouter un layer GPX.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    div#viewerDiv {
        width:1000px;
        height:600px;
        background-color:white;
    }
    </style>
  </head>
 
  <body>
    <div id="viewerDiv"></div>
 
    <script>
    var iv= null;
    window.onload= function() {
        iv= Geoportal.load(
            'viewerDiv', // div's ID            
            ['c19uzdyrb5yttrgmhr2mmyij'], // API's keys
            {lat:42.829535, lon:0.052279}, // map's center (col de Marraut)
            15, //zoom 
            { // options
              language:'fr',            
              overlays:{ 'gpx':[{'name':'Col de Marraut', 'url':'../marraut.gpx', options:{opacity:1.0,minZoomLevel:5,maxZoomLevel:15}}] },
	      viewerClass:Geoportal.Viewer.Default, // boite à outil standard (zoom, coordonnées, gestion des couches de données..)       
              layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS','ORTHOIMAGERY.ORTHOPHOTOS'],
              layersOptions:{'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:true, opacity:1.0, minZoomLevel:1, maxZoomLevel:15},
                             'ORTHOIMAGERY.ORTHOPHOTOS':{visibility:false, opacity:1.0, minZoomLevel:1, maxZoomLevel:15}
                             }
            } 
        );
    };    
    </script>
    <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.0.3/Geoportal.js"><!-- --></script>
  </body>
</html>

Dans le code suivant, on n'utilise pas la propriété overlays mais la fonction init() appelé sur l'évènement onView pour ajouter deux layers : un layer GPX et un layer de type Vector contenant des POIs (Point Of Interests) saisies manuellement avec une icône graphique personnalisée.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    div#viewerDiv {
        width:1000px;
        height:600px;
        background-color:white;
    }
    </style>
  </head>
 
  <body>
    <div id="viewerDiv"></div>
 
    <script>
    var iv = null;
 
    window.onload= function() {
        iv= Geoportal.load(
            'viewerDiv', // div's ID            
            ['c19uzdyrb5yttrgmhr2mmyij'], // API's keys
            {lat:42.829535, lon:0.052279}, // map's center (col de Marraut)
            15, //zoom 
            { // options
              onView: init,
              language:'fr',            
	      overlays:{},
	      viewerClass:Geoportal.Viewer.Default, // boite à outil standard (zoom, coordonnées, gestion des couches de données..)       
              layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS','ORTHOIMAGERY.ORTHOPHOTOS'],
              layersOptions:{'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:true, opacity:1.0, minZoomLevel:1, maxZoomLevel:15},
                             'ORTHOIMAGERY.ORTHOPHOTOS':{visibility:false, opacity:1.0, minZoomLevel:1, maxZoomLevel:15}
                             }
            } 
        );
    };
 
    function init() {
      var viewer = iv.getViewer();
      var map = viewer.getMap();
 
      // ajout d'un layer GPX
      // map.addLayer( 'GPX', 'test', '../marraut.gpx', {visibility:true, opacity:1.0, minZoomLevel:5, maxZoomLevel:15} );            
 
      // ajout d'un layer avec des POIs utilisant une icône externe
      var mypoint = new OpenLayers.Geometry.Point(0.052279,42.829535); // col de marraut
      mypoint.transform(OpenLayers.Projection.CRS84, viewer.projection);
      var stylepoi = {externalGraphic:'http://www.openlayers.org/dev/img/marker.png', graphicWidth:25, graphicHeight:25 };
      var mypoi = new OpenLayers.Feature.Vector(mypoint, null, stylepoi); 
      var layer = new OpenLayers.Layer.Vector('Mes POIs');
      layer.addFeatures([mypoi]);
      map.addLayer(layer); 
    }
 
 
    </script>
    <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.0.3/Geoportal.js"><!-- --></script>
  </body>
</html>