Facbook viewat  Flickr
Accueil du site > Tutoriels > Integration de l’API Géoportail

HTML / PHP / JAVASCRIPT

Integration de l’API Géoportail

Cartographie

1 vote

Publié le mercredi 10 novembre 2010

La première étape pour utiliser l’API   est Géoportail est de s’inscrire sur le site Géoportail pour disposer d’une clé d’utilisation.

  • Ensuite on affiche le code de base, qui permet d’afficher la carte :
    <!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>Localisation de notice : IA12110017</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script
       type="text/javascript"
       src="http://api.ign.fr/geoportail/api?v=1.0&amp;key=3166386466437883793&amp;instance=VISU">
    <!-- -->
    </script>
    <script type="text/javascript">
    <!--
    function initGeoportalMap()
    {
         // On implémente la carte
              geoportalLoadVISU("GeoportalVisuDiv", "normal");
         // On charge les couches de données définies dans le contrat
         if (VISU)
            {
                   VISU.addGeoportalLayers();
                    //On centre la carte sur un point défini en GSW84 (lon , lat, zoom)
                    VISU.getMap().setCenterAtLonLat(                 2.57487799418473,44.3486106925408,12);
         }
    }
     -->
    </script>
    <style type="text/css">
    <!--
    div#GeoportalVisuDiv
    {
            width:800px;
            height:600px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="GeoportalVisuDiv"></div>
    </body>
    </html>               
  • Ensuite on peut proposer de projeter des points au format GSW84 :
// On ajoute une couche d'objet vectoriels
var vector_layer = new OpenLayers.Layer.Vector('Mes POIs');  
// On crée une Geometry Point
var mon_point = new OpenLayers.Geometry.Point( 2.57487799418473,44.3486106925408);
// On change notre point de projection
var sourceproj = OpenLayers.Projection.CRS84; // WGS84
var destproj = VISU.projection; // Projection Geoportail
mon_point.transform(sourceproj, destproj);
// On crée l'objet Vector à partir de la Geometry précédente ici le style d'un point google Map
var stylepoi = {externalGraphic:'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
graphicWidth:50,
graphicHeight:50
var mon_poi = new OpenLayers.Feature.Vector(mon_point, null, stylepoi);
// On ajoute notre POI à la couche créee et on affiche cette couche
vector_layer.addFeatures([mon_poi]);
VISU.getMap().addLayer(vector_layer);
mon_poi.size=new OpenLayers.Size(10, 10);
  • Enfin dernière étape, proposer une pop up, d’information relative aux points proposés :
// on crée la pop up
var popup = new OpenLayers.Popup.FramedCloud('id', new OpenLayers.LonLat(mon_point.x, mon_point.y), new OpenLayers.Size(200,50), '<table border="0"><tr><td><strong>maison</strong><br />Rodez<br />2009 AC01 212 ; 1808 D 168, 169 ; 1810 5,6</td><td><img src="http://patrimoines.midipyrenees.fr/fileadmin/img/renabl/IVC12202/122010/IVC12202_000002_I_1/VIG/IVC12202_20101200242NUCA_V.JPG" width="100" /></td></tr></table>', mon_poi, true);
VISU.getMap().addPopup(popup, true);

Voilà, pour les étapes principales de ce premier tutoriel d’explications. J’ai moi-même automatisé la création de points grâce au couple PHP / MySQL. D’autres tutoriels suivront sur l’intégration de l’API   géoportail à partir de fichiers KML.

Voir en ligne : Exemple d’utilisation de L’API Géoportail avec base de données MySQL

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0