Capa del mapa de calor

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Seleccionar plataforma: Android iOS JavaScript
  1. Descripción general
  2. Cómo cargar la biblioteca de visualización
  3. Agregar puntos de datos promediados
  4. Cómo personalizar una capa del mapa de calor

La capa del mapa de calor permite la representación de mapas de calor por parte de los clientes.

Descripción general

Un mapa de calor es una visualización que se usa para representar la intensidad de los datos en puntos geográficos. Cuando la capa del mapa de calor esté habilitada, aparecerá una superposición de colores sobre el mapa. De manera predeterminada, las áreas de mayor intensidad se mostrarán de color rojo, y las áreas de menor intensidad aparecerán de color verde.

Cargar la biblioteca de visualizaciones

La capa del mapa de calor forma parte de la biblioteca google.maps.visualization y no se carga de forma predeterminada. Las clases de visualización son una biblioteca independiente separada del código principal de la API de Maps JavaScript. Para usar la funcionalidad que contiene esta biblioteca, primero debes cargarla con el parámetro libraries en la URL de arranque de la API de Maps JavaScript:

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

Agregar una capa del mapa de calor

Para agregar una capa del mapa de calor, primero debes crear un objeto HeatmapLayer nuevo y proporcionar algunos datos geográficos en forma de arreglo o objeto MVCArray[]. Los datos pueden ser un objeto LatLng o un objeto WeightedLocation. Después de crear una instancia del objeto HeatmapLayer, agrégalo al mapa mediante una llamada al método setMap().

En el ejemplo siguiente se agregan 14 puntos de datos a un mapa 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);

Agregar puntos de datos promediados

Un mapa de calor puede renderizar objetos LatLng o WeightedLocation, o una combinación de ambos. Ambos objetos representan un único dato en un mapa, pero un objeto WeightedLocation te permite especificar un peso para ese dato adicional. Aplicar un peso a un dato hará que WeightedLocation se procese con una mayor intensidad que un objeto LatLng simple. El peso es una escala lineal, en la que cada objeto LatLng tiene un peso implícito de 1. Si agregas un solo WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3}, tendrá el mismo efecto que agregar google.maps.LatLng(37.782, -122.441) tres veces. Puedes combinar objetos weightedLocation y LatLng en un solo arreglo.

El uso de un objeto WeightedLocation en lugar de un LatLng puede ser útil en los siguientes casos:

  • Se agregan grandes cantidades de datos en una única ubicación. Procesar un solo objeto WeightedLocation con un peso de 1,000 será más rápido que procesar 1,000 objetos LatLng.
  • Se aplica énfasis a tus datos conforme a valores arbitrarios. Por ejemplo, puedes usar objetos LatLng cuando trazas datos de terremotos, pero es posible que quieras usar un WeightedLocation para medir la magnitud de cada terremoto en la escala más enriquecida.
/* 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);

Personalizar una capa del mapa de calor

Puedes personalizar cómo se renderizará tu mapa de calor con las siguientes opciones de mapas de calor. Consulta la documentación de HeatmapLayerOptions para obtener más información.

  • dissipating: Especifica si los mapas de calor se disipan con el zoom. Cuando la disipación es falsa, el radio de influencia aumenta con el nivel de zoom para garantizar que la intensidad del color se conserve en cualquier ubicación geográfica. El valor predeterminado es verdadero.
  • gradient: El gradiente de color del mapa de calor, especificado como un arreglo de strings de color CSS. Se admiten todos los colores CSS3, incluido RGBA, excepto los colores extendidos con nombre y los valores HSL(A).
  • maxIntensity: La intensidad máxima del mapa de calor. De forma predeterminada, los colores del mapa de calor se escalan de forma dinámica según la mayor concentración de puntos de cualquier píxel específico en el mapa. Esta propiedad te permite especificar un máximo fijo. Configurar la intensidad máxima puede ser útil cuando tu conjunto de datos contiene valores atípicos con una intensidad inusualmente alta.
  • radius: El radio de influencia de cada dato, en píxeles.
  • opacity: la opacidad del mapa de calor, expresada como un número entre 0 y 1.

En el siguiente ejemplo se muestran algunas de las opciones de personalización disponibles.

Ver ejemplo