21. [Google Maps API v3] Overlays des tuiles OpenStreetMap

Ecrit par fabien le 5/02/2010.

| |

Sommaire

Introduction
Initialisation
Tuiles OSM et affichage
Code complet
Démonstration
Remarques
Conclusion

résumé:

La nouvelle version de l'API Google Maps permet dorénavant d'afficher des tuiles provenant de fournisseurs tiers. Le succès d'OpenLayers et de son API doit y être pour beaucoup. Nous allons voir ici comment afficher des tuiles OpenStreetMap sur des ordinateurs de bureau et sur des smartphones.

pré-requis:

Avoir lu tutoriel sur l'affichage sur différents devices.

Introduction

L'API Google Maps v3 évolue.
Ce second tutoriel nous montrera les mécanismes mis en jeu pour afficher un marqueur, gérer un événement et optimiser l'affichage sur différents devices.
Le résultat sera d'ailleurs repris dans les tutoriaux sur les Webview sous iPhone et Android.

Initialisation

Nous reprenons ici en partie le code du second tutoriel sur l'API, notamment pour la détection des devices, les options et le code HTML :

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var myLatlng = new google.maps.Latlng(43.6, 1.44);
myOptions = {
 zoom: 13,
 center: myLatlng,
 scrollwheel: false,
 scaleControl: false,
 disableDoubleClickZoom: true,
 backgroundColor: '#000000',
 navigationControl: true,
 navigationControlOptions: {
   style: google.maps.NavigationControlStyle.DEFAULT
 },
 mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {				
      mapdiv.style.width = '100%';
      mapdiv.style.height = '100%';
      myOptions = {
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ANDROID
        }
      };
      map.setOptions(myOptions);
    } else {
      mapdiv.style.width = '550px';
      mapdiv.style.height = '350px';
    }
  }

Tuiles OSM et affichage

L'API v3 implémente une classe qui permet d'afficher des tuiles tierces :

var osmmapnik = new google.maps.ImageMapType({
 getTileUrl: function(ll, z) {
  var X = ll.x % (1 << z);
  return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
 },
 tileSize: new google.maps.Size(256, 256),
 isPng: true,
 maxZoom: 18,
 name: "Mapnik",
 alt: "Open Streetmap Mapnik"
});

Dans l'ordre, les propriétés :

getTileUrl : l'URL de la tuile demandée
tileSize : la taille en pixel des tuiles retournées par l'URL
isPng : les tuiles sont-elles au format PNG ?
maxZoom : le zoom maximal
name : le nom de la couche qui sera affiché dans la liste des couches

Il reste à faire de même pour tous les différents rendus et à les ajouter à la liste de couches :

map.mapTypes.set('osm', osmmapnik);
map.mapTypes.set('osma', osmarender);
map.mapTypes.set('opnv', opnv_karte);
map.setMapTypeId('osm');
 
var optionsUpdate = {
  mapTypeControlOptions: {
    mapTypeIds: ['osm','osma','opnv'],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
};
 
map.setOptions(optionsUpdate);

Code complet

<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>[Google Maps API v3] 21. Overlays des tuiles OpenStreetMap</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  var map;
  var myOptions;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.6, 1.44);
    myOptions =	{
      zoom: 13,
      center: myLatlng,
      scrollwheel: false,
      scaleControl: false,
      disableDoubleClickZoom: true,
      navigationControl: true,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.DEFAULT
      },
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
  };
 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  var osmmapnik = new google.maps.ImageMapType({
    getTileUrl: function(ll, z) {
      var X = ll.x % (1 << z);
      return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 18,
    name: "Mapnik",
    alt: "Open Streetmap Mapnik"
  });
 
  var osmarender = new google.maps.ImageMapType({
    getTileUrl: function(ll, z) {
      var X = ll.x % (1 << z);
      return "http://tah.openstreetmap.org/Tiles/tile/" + z + "/" + X + "/" + ll.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 18,
    name: "Osmarender",
    alt: "Open Streetmap Osmarender"
  });
 
  var opnv_karte = new google.maps.ImageMapType({
    getTileUrl: function(ll, z) {
      var X = ll.x % (1 << z);
      return "http://tile.xn--pnvkarte-m4a.de/tilegen/" + z + "/" + X + "/" + ll.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 18,
    name: "OPNV",
    alt: "Open Streetmap OPNV"
  });
 
  map.mapTypes.set('osm', osmmapnik);
  map.mapTypes.set('osma', osmarender);
  map.mapTypes.set('opnv', opnv_karte);
  map.setMapTypeId('osm');
 
  var optionsUpdate = {
    mapTypeControlOptions: {
      mapTypeIds: ['osm','osma','opnv'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
 
  map.setOptions(optionsUpdate);
 
}
 
 
  function detectBrowser() {
    var useragent = navigator.userAgent;
    var mapdiv = document.getElementById("map_canvas");
 
    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {				
      mapdiv.style.width = '100%';
      mapdiv.style.height = '100%';
      myOptions = {
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ANDROID
        }
      };
      map.setOptions(myOptions);
    } else {
      mapdiv.style.width = '550px';
      mapdiv.style.height = '350px';
    }
  }
 
  </script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize(); detectBrowser();">
  <div id="map_canvas"></div>
</body>
</html>

Démonstration

A tester également sur votre smartphone en cliquant sur l'image ci-dessous ↓

Pour ceux qui n'ont pas de smartphone, voici une capture du rendu :

Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference v3 pour les différentes classes, méthodes et options utilisées.
Je vous conseille également la lecture des exemples et des articles.

Conclusion

L'API v3 Google Maps monte en puissance et elle suit la tendance à l'utilisation d'Internet sur les smartphones. Nous continuerons à la comprendre et à l'utiliser dans des nouveaux tutoriaux en suivant les releases.

Auteur : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

GeoTribu