Calque de carte de densité

Sélectionnez une plate-forme : Android iOS JavaScript
  1. Présentation
  2. Charger la bibliothèque de visualisations
  3. Ajouter des points de données pondérés
  4. Personnaliser un calque de carte de densité

Le calque de carte de densité fournit un rendu côté client des cartes de densité.

Présentation

Une carte de densité est une visualisation utilisée pour représenter l'intensité des données sur certains points géographiques. Lorsque le calque de carte de densité 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.

Charger la bibliothèque de visualisations

Le calque de carte de densité fait partie de la bibliothèque google.maps.visualization, et n'est pas chargé par défaut. Les classes de visualisation constituent une bibliothèque autonome, distincte du code principal de l'API Maps JavaScript. Pour utiliser la fonctionnalité contenue dans cette bibliothèque, vous devez d'abord la charger à l'aide du paramètre libraries dans l'URL d'amorçage de l'API Maps JavaScript :

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

Ajouter un calque de carte de densité

Pour ajouter un calque de carte de densité, vous devez d'abord créer un objet HeatmapLayer et lui fournir des données géographiques sous la forme d'un tableau ou d'un objet MVCArray[]. Les données peuvent être des objets LatLng ou 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 de densité peut afficher des objets LatLng ou WeightedLocation, ou une combinaison des deux. Les deux objets représentent un seul point de données sur une carte. Vous pouvez également utiliser un objet WeightedLocation pour spécifier une pondération pour ce point de données. Si vous appliquez une pondération à un point de données, WeightedLocation s'affiche avec une intensité supérieure à celle d'un objet LatLng simple. La pondération est une échelle linéaire, dans laquelle chaque objet LatLng a une pondération implicite de 1. Ajouter une seule WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} aura le même effet qu'ajouter google.maps.LatLng(37.782, -122.441) trois fois. Vous pouvez combiner des objets weightedLocation et LatLng dans un même tableau.

Il peut être utile d'utiliser un objet WeightedLocation à la place de LatLng dans les cas suivants :

  • Vous ajoutez d'importantes quantités de données à un point géographique unique. Afficher un seul objet WeightedLocation avec une pondération de 1 000 sera plus rapide qu'afficher 1 000 objets LatLng.
  • Vous appliquez une emphase à vos données en fonction de valeurs arbitraires. Par exemple, vous pouvez utiliser des objets LatLng pour tracer les données sur les séismes, mais il est peut-être préférable d'utiliser un WeightedLocation pour mesurer la magnitude de chaque séisme 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 de carte de densité

Vous pouvez personnaliser le rendu de votre carte de densité avec les options suivantes. Pour en savoir plus, consultez la documentation sur HeatmapLayerOptions.

  • dissipating : indique si les cartes de densité disparaissent lorsque l'utilisateur zoome sur la carte. Si cette option est définie sur "false", le rayon d'influence augmente avec le niveau de zoom pour que l'intensité des couleurs soit préservée pour tout emplacement géographique donné. Sa valeur par défaut est "true".
  • gradient : dégradé de couleurs de la carte de densité, sous la forme d'un tableau de chaînes de couleurs CSS. Toutes les couleurs CSS3, y compris les couleurs RVBA, sont acceptées, à l'exception des couleurs étendues nommées et des valeurs HSL(A).
  • maxIntensity : intensité maximale de la carte de densité. Par défaut, les couleurs d'une carte de densité 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 être utile lorsque votre jeu de données contient un certain nombre de valeurs aberrantes à l'intensité inhabituellement élevée.
  • radius : rayon d'influence de chaque point de données, en pixels.
  • opacity : opacité de la carte de densité, 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 un exemple