Les calques sont des objets ajoutés sur une carte. Composés d'un ou de plusieurs éléments séparés, ils sont toutefois manipulés ensemble en tant qu'unité. Les calques représentent généralement des collections d'objets que vous ajoutez au-dessus d'une carte pour désigner des associations communes. L'API Maps JavaScript gère la présentation des objets au sein des calques en affichant leurs éléments constitutifs dans un objet (généralement une superposition de tuiles) et en les affichant lorsque la fenêtre d'affichage de la carte change. Les calques peuvent également influer sur le calque de présentation de la carte elle-même, en modifiant légèrement les tuiles de base pour les rendre cohérentes avec le calque. Notez que par nature, la plupart des calques ne sont pas accessibles individuellement via leurs objets respectifs. Ils ne peuvent être manipulés qu'ensemble en tant qu'unité.
Présentation des calques
L'API Maps JavaScript comporte plusieurs types de calques :
- Le calque Google Maps Data fournit un conteneur pour les données géospatiales arbitraires. Vous pouvez utiliser le calque Data pour stocker des données personnalisées ou pour afficher des données GeoJSON sur une carte Google.
- Le calque Heatmap affiche des données géographiques dans une carte de densité.
- Le calque KML permet d'afficher les éléments KML et GeoRSS dans une superposition de tuiles de l'API Maps JavaScript.
- Le calque Traffic affiche les conditions de circulation sur la carte.
- Le calque Transit affiche le réseau de transports en commun de votre ville sur la carte.
- L'objet de calque Bicycling affiche un calque des pistes cyclables et/ou des superpositions spécifiques aux vélos dans un calque commun. Ce calque est renvoyé par défaut dans DirectionsRenderer lorsque vous demandez un itinéraire en mode de transport À VÉLO.
Ajouter un calque
Pour ajouter un calque à une carte, il vous suffit d'appeler setMap() en lui transmettant l'objet map sur lequel afficher le calque. De même, pour masquer un calque, appelez setMap() en transmettant null.
L'extrait ci-dessous centre la carte sur Londres, au Royaume-Uni, et ajoute le calque Transit.
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.5,-0.11)
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);