Un fond de carte Google Maps avec Leaflet

C’est l’été donc je glande. Ou tout du moins je teste des trucs plus ou moins improbables. Mais on ne sait jamais, certains pourraient se montrer utile à l’occasion.
C’est le cas d’un plugin pour Leaflet qui permet d’utiliser Google Maps comme fond de carte.

 

Le plugin en question

Pour un développeur une bonne petite balade sur le Web finit toujours sur Github, ou presque. c’est donc là que vous pourrez télécharger et forker ce plugin qui permet d’utiliser Google Maps comme serveur de tuiles pour vos applications avec Leaflet.

Le projet chez GitHub : https://gist.github.com/crofty/2197701

Utilité de la chose

Outre passer le temps un long week-end férié et en partir pluvieux (la pluie est tombée dès que les Allemands ont marqué face à l’Argentine, curieux ! ?) disposer d’un serveur de tuiles gratuit, mais non libre, peut être utile pour dépanner. Si comme moi vous utilisez un serveur chez un tiers (Mapbox) il peut arriver que votre application soit bloquée, car le quota de téléchargement est atteint. Google Maps sera donc utilisé le temps de remettre les compteurs à zéro.
En même temps grâce à ce plugin il devient facile d’afficher des photos satellites.

Le code

Comme c’est toujours le cas avec le JavaScript il faudra créer un lien vers les API, celles de Google Maps, et du plugin.


<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

Pour ce qui concerne Leaflet vous pouvez lire mes autres tutoriels pour les détails.

Pour utiliser les tuiles Google il suffit de créer un layer et de l’ajouter à la carte.


var googleLayerROADMAP = new L.Google('ROADMAP');

Il existe quatre types de carte, les cartes routières (roadmap), les cartes de photos satellites (satellite), les cartes hybrides c’est-à-dire des photos satellites avec le tracé des routes (hybrid), des cartes topographies (terrain).
Il est intéressant de créer ces quatre layers.


var googleLayerROADMAP = new L.Google('ROADMAP');
var googleLayerSATELLITE = new L.Google('SATELLITE');
var googleLayerHYBRID  = new L.Google("HYBRID");
var googleLayerTERRAIN = new L.Google('TERRAIN');

Une fois les layers créés on instancie la carte.


var map = new L.Map('map', 
	{
		center: new L.LatLng(42.63685, 2.59415),
		zoom: 9,
		layers: [googleLayerROADMAP]
	});

Au chargement de la carte c’est le layer « roadmap » qui sera affiché, mais vous pouvez en afficher un autre. Selon votre bon plaisir évidemment.

Changer de fond de carte

Dans une application il peut être intéressant de permettre aux internautes de choisir le fond de carte. Avec Leaflet c’est très simple à réaliser.

Dans un premier temps on va créer un tableau qui contiendra le nom de chaque calque et la variable correspondante. Le choix du nom est à la discrétion du développeur.


var baseMap = {
    "Route" : googleLayerROADMAP,
    "Satellite" : googleLayerSATELLITE,
    "Hybride" : googleLayerHYBRID,
    "Relief" : googleLayerTERRAIN
};

Une fois le tableau créé il suffit d’ajouter les contrôles à la carte.


L.control.layers(baseMap, null, { collapsed: false }).addTo(map);

La fonction control.layers() accepte trois arguments. Le premier correspond au tableau contenant les fonds de carte. Le deuxième argument correspond au tableau contenant les layers de données, j’en parlerai dans un autre billet. Si l’un de ces arguments n’est pas présent il suffira de mettre « null » à la place.
Le troisième argument, facultatif, contient les options de présentation. Par exemple pour que le menu soit affiché en permanence il suffit de passer la valeur « false » à l’option « collapsed », la valeur par défaut étant « true ».

Le code complet de l'exemple



	<script src="http://www.philippe-poisse.eu/cartes/leaflet/leaflet.js"></script>
	<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
	<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<script type='text/javascript'>


var googleLayerROADMAP = new L.Google('ROADMAP');
var googleLayerSATELLITE = new L.Google('SATELLITE');
var googleLayerHYBRID  = new L.Google("HYBRID");
var googleLayerTERRAIN = new L.Google('TERRAIN');



var baseMap = {
    "Route" : googleLayerROADMAP,
    "Satellite" : googleLayerSATELLITE,
    "Hybride" : googleLayerHYBRID,
    "Relief" : googleLayerTERRAIN
};


var map = new L.Map('map_tuto', 
	{
		center: new L.LatLng(42.63685, 2.59415),
		zoom: 9,
		layers: [googleLayerROADMAP]
	});

//Contrôles pour les layers contenant les données.
var overlaysMaps = {

};

L.control.layers(baseMap, null, { collapsed: false }).addTo(map);

</script>



Votre carte est prête, il ne restera plus qu’à y insérer des marqueurs.

Commentaires

1. Le mercredi, juillet 8 2015, 17:02 par Cedric

Bonjour,

Excellent tuto, cependant lorsque j'applique le ROADMAP google avec l'affiche des polygones, il y a un temps de réaction différents entre la carte ROADMAP google et les polygones lors d'un zoom/dézoom.
Les polygones s'affiche normalement, tandis que la carte ROADMAP google mets plus de temps à réagir.

Merci de votre aide
Cedric

2. Le lundi, janvier 23 2017, 11:27 par brunet

Bonjour,

merci pour ce tuto complet.

Aprés mise en place tout fonctionne OK, mais au bout de quelques jours le fond de carte disparait pour laisser un fond gris le marqueur est présent mais plus la carte

Avez vous une piste ?

merci par avance

laurent Brunet

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

La discussion continue ailleurs

URL de rétrolien : http://blog.philippe-poisse.eu/index.php?trackback/93

Fil des commentaires de ce billet