Des souris et des cartes

Accueil > Lab > Géoportail > Géoportail & API Google

4 votes

Géoportail & API Google

samedi 19 avril 2014, par Spip

Dans cet article, nous allons voir comment intégrer de jolies cartes IGN avec la célèbre API JavaScript Google Maps.

- Comme pour les exemples précédents, la première étape consiste à charger la bibliothèque en incluant le script (JS) de GoogleMap :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Pour plus d’information, rendez-vous sur le site de l’API Google Maps Javascript v.3.

- Il faut ensuite ajouter une div pour la carte :

<div id="map" style="width:100%; height:400px;"></div>

- Nous allons maintenant devoir déclarer un calque Google (un ImageMapType)

function geoportailLayer (name, key, layer, options)
{ var l= new google.maps.ImageMapType
  ({ getTileUrl: function (coord, zoom)
     { return "http://wxs.ign.fr/" + key + "/geoportail/wmts?LAYER=" + layer
        + "&EXCEPTIONS=text/xml&FORMAT="+(options.format?options.format:"image/jpeg")
        + "&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"
        + "&STYLE="+(options.style?options.style:"normal")+"&TILEMATRIXSET=PM"
        + "&TILEMATRIX=" + zoom + "&TILECOL=" + coord.x + "&TILEROW=" + coord.y;
     },
     tileSize: new google.maps.Size(256,256),
     name: name,
     minZoom: (options.minZoom ? options.minZoom:0),
     maxZoom: (options.maxZoom ? options.maxZoom:18)
  });
  l.attribution = ' &copy; <a href="http://www.ign.fr/">IGN-France</a>';
  return l;
}

- Il ne nous reste plus qu’à déclarer la couche "carte"…

map = new google.maps.Map( document.getElementById('map'),
   {  mapTypeId: 'carte',
      streetViewControl: false,
      mapTypeControlOptions: { mapTypeIds: ['carte', google.maps.MapTypeId.ROADMAP] },
      center: new google.maps.LatLng(48.845, 2.424),
      zoom: 15
   });

- et à y inclure cette couche sur la carte Google :

map.mapTypes.set('carte', geoportailLayer("Carte IGN", apiKey,
      "GEOGRAPHICALGRIDSYSTEMS.MAPS", { maxZoom:18 }));

- A ce stade, tout marche bien et la carte s’affiche correctement, il nous reste cependant un détail à régler : ajouter l’attribution à la carte IGN.
Pour cela, deux solutions, ajouter un texte sous la carte ou utiliser un control GoogleMaps. Nous utiliserons la seconde solution avec le code ci-dessous.

function geoportailSetAttribution (map, attributionDiv)
{  if (map.mapTypes.get(map.getMapTypeId()).attribution)
   {  attributionDiv.style.display = 'block';
      attributionDiv.innerHTML = map.mapTypes.get(map.getMapTypeId()).name
            +map.mapTypes.get(map.getMapTypeId()).attribution;
   }
   else attributionDiv.style.display = 'none';            
}
// Ajouter un control pour l'attribution
var attributionDiv = document.createElement('div');
attributionDiv.className = "attribution";
geoportailSetAttribution (map, attributionDiv);
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(attributionDiv);

- Le control s’affiche bien mais il reste affiché lorsqu’on passe sur une couche Google, pour cela, demandons à Google de nous prévenir lorsqu’on change l’affichage :

google.maps.event.addListener (map, 'maptypeid_changed',
   function()
   {   geoportailSetAttribution (this, attributionDiv);
   });

Et voilà le résultat !

Affichage du Géoportail avec l'API GoogleMaps

Un message, un commentaire ?

Site en travaux

Site en travaux

Attention : un problème technique (serveur SQL) empêche l’accès à cette partie du site. Merci de votre compréhension.