[OpenLayers] Utiliser les fonds de carte de Google et de MapBox

Si vous utilisez de temps en temps OpenLayers, vous êtes sans doute déjà tombé sur des tutoriels vous expliquant comment charger un fond OpenStreetMap dans OpenLayers en toute simplicité. Par contre, il y a quelques subtilités à connaître pour y charger les fonds proposés par / créés sous MapBox et ceux proposés par Google Maps.

Or, ces différents fonds de carte ont plusieurs gros avantages à mes yeux :

– MapBox utilise les données libres produites dans le cadre du projet OSM et les sublime en leur appliquant des mises en forme particulièrement réussies
– la photo aérienne de Google Maps n’a pas encore son pendant libre et reste sans concurrent à l’heure actuelle
– la couche « terrain/relief » de Google Maps est plutôt réussie et n’a, elle non plus, pas encore de sérieux concurrent

Utiliser Google Maps

Pour utiliser Google Maps, la subtilité réside dans l’appel initial à l’API Google Maps. Contrairement à ce que bon nombre d’exemples vous feront faire, il va vous falloir préciser la version de l’API que vous souhaitez appeler. Sans cela, vous chargerez par défaut la plus version la plus récente (3.8 actuellement) et vous aurez alors une vilaine et imposante « infobulle » qui viendra s’afficher à chaque pan/zoom/clic sur votre carte. La version la plus récente de l’API pour laquelle OL n’affiche pas d’infobulle semble être la version 3.6.
Il vous faudra aussi préciser via le paramètre sensor si vous prévoyez d’utiliser ou non les fonctions de géolocalisation de l’API.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>

...

var coucheGMaps = new OpenLayers.Layer.Google('Photo aérienne de GMaps',{type:google.maps.MapTypeId.SATELLITE,numZoomLevels:22});
cartographie.addLayer(coucheGMaps);

En lieu et place de SATELLITE, vous pouvez utiliser les autres modes proposés par GMAPS (cf. Map Types). Attention, toutefois, à modifier le numZoomLevels avec la couche TERRAIN : vous devrez mettre 16 au lieu de 22 car cette couche n’a pas le même niveau de détail que les autres. Essayez de laisser 22 et vous verrez un drôle de comportement si vous zoomez…

Utiliser MapBox

Concernant MapBox, c’est un peu différent : vous allez avoir d’un besoin d’un connector qui vous est fourni par MapBox, via une librairie JS qui répond au doux nom de Wax. Téléchargez Wax, récupérez le fichier dist/wax.ol.min.js et chargez le dans votre projet. Pour le reste de la manip’, suivez la syntaxe suivante :

<script type="text/javascript" src="js/wax/wax.ol.min.js"></script>

...

var coucheMB;
wax.tilejson(
	'http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets.jsonp',
	function(tilejson)
	{
		coucheMB = new wax.ol.connector(tilejson);
		cartographie.addLayer(coucheMB);
	}
);

Là encore, vous pouvez charger pareillement les autres couches gérées par MapBox en modifiant l’URL du fichier « .jsonp ». Pour rappel, vous pouvez aussi, sur MapBox (même avec un compte gratuit), construire votre propre mise en forme des données OSM, puis les charger dans OpenLayers comme je viens de le décrire !

Démonstration

http://labs.adrienvh.fr/blog/ol_google_mapbox/