Los mapas actuales ya no son solo imágenes estáticas: hoy puedes superponer capas personalizadas, mapas de calor y visualizaciones avanzadas que convierten tus datos en información clara y accionable. Tanto si trabajas con ubicaciones de clientes, delitos, incidencias técnicas o comportamiento de usuarios en una web, una buena implementación de estas capas puede marcar la diferencia entre ver “puntos sueltos” y detectar patrones reales.
En este artículo vamos a ver, con bastante detalle y con un enfoque práctico, cómo funcionan las capas personalizadas y los mapas de calor en distintos tipos de mapas: desde APIs de mapas como Google Maps, QGIS o Azure Maps, hasta heatmaps específicos de analítica web como Hotjar o plugins de WordPress. Verás para qué sirven, qué ventajas tienen, cómo configurarlos correctamente y en qué casos conviene usarlos… o evitarlos.
¿Qué es un mapa de calor y para qué sirve en cartografía?
Un mapa de calor geográfico es una forma de visualizar la intensidad o densidad de datos sobre un mapa utilizando colores. Las zonas con más concentración de puntos aparecen con tonos más cálidos (rojos, naranjas), mientras que las zonas con menos densidad se representan con colores más fríos (verdes, azules o grises, según el estilo).
Este tipo de visualización es ideal cuando trabajas con datos de puntos muy densos que se solapan: ubicaciones de delitos, accidentes de tráfico, viviendas, incidencias en campo, sensores IoT, clientes, etc. En lugar de ver miles de marcadores individuales que no dicen nada, ves manchas de color que dejan claro de un vistazo dónde se concentran los eventos.
Ahora bien, un mapa de calor es sobre todo una herramienta visual, no un análisis preciso de densidad. Es perfecto para explorar datos o presentarlos de forma rápida a personas no técnicas, pero cuando necesitas resultados cuantitativos exactos suele ser mejor pasar a un cálculo de densidad más formal (por ejemplo, estimación de densidad de núcleo en ráster).
Implementación de mapas de calor con la API de Google Maps
Dentro del ecosistema de Google, la API de Maps para JavaScript ha ofrecido durante años una capa específica de HeatmapLayer para representar mapas de calor directamente sobre un mapa interactivo. Aunque esta funcionalidad está marcada como obsoleta y dejará de estar disponible en mayo de 2026, su modo de uso y sus conceptos siguen siendo muy útiles, y hoy en día se pueden replicar mediante librerías de terceros como deck.gl.
Carga de la biblioteca de visualización
La capa de mapa de calor de Google Maps no se carga por defecto: forma parte de la biblioteca google.maps.visualization. Para utilizarla, hay que añadir el parámetro correspondiente en la URL de carga de la API de Maps JavaScript, incluyendo también la callback que inicializa el mapa.
La idea general es cargar el script de la API con algo como: una URL con el parámetro libraries=visualization y una función initMap como callback. Una vez cargada la biblioteca, tendrás disponible la clase HeatmapLayer para crear tu mapa de calor.
Creación básica de una capa de mapa de calor
El flujo típico para crear un mapa de calor con la API es bastante directo: primero inicializas el mapa base, luego construyes un listado de puntos y, por último, creas la capa de calor y la asocias al mapa.
En la práctica, defines un array de objetos google.maps.LatLng con las coordenadas de tus puntos (por ejemplo, varias ubicaciones en San Francisco), configuras el mapa con centro, nivel de zoom y tipo de mapa, y creas un nuevo objeto google.maps.visualization.HeatmapLayer pasando la lista de puntos como propiedad data. Finalmente, llamas a setMap(map) para que esa capa se muestre sobre el mapa.
El resultado es una superposición de color sobre el mapa satélite o de callejero en la que las zonas con mayor concentración de puntos se verán más “calientes”, siguiendo el gradiente de color establecido por defecto o el que tú definas.
Datos ponderados: LatLng vs WeightedLocation
La API de Google Maps para JavaScript permite que la capa de mapa de calor trabaje no solo con LatLng simples, sino también con objetos WeightedLocation. Ambos representan un punto en el mapa, pero WeightedLocation añade una propiedad de peso (weight) que controla la “fuerza” con la que ese punto contribuye al mapa de calor.
Por defecto, cada LatLng actúa como si tuviese un peso implícito de 1. Si en lugar de agregar tres veces el mismo punto LatLng, usas una sola WeightedLocation con weight: 3, el efecto en el mapa será equivalente, pero más eficiente a nivel de rendimiento, sobre todo cuando manejas grandes volúmenes de datos en un mismo lugar.
Esta ponderación resulta útil en situaciones como: resaltar la magnitud de ciertos eventos (por ejemplo, terremotos más intensos), representar múltiples observaciones en una misma ubicación sin repetir puntos, o dar más importancia a incidencias críticas frente a otras menores.
Además, es posible mezclar en el mismo array objetos LatLng y WeightedLocation. Así, puedes dejar la mayoría de puntos con peso estándar y destacar solo algunos eventos clave elevando su peso.
Opciones de personalización de la capa de mapa de calor
La clase HeatmapLayer ofrece varias opciones para ajustar el aspecto y el comportamiento de la capa. Algunas de las más importantes son:
- dissipating: indica si el mapa de calor debe “disiparse” al hacer zoom. Con el valor verdadero (por defecto), el radio en píxeles se mantiene constante y, al acercarte, las manchas ocupan menos superficie geográfica. Si se establece en falso, el radio aumenta con el zoom para preservar la intensidad del color en una localización concreta.
- gradient: permite definir el gradiente de color como un array de cadenas CSS (por ejemplo, valores RGBA). Esto te da control total para crear mapas de calor más suaves, más agresivos o adaptados a la identidad visual de tu aplicación.
- maxIntensity: por defecto, los colores se escalan de manera dinámica en función de la máxima concentración de puntos de un píxel. Con esta opción puedes fijar una intensidad máxima estática, muy útil cuando hay valores atípicos muy altos que deforman todo el mapa.
- radius: define el radio de influencia de cada punto en píxeles. Radios pequeños muestran focos muy concentrados, mientras que radios grandes suavizan el mapa, generando manchas más amplias.
- opacity: controla la opacidad global de la capa de calor, con valores entre 0 y 1. Bajando la opacidad puedes ver mejor el mapa base y otros elementos que haya debajo.
En conjunto, estos parámetros te permiten adaptar la visualización para que el mapa de calor responda exactamente a lo que quieres destacar: alta concentración puntual, patrones muy extensos, diferencias leves entre áreas, etc.
Fin de soporte y alternativas con deck.gl
Es importante tener presente que la capa HeatmapLayer de la API de Google Maps JavaScript está obsoleta. La función dejó de estar admitida en mayo de 2025 y se eliminará completamente en una versión futura de la API prevista para mayo de 2026.
Como alternativa, Google recomienda usar integraciones con bibliotecas de terceros como deck.gl, que incluyen una implementación de HeatmapLayer y otras capas avanzadas. Estas soluciones permiten crear visualizaciones de alta calidad sobre mapas, con soporte para datos complejos, grandes volúmenes y animaciones, y se integran bien con frameworks modernos de desarrollo web.
Mapas de calor avanzados y capas personalizadas en QGIS
Cuando necesitas ir un paso más allá y hacer análisis espacial más completo y preciso, QGIS es una herramienta de referencia. Permite estilizar capas de puntos con un representador de mapa de calor “en vivo”, y también generar rásteres de densidad de núcleo para análisis más formales.
Estilizar una capa de puntos como mapa de calor
Imagina que trabajas con un CSV de ubicaciones de delitos en Surrey (Reino Unido). El flujo en QGIS, a grandes rasgos, sería:
Primero cargas un mapa base, por ejemplo la capa de OpenStreetMap desde la sección XYZ Tiles, arrastrándola al lienzo principal. Después importas los datos CSV desde el Administrador de fuentes de datos, usando la pestaña de texto delimitado, indicando el archivo descargado (por ejemplo 2019-02-surrey-street.csv).
QGIS detecta automáticamente las columnas de Longitud y Latitud para definir la geometría, y el sistema de referencia suele establecerse en EPSG:4326 – WGS 84. Tras añadir la capa, verás los puntos de incidentes sobre el mapa base, pero con tanta densidad resulta difícil apreciar la concentración de delitos.
Para convertir esta nube de puntos en un mapa de calor, abres el panel de Estilo de Capa de la capa de puntos y cambias el tipo de representador a “Mapa de Calor”. De inmediato, la capa se muestra usando una rampa de color (normalmente gris por defecto), y puedes ir ajustando la configuración viendo los cambios en tiempo real.
Selección de rampa de color y radio de influencia
En un mapa de calor típico, la gente suele usar una escala amarillo-rojo o blanco-rojo para que las áreas más intensas “salten” visualmente. En QGIS puedes elegir, por ejemplo, la rampa “Reds” desde el desplegable de rampa de color del panel de estilo.
El parámetro clave es el radio, que establece el entorno circular alrededor de cada punto dentro del cual ese punto ejerce su influencia. En datos como delitos o incidencias, este valor tiene mucho sentido físico: por ejemplo, puedes asumir que un incidente tiene impacto en un radio de 5 km alrededor de su ubicación.
Si tu proyecto está en un sistema como EPSG:3857 (Web Mercator), las unidades son metros, así que indicarías 5000 como radio para esos 5 km. Cambiar este parámetro modifica de forma evidente la suavidad del mapa: radios muy pequeños generan manchas muy localizadas; radios grandes producen zonas más amplias y difusas.
Detrás de este cálculo hay una función de núcleo (kernel) que define cómo decae la influencia desde el centro del punto hasta el borde del radio. El representador de mapa de calor de QGIS usa por defecto un núcleo cuártico, pero existen otros como Triangular, Uniforme, Tripeso o Epanechnikov, que puedes utilizar cuando generas mapas de calor a través del algoritmo de procesamiento de densidad de núcleo.
Ajuste de opacidad y uso de campos de peso
Para ver a la vez el mapa base y la capa de calor, puedes reducir la opacidad de la capa de mapa de calor desde la sección de representación de capa, por ejemplo a un 60 %. Así sigues apreciando calles, edificios o límites administrativos.
En algunos análisis basta con considerar la densidad de puntos tal cual, pero en otros es esencial que cada punto tenga una importancia diferente. Un delito violento, por ejemplo, no debería pesar lo mismo que un robo menor, o un punto puede representar varias observaciones acumuladas.
QGIS permite añadir un campo de peso numérico a la tabla de atributos y utilizarlo en la representación del mapa de calor. Una forma elegante de hacerlo es crear un campo virtual con la Calculadora de campos: seleccionas la opción de crear un nuevo campo, lo llamas “weight”, escoges tipo entero y usas una expresión CASE para asignar pesos distintos según el tipo de crimen (usando el campo “Crime type”).
Al aplicar esta expresión, se genera un nuevo atributo virtual sin modificar los datos originales. En el panel de estilo, puedes indicar que los puntos se ponderen por el campo weight. El resultado es un mapa de calor que refleja no solo la cantidad de incidentes sino también su gravedad relativa.
Generar mapas de calor ráster con estimación de densidad de núcleo
Cuando necesitas un resultado más sólido para análisis o informes, en lugar de limitarte a la visualización en pantalla, puedes usar el algoritmo de Mapa de calor (Estimación de Densidad de Núcleo) en la Caixa de herramientas de procesos de QGIS. Este algoritmo genera una capa ráster con valores de densidad calculados.
Antes de correr el algoritmo conviene reproyectar la capa de puntos a un SRC proyectado apropiado para la zona, ya que el cálculo de distancias sobre coordenadas geográficas no es adecuado. Por ejemplo, para datos en Reino Unido, una opción habitual es EPSG:27700 (OSGB 1936 / British National Grid).
Tras reproyectar (mediante el proceso de “Reproyectar capa”), creas la nueva capa y desactivas la original para evitar confusiones. A continuación, buscas el algoritmo de Mapa de calor (estimación de densidad de núcleo), defines el radio (por ejemplo, 5000 metros), el campo de peso (weight si lo has creado) y los tamaños de píxel en X e Y (por ejemplo, 50 metros). Dejas el núcleo cuártico por defecto o lo ajustas según las necesidades de tu análisis.
Al ejecutar el algoritmo se genera una nueva capa ráster (por ejemplo, llamada OUTPUT). Inicialmente suele mostrarse con un representador de gris de banda única que no es muy atractivo. Desde el panel de estilo puedes cambiar el renderizado a “Pseudocolor de banda única”, elegir de nuevo una rampa como “Reds” y ajustar el contraste hasta conseguir un mapa de calor visualmente claro y útil.
Uso de mapas de calor en análisis geoespacial empresarial
Más allá del GIS de escritorio, muchos entornos empresariales incluyen visualizaciones de mapas de calor en paneles interactivos para analizar datos de negocio. Un ejemplo típico es estudiar los ingresos por región o el potencial de ventas de una cadena de retail.
Estos mapas de calor permiten responder preguntas como: ¿dónde se concentran los clientes que más gastan?, ¿en qué zonas se acumulan incidencias?, ¿qué regiones tienen más margen de crecimiento?. Sin embargo, suelen entenderse como una ayuda visual y es recomendable complementarlos con otros gráficos como series temporales, tablas comparativas o histogramas.
En plataformas analíticas se suele recomendar que, si el mapa tiene más de unos 2000 puntos, en lugar de mostrar un mapa de calor directo sea preferible usar un cálculo de densidad u otro tipo de agregación. De este modo se evitan problemas de rendimiento y se obtiene una representación más estable.
Interacción con paneles: filtros, selección y sincronización
En muchas herramientas de BI o de análisis de datos espaciales, los mapas de calor se insertan como tarjetas o widgets dentro de un cuadro de mando. Estos componentes ofrecen una serie de controles para sacarle todo el partido a la visualización:
- El panel de Opciones de capa permite expandir leyendas, cambiar simbología, modificar campos y acceder a parámetros como apariencias, filtros o atributos.
- La pestaña de Leyenda muestra el gradiente de colores y el valor asociado a los extremos, facilitando entender qué se considera “alto” y “bajo”.
- Desde la pestaña de Simbología puedes cambiar el campo que se utiliza para construir el mapa de calor o convertir la visualización en otro tipo de mapa (por ejemplo, coropletas, puntos simples, etc.).
- La pestaña de Apariencia ofrece ajustes visuales: color de fondo, color de primer plano, borde de la tarjeta, rotación del mapa, inclusión o exclusión de capas de mapa base y de la flecha de norte.
- En la pestaña de Atributos se consultan los detalles de las entidades seleccionadas, ideal cuando quieres ir de la visión general al detalle concreto.
Además, suelen existir botones específicos para: filtrar datos dentro de la propia tarjeta, seleccionar entidades con diferentes herramientas (clic único, rectángulo, lazo), aplicar zoom a la selección, invertirla, cambiar de tipo de visualización (de mapa a gráfico de barras, tabla, etc.), sincronizar la extensión de varios mapas, maximizar la tarjeta o activar los filtros cruzados (de forma que lo que seleccionas en una tarjeta filtra el resto).
Capas de mapa de calor e imágenes georreferenciadas en Azure Maps
Azure Maps proporciona funcionalidades avanzadas para trabajar con capas de mapa de calor y capas de imagen sobre mapas interactivos en la web, orientadas a desarrolladores que construyen soluciones en el ecosistema de Azure.
Visualización de densidad con capas de mapa de calor
Las capas de mapa de calor en Azure Maps se usan para representar la densidad de puntos mediante una gama de colores. Igual que en otros sistemas, permiten detectar “puntos calientes” donde la concentración de eventos o valores es más elevada.
Estas capas admiten puntos de datos ponderados, lo que significa que cada entidad puede llevar un valor que indique su importancia relativa. Así puedes resaltar, por ejemplo, sensores con lecturas extremas, clientes con mayor volumen de compras o incidentes de mayor gravedad dentro de la misma capa de datos.
Azure Maps ofrece documentación detallada y ejemplos de código para añadir y configurar estas capas, cubriendo aspectos como ajuste de gradientes de color, radios, intensidades y estilos. Al integrarlas con las APIs de datos de Azure, se convierten en una herramienta potente para monitorizar información en tiempo real.
Capas de imagen para superponer planos, mapas antiguos o capturas de dron
La capa de imagen de Azure Maps permite superponer imágenes georreferenciadas que se mueven y escalan junto con el mapa base al hacer zoom y desplazarse. Esta funcionalidad es muy útil cuando necesitas combinar cartografía moderna con capas personalizadas, como:
- Planos de planta de edificios o instalaciones industriales, con los que puedes localizar equipos, rutas de evacuación o sensores dentro de un espacio concreto.
- Mapas históricos, alineados con la cartografía actual para comparar cómo ha cambiado el territorio a lo largo del tiempo.
- Imágenes capturadas por drones, por ejemplo para inspeccionar cultivos, infraestructuras o zonas afectadas por desastres.
Con la documentación y ejemplos de Azure Maps puedes aprender a registrar estas imágenes con coordenadas adecuadas y combinarlas con otras capas vectoriales o de calor para crear visualizaciones muy ricas y específicas para cada escenario.
Mapas de calor en analítica web: UX, clics y scroll
Además de los mapas geográficos, existe otra familia de mapas de calor muy popular: los heatmaps de comportamiento de usuario en sitios web. En lugar de representar ubicaciones en el mundo real, muestran dónde hacen clic los usuarios, hasta dónde hacen scroll o cómo mueven el ratón por la página.
Estas herramientas son cruciales para mejorar la experiencia de usuario (UX) y la conversión, porque transforman métricas abstractas en imágenes claras. En vez de limitarte a tasas de rebote y duración de sesión, ves literalmente qué zonas de la página “arden” de actividad y cuáles permanecen frías.
Usos principales de los mapas de calor en webs
Entre los usos más habituales destacan varios frentes clave:
Por un lado, permiten identificar los botones y CTAs más utilizados. Cada clic se registra y se muestra con un color, de forma que los elementos más pulsados aparecen con tonos más cálidos. Esto ayuda a comprobar si los botones de llamada a la acción son realmente los protagonistas visuales o si, por el contrario, la atención se dispersa en otros elementos.
También sirven para medir hasta dónde hacen scroll los usuarios. Los mapas de calor de scroll muestran qué porcentaje de visitantes llega a cada sección de la página. Si la mayoría no baja más allá de cierto punto, quizá el contenido clave esté demasiado abajo o la página sea excesivamente larga, algo muy típico en diseños de tipo “one page”.
Otro uso importante es la detección de problemas de UX. Muchas veces los usuarios hacen clic en imágenes o textos que parecen botones pero no lo son. El mapa de calor de clics saca a la luz esos malentendidos: si ves muchas interacciones en un elemento no interactivo, probablemente toca rediseñarlo para evitar frustraciones y abandonos.
Además, los heatmaps ayudan a comparar el comportamiento entre versiones móvil y escritorio. La mayoría de herramientas permiten filtrar por dispositivo, lo que facilita ver qué elementos sobran en móvil, qué se queda demasiado escondido o qué funciona muy bien en una pantalla grande pero no tanto en un teléfono.
Por último, son excelentes aliados para test A/B de diseños o contenidos. Puedes lanzar dos versiones de una misma landing y, con solo echar un vistazo a los mapas de calor de clics, movimientos y scroll, comprobar cuál orienta mejor la atención hacia los puntos de conversión.
Tipos habituales de heatmaps en UX
Las soluciones comerciales de mapas de calor para webs suelen ofrecer tres tipos básicos:
- Mapas de desplazamiento vertical (scroll): muestran el porcentaje de visitantes que alcanza cada tramo de la página. Cuanto más cálida es una franja, más usuarios la han visto. Sirve para decidir dónde colocar CTAs, formularios o información crítica, y para detectar secciones que casi nadie llega a leer.
- Mapas de clics: indican dónde se concentran las pulsaciones en la página. Las zonas más calientes señalan elementos que atraen mucho interés (para bien o para mal). Son útiles para comprobar que los usuarios hacen clic en los enlaces correctos y para detectar “zonas trampa” donde la gente pincha sin obtener respuesta.
- Mapas de movimiento: registran la trayectoria del cursor mientras los usuarios leen o navegan. Aunque no siempre el movimiento del ratón coincide exactamente con la mirada, ofrece pistas sobre los patrones de lectura y ayuda a decidir dónde colocar titulares, imágenes clave y botones.
Dónde conviene implementar mapas de calor en tu web
No es necesario llenarlo todo de heatmaps: lo sensato es elegir páginas estratégicas donde una mejora de UX o conversión tenga más impacto. Algunos buenos candidatos son:
- La página de inicio, que suele ser la primera impresión y el hub desde el que los usuarios se distribuyen por el resto del sitio.
- Las landing pages de productos o servicios, especialmente si estás lanzando una nueva oferta y quieres validar si el diseño y el copy funcionan.
- Artículos de blog con mucho tráfico orgánico, donde un pequeño cambio en CTAs internos, banners o estructura de contenido puede disparar el rendimiento.
Cómo crear un mapa de calor para una web (ejemplo con Hotjar)
Para generar mapas de calor de tu sitio necesitas una herramienta de análisis de comportamiento que registre la actividad de los usuarios. En el mercado hay varias muy conocidas como Hotjar, Clicktale o Crazy Egg, todas con un funcionamiento bastante similar.
Si tomamos como ejemplo Hotjar, el proceso suele ser sencillo: primero te registras en su web, indicando el dominio que quieres analizar. Luego te facilitan un script único para insertar en el header de las páginas que quieras monitorizar, o bien puedes usar un plugin si trabajas con un CMS como WordPress.
Una vez instalado el script o plugin, verificas desde el panel de la herramienta que todo se ha configurado correctamente. A partir de ahí, Hotjar empieza a recopilar datos de sesiones reales y, al cabo de un tiempo, puedes consultar mapas de clics, scroll, movimiento, grabaciones de sesiones y más. Muchas de estas plataformas ofrecen periodos de prueba gratuitos de unos días, suficientes para hacerse una idea del potencial.
Plugins gratuitos de WordPress para heatmaps
Si tu web está montada en WordPress y quieres algo rápido sin depender de servicios externos para todo, existen plugins de mapas de calor gratuitos que se integran directamente en el panel de administración.
Por ejemplo, un plugin de tipo “Heatmap for WordPress” permite crear mapas de calor de hasta cinco páginas simultáneamente en su versión gratuita. Su uso suele ser muy cómodo porque se lanza desde la vista previa de las páginas cuando estás logueado, permite excluir IPs (para que tus propios clics no contaminen los datos) y, además de la visualización de zonas calientes, muestra gráficas de clics y visualizaciones por página en los últimos días.
Otro caso es “Aurora Heatmap”, con decenas de miles de instalaciones activas. Ofrece una versión gratuita que te permite ver el mapa de calor de clics también en móvil y se puede aplicar a tantas páginas como necesites, sin límite. Estas soluciones son especialmente interesantes para pequeños proyectos o blogs que desean mejorar su UX sin complicarse con herramientas de pago desde el primer día.
Ultimas consideraciones
Eso sí, conviene no perder de vista que cualquier plugin que añada scripts de seguimiento introduce un cierto coste de rendimiento. Por eso suele recomendarse usar estas herramientas de forma intensiva solo durante periodos de análisis (por ejemplo, el lanzamiento de una campaña) y no mantenerlas activas sin necesidad permanente.
Integrar de forma inteligente capas personalizadas y mapas de calor, tanto en el ámbito geoespacial como en el análisis de comportamiento web, te permite pasar de datos crudos a patrones visuales que cualquier persona puede entender de un vistazo; combinando el uso de APIs como Google Maps o Azure Maps, herramientas GIS como QGIS y soluciones de UX como Hotjar o plugins de WordPress, puedes construir ecosistemas de visualización muy potentes siempre que cuides el rendimiento, el contexto de uso y la interpretación adecuada de lo que muestran los colores. Comparte esta información para que otros usuarios conozcan del tema.