Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Calque Heatmap

  1. Présentation
  2. Charger la bibliothèque de visualisations
  3. Ajouter des points de données pondérés
  4. Personnaliser un calque Heatmap

Le calque Heatmap fournit un rendu côté client des cartes thermiques.

Présentation

Une carte thermique est une visualisation utilisée pour représenter l'intensité des données sur certains points géographiques. Lorsque le calque Heatmap est activé, une superposition en couleur s'affiche au-dessus de la carte. Par défaut, les zones à plus forte densité apparaissent en rouge et les zones à plus faible densité apparaissent en vert.

Google Maps JavaScript API peut effectuer le rendu des données de carte thermique soit côté client via le calque Heatmap, soit côté serveur via un calque Fusion Table. Vous trouverez ci-dessous quelques-unes des principales différences entre les deux méthodes :

Calque Heatmap Calque Fusion Table
Un nombre important de points de données peut impacter les performances. L'augmentation du nombre de points de données a peu d'impact sur les performances.
Possibilité de personnaliser l'aspect de la carte thermique en modifiant des options telles que le gradient de couleur, le rayon des points de données et l'intensité de chaque point de données. Impossibilité de personnaliser l'aspect de la carte thermique.
Possibilité de contrôler si les données de carte thermique disparaissent ou non aux niveaux de zoom supérieurs. Toutes les données de carte thermique disparaissent lorsque l'on effectue un zoom avant.
Les données peuvent être stockées avec votre code HTML ou sur un serveur, ou encore calculées à la volée. Les données peuvent être modifiées à l'exécution. Toutes les données doivent être stockées dans un tableau Fusion Table. La modification des données à l'exécution est complexe.

Charger la bibliothèque de visualisations

Le calque Heatmap fait partie de la bibliothèque google.maps.visualization et n'est pas chargé par défaut. Les classes Visualization constituent une bibliothèque autonome, séparée du code Google Maps JavaScript API principal. Pour utiliser les fonctionnalités contenues dans cette bibliothèque, vous devez d'abord la charger en utilisant le paramètre libraries dans l'URL bootstrap de Maps JavaScript API :

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Ajouter un calque Heatmap

Pour ajouter un calque Heatmap, vous devez d'abord créer un nouvel objet HeatmapLayer et lui fournir des données géographiques sous la forme d'un tableau ou d'un objet MVCArray[]. Ces données peuvent être soit un objet LatLng, soit un objet WeightedLocation. Après avoir instancié l'objet HeatmapLayer, ajoutez-le à la carte en appelant la méthode setMap().

L'exemple suivant montre l'ajout de 14 points de données à une carte de San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Ajouter des points de données pondérés

Une carte thermique peut afficher soit un objet LatLng soit un objet WeightedLocation, ou une combinaison des deux. Si les deux objets représentent un seul point de données sur une carte, un objet WeightedLocation vous permet en plus de spécifier une pondération pour ce point de données. Appliquer une pondération à un point de données permet à l'objet WeightedLocation d'avoir un rendu plus intense qu'un simple objet LatLng. La pondération est une échelle linéaire, dans laquelle chaque objet LatLng a une pondération implicite de 1. L'ajout d'un seul objet WeightedLocation avec la pondération {location: new google.maps.LatLng(37.782, -122.441), weight: 3} a le même effet qu'ajouter trois fois google.maps.LatLng(37.782, -122.441). Vous pouvez combiner des objets weightedLocation et LatLng dans un même tableau.

Utiliser un objet WeightedLocation à la place d'un objet LatLng peut s'avérer utile lorsque vous :

  • Ajoutez d'importantes quantités de données à un point géographique unique. Le rendu d'un objet WeightedLocation unique avec une pondération de 1 000 est en effet plus rapide que le rendu de 1 000 objets LatLng.
  • Appliquez une emphase à vos données en fonction de valeurs arbitraires. Par exemple, vous pouvez utiliser des objets LatLng lorsque vous représentez des données de séisme, mais préférer un objet WeightedLocation pour mesurer la magnitude de chaque tremblement de terre sur l'échelle de Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Personnaliser un calque Heatmap

Vous pouvez personnaliser le rendu de votre carte thermique avec les options suivantes. Pour plus d'informations, voir la documentation HeatmapLayerOptions.

  • dissipating : Indique si les calques de carte thermique disparaissent lorsque l'on zoome sur la carte. Si cette option est définie sur « false », le rayon d'influence augmente avec le niveau de zoom pour veiller à ce que l'intensité des couleurs soit préservée pour tout point géographique donné. Par défaut, cette valeur est « false ».
  • gradient : Définit le gradient de couleurs de la carte thermique, sous la forme d'un tableau de chaînes de couleurs CSS. Toutes les couleurs CSS3, y compris les couleurs RGBA, sont prises en charge, à l'exception des noms de couleurs étendus et des valeurs HSL(A).
  • maxIntensity : Indique l'intensité maximale de la carte thermique. Par défaut, les couleurs d'une carte thermique sont ajustées de façon dynamique en fonction de la plus grande concentration de points à n'importe quel pixel donné sur la carte. Cette propriété vous permet de spécifier un maximum fixe. Définir l'intensité maximale peut s'avérer utile lorsque votre jeu de données contient un certain nombre d'éléments aberrants à l'intensité inhabituellement élevée.
  • radius : Indique le rayon d'influence de chaque point de données, en pixels.
  • opacity : Définit l'opacité de la carte thermique, exprimée sous la forme d'une valeur comprise entre 0 et 1.

L'exemple ci-dessous montre certaines des options de personnalisation disponibles.

Voir l'exemple de calque Heatmap

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.