Aller au contenu

9. Superposer une carte à Google Maps avec génération préalable de tuiles#

📆 Date de publication initiale : 07 septembre 2008

⚠ L'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction#

logo Google

Le but de ce tutoriel est de montrer la possibilité de superposer ses propres fonds cartographiques à la carte Google Maps. Pour ceci, il est d'abord nécessaire de 'construire' les tuiles pour ensuite les afficher sur la carte.

Génération des tuiles#

Grâce au logiciel MapCruncher de Microsoft, il est possible de 'découper' une carte scannée selon différents niveaux de zoom.

L'utilisation de ce logiciel est décrite dans la vidéo suivante :

Video: 5 Minute Mapcruncher Tutorial

Il convient alors de stocker les tuiles générées dans un répertoire sur votre serveur.

Initialisation de la carte#

Reprendre la carte du tutoriel n°2 pour initialiser la carte.

Définition des fonctions#

Afin d'afficher les tuiles, il faut définir une fonction qui 'reconstruise' leur URL définie par MapCruncher : 

function TileToQuadKey (x, y, zoom){  
  var quad = "";  
  for (var i = zoom; i > 0; i--){  
    var mask = 1 << (i - 1);  
    var cell = 0;  
    if ((x & mask) != 0){  
      cell++;  
    }  
    if ((y & mask) != 0){  
      cell += 2;  
    }  
    quad += cell;  
  }  
  return quad;  
}

Puis une fonction qui aille 'chercher' les noms des tuiles via cette méthode TileToQuadKey(x,y,zoom) : 

var topoTiles = function (a,b) {  
var f = "./tile_files/" + TileToQuadKey(a.x,a.y,b) + ".png";  
return f;  
}

Construction du layer#

Il faut maintenant déclarer un objet GTileLayer en définissant les niveaux de zoom maxi et mini (correspondant aux niveaux demandés lors de la génération de tuiles avec MapCruncher) : 

var topoLayer = new GTileLayer(new GCopyrightCollection(''),9,12);

Puis définir les deux méthodes getTileUrl et isPng de l'objet topoLayer :

topoLayer.getTileUrl = topoTiles;  
topoLayer.isPng = function() {return true;};

Et définir un nouveau bouton de sélection de couche : 

var topoMap = new GMapType([topoLayer], G_SATELLITE_MAP.getProjection(), "Topo",{errorMessage: "Pas de données ici !"});

Finalisation#

Enfin enlevons les types 'SATELLITE' et 'HYBRID', sélectionnons la carte topo par défaut et ajoutons le bouton 'topo' : 

map.addMapType(topoMap);  
map.removeMapType(G_HYBRID_MAP);  
map.removeMapType(G_SATELLITE_MAP);  
map.addControl(new GScaleControl());  
map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),12);  
map.setMapType(topoMap);  
map.enableScrollWheelZoom();

Code complet#

<!DOCTYPE html "-//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>
    [Google Maps] 9. Superposer une carte à Google Maps
  </title>
  <style type="text/css">
  html { overflow:hidden; height:100%; }
  body { height:100%; margin:0; }
  #map { width:100%; height:100%; }
  </style>
  <link rel="icon" type="image/png" href="./favicon.png"/>
  <script src="http://maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici" type="text/javascript"></script>
  <script type="text/javascript">

  function TileToQuadKey (x, y, zoom){
    var quad = "";
    for (var i = zoom; i > 0; i--){
      var mask = 1 << (i - 1);
      var cell = 0;
      if ((x & mask) != 0){
        cell++;
      }
      if ((y & mask) != 0){
        cell += 2;
      }
      quad += cell;
    }
    return quad;
  }

  function initialize() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById('map'));

      var topoTiles = function (a,b) {
        var f = "./tile_files/" + TileToQuadKey(a.x,a.y,b) + ".png";
        return f;
      }

      var topoLayer = new GTileLayer(new GCopyrightCollection(''),9,12);
      topoLayer.getTileUrl = topoTiles;
      topoLayer.isPng = function() {return true;};

      var topoMap = new GMapType([topoLayer], G_SATELLITE_MAP.getProjection(), "Topo",{errorMessage: "Pas de données ici !"});

      map.addMapType(topoMap);
      map.removeMapType(G_HYBRID_MAP);
      map.removeMapType(G_SATELLITE_MAP);
      map.addControl(new GScaleControl());
      map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),12);
      map.setMapType(topoMap);
      map.enableScrollWheelZoom();

    }
    else{
      alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
    }
  }
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
  <div id="map"></div>
</body>
</html>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="https://web.archive.org/web/20171110114935if_/http://88.191.39.115/fabien/geotribu/%5bgeotribu%5d_Google-Maps_tuto9.html" height="350px" width="100%">

Résultat pleine page

Remarques#

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées. La carte est ici 'calée' et 'découpée' en tuiles grâce au logiciel MapCruncher, mais il est possible d'utiliser le module gdal2tiles des outils GDAL ou d'utiliser le logiciel MapTiler qui sera l'interface graphique de gdal2tiles.

Conclusion#

Ce tutoriel décrit les étapes pour superposer un fond de carte dans Google Maps en générant des tuiles d'une carte préexistante via le logiciel MapCruncher. Celui-ci génère des tuiles selon un certain nombre de niveau de zoom et 'donne' un nom de fichier aux tuiles générées facilement exploitable. La superposition de fonds de carte via la classe GTileLayer peut être utilisée pour des fonds de carte fixe. Pour des données 'dynamiques', il sera alors préférable d'utiliser un serveur cartographique (MapServer ou GeoServer et TileCache). Cette méthode demande un serveur robuste pour répondre aux requêtes. Je me suis fortement inspiré de ce site pour produire ce tutoriel.

Auteur·ice#

Fabien Goblet#

portrait Fabien Goblet

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA