3
07 sep 2008


Introduction


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 :

<br/><a href="http://video.msn.com/video.aspx?vid=66a1094c-8490-4e30-b353-88332ba2fe47" target="_new" title="5 Minute Mapcruncher Tutorial">Video: 5 Minute Mapcruncher Tutorial</a>

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






<br /> [Google Maps] 9. Superposer une carte à Google Maps<br />






Démonstration