Heatmap: Mapa de Calor personalizado en Google Maps

Byadmin

Heatmap: Mapa de Calor personalizado en Google Maps

Última actualización: septiembre 15th, 2020 - 08:13 pm

Noticias SEO

Heatmap: Mapa de Calor personalizado en Google Maps

LOCAL SEO

¿Cómo personalizar un mapa de calor en Google Maps?

Con la API de Google Maps puedes personalizar tu propio mapa de calor. Un mapa de calor es una representación gráfica en escala de colores para representar la temperatura en una zona geográfica determinada.
Las áreas de mayor intensidad de temperatura se colorearán en rojo y las áreas de menor intensidad aparecerán en verde.
Un mapa de calor personalizado en Google Maps puede ser de gran utilidad para los servicios de un consultor agricultor, empresa agropecuaria, prevención de incendios forestales, detectar cambios en la biodiversidad o para empresas que necesitan tomar decisiones basadas en los cambios de temperatura.

Personalizar un Mapa de Calor en Google Maps

  • API key: Para generar un mapa de calor personalizado o Heatmap es necesario obtener una API key para utilizar en Google Maps.
  • Librería de visualización: Para personalizar el Mapa de Calor es necesario agregar una librería específica, la cual no viene por defecto en Google Maps.Agregegar la librería necesaria para personalizar  el Mapa y agregarla en el front-end:
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>
  • Crear un objeto HeatmapLayer y proporcionarle los valores geográficos necesarios en una matriz de datos tipo Array o un objeto MVCArray []
  • Agregar puntos de datos ponderados con Weigh: WeightedLocation permite especificar un peso para un determinado punto de datos. WeightedLocation hará que se represente con mayor intensidad que un simple objeto LatLng. LatLng tiene por defecto un grado de Weight = 1;  Puede utilizar Weight cuando necesita resaltar una zona específica.

Código ejemplo JavaScript (MIAMI)

var heatMapData = [
  {location: new google.maps.LatLng(25.760,-80.193), weight: 0.5},
  new google.maps.LatLng(25.760,-80.192),
  {location: new google.maps.LatLng(25.760,-80.190), weight: 2},
  {location: new google.maps.LatLng(25.760,-80.189), weight: 3},
  {location: new google.maps.LatLng(25.760,-80.187), weight: 2},
  new google.maps.LatLng(25.760,-80.186),
  {location: new google.maps.LatLng(25.760,-80.184), weight: 0.5}
];
/*Centrar la zona del mapa*/
var miami = new google.maps.LatLng(25.7607649,-80.192208);

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

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

mapa de calor
Prueba un ejemplo en ejecución

About the author

admin administrator

Leave a Reply