Els mapes actuals ja no són només imatges estàtiques: avui pots superposar capes personalitzades, mapes de calor i visualitzacions avançades que converteixen les teves dades en informació clara i accionable. Tant si treballeu amb ubicacions de clients, delictes, incidències tècniques o comportament d'usuaris en una web, una bona implementació d'aquestes capes pot marcar la diferència entre veure “punts solts” i detectar patrons reals.
En aquest article veurem, amb força detall i amb un enfocament pràctic, com funcionen les capes personalitzades i els mapes de calor en diferents tipus de mapes: des d'APIs de mapes com Google Maps, QGIS o Azure Maps, fins a heatmaps específics d'analítica web com Hotjar o plugins de WordPress. Veuràs per a què serveixen, quins avantatges tenen, com configurar-los correctament i en quins casos convé fer-los servir… o evitar-los.
Què és un mapa de calor i per què serveix en cartografia?
Un mapa de calor geogràfica és una forma de visualitzar la intensitat o densitat de dades sobre un mapa utilitzant colors. Les zones amb més concentració de punts apareixen amb tons més càlids (vermells, taronges), mentre que les zones amb menys densitat es representen amb colors més freds (verds, blaus o grisos segons l'estil).
Aquest tipus de visualització és ideal quan treballes amb dades de punts molt densos que se solapen: ubicacions de delictes, accidents de trànsit, habitatges, incidències a camp, sensors IoT, clients, etc. En lloc de veure milers de marcadors individuals que no diuen res, veus taques de color que deixen clar d'una ullada on es concentren els esdeveniments.
Ara bé, un mapa de calor és sobretot una eina visual, no una anàlisi precisa de densitat. És perfecte per explorar dades o presentar-les de forma ràpida a persones no tècniques, però quan necessites resultats quantitatius exactes sol ser millor passar a un càlcul de densitat més formal (per exemple, estimació de densitat de nucli en ràster).
Implementació de mapes de calor amb l'API de Google Maps
Dins l'ecosistema de Google, la API de Maps per a JavaScript ha ofert durant anys una capa específica de HeatmapLayer per representar mapes de calor directament sobre un mapa interactiu. Tot i que aquesta funcionalitat està marcada com a obsoleta i deixarà d'estar disponible el maig de 2026, el seu ús i els seus conceptes continuen sent molt útils, i avui dia es poden replicar mitjançant llibreries de tercers com deck.gl.
Càrrega de la biblioteca de visualització
La capa de mapa de calor de Google Maps no es carrega per defecte: forma part de la biblioteca google.maps.visualization. Per utilitzar-la, cal afegir el paràmetre corresponent a la URL de càrrega de l'API de Maps JavaScript, incloent-hi també la callback que inicialitza el mapa.
La idea general és carregar l'script de l'API amb alguna cosa com: una URL amb el paràmetre libraries=visualization i una funció initMap com callback. Un cop carregada la biblioteca, tindràs disponible la classe HeatmapLayer per crear el teu mapa de calor.
Creació bàsica duna capa de mapa de calor
El flux típic per crear un mapa de calor amb l'API és força directe: primer inicialitzes el mapa base, després construeixes un llistat de punts i, finalment, crees la capa de calor i l'associes al mapa.
A la pràctica, defineixes un array d'objectes google.maps.LatLng amb les coordenades dels teus punts (per exemple, diverses ubicacions a San Francisco), configures el mapa amb centre, nivell de zoom i tipus de mapa, i crees un nou objecte google.maps.visualization.HeatmapLayer passant la llista de punts com a propietat data. Finalment, crides a setMap(map) perquè aquesta capa es mostri sobre el mapa.
El resultat és una superposició de color sobre el mapa satèl·lit o de llista de carrers en què les zones amb més concentració de punts es veuran més “calents”, seguint el gradient de color establert per defecte o el que tu defineixis.
Dades ponderades: LatLng vs WeightedLocation
L'API de Google Maps per a JavaScript permet que la capa de mapa de calor treballi no només amb LatLng simples, sinó també amb objectes WeightedLocation. Tots dos representen un punt al mapa, però WeightedLocation afegeix una propietat de pes (weight) que controla la “força” amb què aquest punt contribueix al mapa de calor.
Per defecte, cada LatLng actua com si tingués un pes implícit de 1. Si en lloc d'afegir tres vegades el mateix punt LatLng, utilitzes una sola WeightedLocation amb weight: 3, l'efecte al mapa serà equivalent, però més eficient a nivell de rendiment, sobretot quan maneges grans volums de dades en un mateix lloc.
Aquesta ponderació resulta útil en situacions com: ressaltar la magnitud de certs esdeveniments (per exemple, terratrèmols més intensos), representar múltiples observacions en una mateixa ubicació sense repetir punts, o donar més importància a incidències crítiques davant d'altres menors.
A més, és possible barrejar al mateix array objectes LatLng i WeightedLocation. Així, pots deixar la majoria de punts amb pes estàndard i destacar només alguns esdeveniments clau elevant-ne el pes.
Opcions de personalització de la capa de mapa de calor
La classe HeatmapLayer ofereix diverses opcions per ajustar l'aspecte i el comportament de la capa. Algunes de les més importants són:
- dissipant-se: indica si el mapa de calor s'ha de “dissipar” en fer zoom. Amb el valor veritable (per defecte), el radi en píxels es manté constant i, en apropar-te, les taques ocupen menys superfície geogràfica. Si s'estableix en fals, el radi augmenta amb el zoom per tal de preservar la intensitat del color en una localització concreta.
- gradient: permet definir el gradient de color com un array de cadenes CSS (per exemple, valors RGBA). Això us dóna control total per crear mapes de calor més suaus, més agressius o adaptats a la identitat visual de la vostra aplicació.
- maxIntensity: per defecte, els colors s'escalen de manera dinàmica segons la màxima concentració de punts d'un píxel. Amb aquesta opció en pots fixar una intensitat màxima estàtica, molt útil quan hi ha valors atípics molt alts que deformen tot el mapa.
- radi: defineix el radi dinfluència de cada punt en píxels. Ràdios petits mostren focus molt concentrats, mentre que ràdios grans suavitzen el mapa, generant taques més àmplies.
- opacitat: controla l'opacitat global de la capa de calor, amb valors entre 0 i 1. Baixant l'opacitat pots veure millor el mapa base i altres elements que hi hagi a sota.
En conjunt, aquests paràmetres us permeten adaptar la visualització perquè el mapa de calor respongui exactament al que vols destacar: alta concentració puntual, patrons molt extensos, diferències lleus entre àrees, etc.
Final de suport i alternatives amb deck.gl
És important tenir present que la capa HeatmapLayer de l'API de Google Maps JavaScript està obsoleta. La funció va deixar d'estar admesa el maig del 2025 i s'eliminarà completament en una versió futura de l'API prevista per al maig del 2026.
Com a alternativa, Google recomana utilitzar integracions amb biblioteques de tercers com deck.gl, que inclouen una implementació de HeatmapLayer i altres capes avançades. Aquestes solucions permeten crear visualitzacions d'alta qualitat sobre mapes, amb suport per dades complexes, grans volums i animacions, i s'integren bé amb frameworks moderns de desenvolupament web.
Mapes de calor avançats i capes personalitzades a QGIS
Quan necessites anar un pas més enllà i fer anàlisi espacial més completa i precisa, QGIS és una eina de referència. Permet estilitzar capes de punts amb un representador de mapa de calor “en viu”, i també generar ràsters de densitat de nucli per a anàlisis més formals.
Estilitzar una capa de punts com a mapa de calor
Imagina que treballes amb un CSV de ubicacions de delictes a Surrey (Regne Unit). El flux a QGIS, a grans trets, seria:
Primer carregues un mapa base, per exemple la capa d'OpenStreetMap des de la secció XYZ Tiles, arrossegant-la al llenç principal. Després importes les dades CSV des de l'Administrador de fonts de dades, usant la pestanya de text delimitat, indicant el fitxer descarregat (per exemple 2019-02-surrey-street.csv).
QGIS detecta automàticament les columnes de Longitud i Latitud per definir la geometria, i el sistema de referència sol establir-se a EPSG:4326 – WGS 84. Després d'afegir-hi la capa, veuràs els punts d'incidents sobre el mapa base, però amb tanta densitat resulta difícil apreciar la concentració de delictes.
Per convertir aquest núvol de punts en un mapa de calor, obris el panell d'estil de capa de la capa de punts i canvies el tipus de representador a “Mapa de Calor”. Immediatament, la capa es mostra usant una rampa de color (normalment grisa per defecte), i pots anar ajustant la configuració veient els canvis en temps real.
Selecció de rampa de color i ràdio d'influència
En un mapa de calor típic, la gent sol fer servir una escala groc-vermell o blanc-vermell perquè les àrees més intenses “saltin” visualment. A QGIS podeu triar, per exemple, la rampa “Reds” des del desplegable de rampa de color del panell d'estil.
El paràmetre clau és el ràdio, que estableix l'entorn circular al voltant de cada punt dins del qual aquest punt exerceix la seva influència. En dades com delictes o incidències, aquest valor té molt de sentit físic: per exemple, pots assumir que un incident té impacte en un radi de 5 km al voltant de la seva ubicació.
Si el teu projecte està en un sistema com EPSG:3857 (Web Mercator), les unitats són metres, així que indicaries 5000 com a ràdio per a aquests 5 km. Canviar aquest paràmetre modifica de manera evident la suavitat del mapa: ràdios molt petits generen taques molt localitzades; ràdios grans produeixen zones més àmplies i difuses.
Darrere d'aquest càlcul n'hi ha una funció de nucli (kernel) que defineix com decau la influència des del centre del punt fins a la vora del radi. El representador de mapa de calor de QGIS utilitza per defecte un nucli quàrtic, però n'hi ha d'altres com Triangular, Uniforme, Tripés o Epanechnikov, que pots utilitzar quan generes mapes de calor a través de l'algorisme de processament de densitat de nucli.
Ajustament d'opacitat i ús de camps de pes
Per veure alhora el mapa base i la capa de calor, pots reduir la opacitat de la capa de mapa de calor des de la secció de representació de capa, per exemple a un 60%. Així segueixes apreciant carrers, edificis o límits administratius.
En algunes anàlisis només cal considerar la densitat de punts tal qual, però en altres és essencial que cada punt tingui una importància diferent. Un delicte violent, per exemple, no hauria de pesar el mateix que un robatori menor, o un punt pot representar diverses observacions acumulades.
QGIS permet afegir un camp de pes numèric a la taula d'atributs i utilitzar-lo a la representació del mapa de calor. Una manera elegant de fer-ho és crear un camp virtual amb la Calculadora de camps: selecciones l'opció de crear un nou camp, en dius “weight”, esculls tipus sencer i fas servir una expressió CASE per assignar pesos diferents segons el tipus de crim (usant el camp “Crime type”).
Quan s'aplica aquesta expressió, es genera un nou atribut virtual sense modificar les dades originals. Al panell d'estil, podeu indicar que els punts es ponderin pel camp weight. El resultat és un mapa de calor que reflecteix no només la quantitat d'incidents sinó també la gravetat relativa.
Generar mapes de calor ràster amb estimació de densitat de nucli
Quan necessites un resultat més sòlid per a anàlisis o informes, en lloc de limitar-te a la visualització en pantalla, pots fer servir l'algoritme de Mapa de calor (Estimació de Densitat de Nucli) a la Caixa d'eines de processos de QGIS. Aquest algorisme genera una capa ràster amb valors de densitat calculats.
Abans de córrer l'algorisme convé reprojectar la capa de punts a un SRC projectat apropiat per a la zona, ja que el càlcul de distàncies sobre coordenades geogràfiques no és adequat. Per exemple, per a dades al Regne Unit, una opció habitual és EPSG:27700 (OSGB 1936 / British National Grid).
Després de reprojectar (mitjançant el procés de “Reprojectar capa”), creeu la nova capa i desactiveu l'original per evitar confusions. A continuació, busqueu l'algorisme de Mapa de calor (estimació de densitat de nucli), defineix el ràdio (per exemple, 5000 metres), el camp de pes (weight si ho has creat) i les mides de píxel a X i Y (per exemple, 50 metres). Deixes el nucli quàrtic per defecte o ho ajustes segons les necessitats de la teva anàlisi.
En executar l'algorisme es genera una nova capa ràster (per exemple, anomenada OUTPUT). Inicialment sol mostrar-se amb un representador de gris de banda única que no és gaire atractiu. Des del panell d'estil pots canviar el renderitzat a “Pseudocolor de banda única”, triar de nou una rampa com a “Reds” i ajustar el contrast fins a aconseguir un mapa de calor visualment clar i útil.
Ús de mapes de calor en anàlisi geoespacial empresarial
Més enllà del GIS descriptori, molts entorns empresarials inclouen visualitzacions de mapes de calor en panells interactius per analitzar dades de negoci. Un exemple típic és estudiar els ingressos per regió o el potencial de vendes duna cadena de retail.
Aquests mapes de calor permeten respondre preguntes com: on es concentren els clients que més gasten?, a quines zones s'acumulen incidències?, quines regions tenen més marge de creixement?. No obstant això, solen entendre's com una ajuda visual i és recomanable complementar-los amb altres gràfics com a sèries temporals, taules comparatives o histogrames.
En plataformes analítiques se sol recomanar que, si el mapa té més d'uns 2000 punts, en lloc de mostrar un mapa de calor directa sigui preferible fer servir un càlcul de densitat o un altre tipus d'agregació. D'aquesta manera s'eviten problemes de rendiment i se n'obté una representació més estable.
Interacció amb panells: filtres, selecció i sincronització
A moltes eines de BI o d'anàlisi de dades espacials, els mapes de calor s'insereixen com targetes o ginys dins d'un quadre de comandament. Aquests components ofereixen una sèrie de controls per treure tot el partit a la visualització:
- El panell de Opcions de capa permet expandir llegendes, canviar simbologia, modificar camps i accedir a paràmetres com ara aparences, filtres o atributs.
- La pestanya de llegenda mostra el gradient de colors i el valor associat als extrems, facilitant entendre què es considera “alt” i “baix”.
- Des de la pestanya de simbologia pots canviar el camp que es fa servir per construir el mapa de calor o convertir la visualització en un altre tipus de mapa (per exemple, coropletes, punts simples, etc.).
- La pestanya de aparença ofereix ajustaments visuals: color de fons, color de primer pla, vora de la targeta, rotació del mapa, inclusió o exclusió de capes de mapa base i de la fletxa de nord.
- A la pestanya de Atributs es consulten els detalls de les entitats seleccionades, ideal quan vols anar de la visió general al detall concret.
A més, solen existir botons específics per a: filtrar dades dins de la pròpia targeta, seleccionar entitats amb diferents eines (clic únic, rectangle, llaç), aplicar zoom a la selecció, invertir-la, canviar de tipus de visualització (de mapa a gràfic de barres, taula, etc.), sincronitzar l'extensió de diversos mapes, maximitzar la targeta o activar els filtres creuats (de manera que el que selecciones en una targeta filtra la resta).
Capes de mapa de calor i imatges georeferenciades a Azure Maps
Azure Maps proporciona funcionalitats avançades per treballar amb capes de mapa de calor i capes d'imatge sobre mapes interactius a la web, orientades a desenvolupadors que construeixen solucions a l'ecosistema d'Azure.
Visualització de densitat amb capes de mapa de calor
Les capes de mapa de calor a Azure Maps s'usen per representar la densitat de punts mitjançant una gamma de colors. Com en altres sistemes, permeten detectar “punts calents” on la concentració d'esdeveniments o valors és més elevada.
Aquestes capes admeten punts de dades ponderades, cosa que significa que cada entitat pot portar un valor que indiqui la seva importància relativa. Així pots ressaltar, per exemple, sensors amb lectures extremes, clients amb més volum de compres o incidents de més gravetat dins de la mateixa capa de dades.
Azure Maps ofereix documentació detallada i exemples de codi per afegir i configurar aquestes capes, cobrint aspectes com ajustament de gradients de color, ràdios, intensitats i estils. En integrar-les amb les API de dades d'Azure, es converteixen en una eina potent per monitoritzar informació en temps real.
Capes d'imatge per superposar plànols, mapes antics o captures de dron
La capa d'imatge d'Azure Maps permet superposar imatges georeferenciades que es mouen i escalen juntament amb el mapa base en fer zoom i desplaçar-se. Aquesta funcionalitat és molt útil quan necessites combinar cartografia moderna amb capes personalitzades, com ara:
- Plànols de planta d'edificis o instal·lacions industrials, amb els quals podeu localitzar equips, rutes d'evacuació o sensors dins d'un espai concret.
- mapes històrics, alineats amb la cartografia actual per comparar com ha canviat el territori al llarg del temps.
- Imatges capturades per drones, per exemple per inspeccionar cultius, infraestructures o zones afectades per desastres.
Amb la documentació i exemples d'Azure Maps pots aprendre a registrar aquestes imatges amb coordenades adequades i combinar-les amb altres capes vectorials o de calor per crear visualitzacions molt riques i específiques per a cada escenari.
Mapes de calor en analítica web: UX, clics i scroll
A més dels mapes geogràfics, hi ha una altra família de mapes de calor molt popular: els heatmaps de comportament d'usuari a llocs web. En lloc de representar ubicacions al món real, mostren on fan clic els usuaris, fins on fan scroll o com mouen el ratolí per la pàgina.
Aquestes eines són crucials per millorar la experiència d'usuari (UX) i la conversió, perquè transformen mètriques abstractes en imatges clares. En comptes de limitar-te a taxes de rebot i durada de sessió, veus literalment quines zones de la pàgina cremen d'activitat i quines romanen fredes.
Usos principals dels mapes de calor a webs
Entre els usos més habituals destaquen diversos fronts clau:
D'una banda, permeten identificar els botons i CTAs més utilitzats. Cada clic es registra i es mostra amb un color, de manera que els elements més premuts apareixen amb tons més càlids. Això ajuda a comprovar si els botons de crida a lacció són realment els protagonistes visuals o si, per contra, latenció es dispersa en altres elements.
També serveixen per mesurar fins on fan scroll els usuaris. Els mapes de calor de scroll mostren quin percentatge de visitants arriba a cada secció de la pàgina. Si la majoria no baixa més enllà de cert punt, potser el contingut clau està massa avall o la pàgina sigui excessivament llarga, cosa molt típica en dissenys de tipus “one page”.
Un altre ús important és la detecció de problemes de UX. Moltes vegades els usuaris fan clic a imatges o textos que semblen botons però no ho són. El mapa de calor de clics treu a la llum aquests malentesos: si veus moltes interaccions en un element no interactiu, probablement toca redissenyar-lo per evitar frustracions i abandonaments.
A més, els heatmaps ajuden a comparar el comportament entre versions mòbil i escriptori. La majoria d'eines permeten filtrar per dispositiu, cosa que facilita veure quins elements sobren en mòbil, què es queda massa amagat o què funciona molt bé en una pantalla gran, però no tant en un telèfon.
Finalment, són excel·lents aliats per test A/B de dissenys o continguts. Pots llançar dues versions d'una mateixa landing i, només fent una ullada als mapes de calor de clics, moviments i scroll, comprovar quina orienta millor l'atenció cap als punts de conversió.
Tipus habituals de heatmaps a UX
Les solucions comercials de mapes de calor per a webs solen oferir tres tipus bàsics:
- Mapes de desplaçament vertical (scroll): mostren el percentatge de visitants que assoleix cada tram de la pàgina. Com més càlida és una franja, més usuaris l'han vist. Serveix per decidir on col·locar CTAs, formularis o informació crítica, i per detectar seccions que gairebé ningú no arriba a llegir.
- Mapes de clics: indiquen on es concentren les pulsacions a la pàgina. Les zones més calentes assenyalen elements que atrauen molt d'interès (per bé o per mal). Són útils per comprovar que els usuaris fan clic als enllaços correctes i per detectar “zones trampa” on la gent punxa sense obtenir resposta.
- Mapes de moviment: registren la trajectòria del cursor mentre els usuaris llegeixen o naveguen. Tot i que no sempre el moviment del ratolí coincideix exactament amb la mirada, ofereix pistes sobre els patrons de lectura i ajuda a decidir on col·locar titulars, imatges clau i botons.
On convé implementar mapes de calor a la teva web
No cal omplir-ho tot de heatmaps: el més assenyat és triar pàgines estratègiques on una millora de UX o conversió tingui més impacte. Alguns bons candidats són:
- La pàgina d'inici, que sol ser la primera impressió i el hub des del qual els usuaris es distribueixen per la resta del lloc.
- Les landing pages de productes o serveis, especialment si estàs llançant una nova oferta i vols validar si el disseny i el copy funcionen.
- Articles de bloc amb molt trànsit orgànic, on un petit canvi a CTAs interns, banners o estructura de contingut pot disparar el rendiment.
Com crear un mapa de calor per a una web (exemple amb Hotjar)
Per generar mapes de calor del teu lloc necessites una eina d'anàlisi de comportament que registreu l'activitat dels usuaris. Al mercat n'hi ha diverses de molt conegudes com Hotjar, Clicktale o Crazy Egg, totes amb un funcionament força similar.
Si prenem com a exemple Hotjar, el procés sol ser senzill: primer et registres a la seva web, indicant el domini que vols analitzar. Després et faciliten un script únic per inserir a l'header de les pàgines que vulguis monitoritzar, o bé pots fer servir un plugin si treballes amb un CMS com WordPress.
Un cop instal·lat l'script o plugin, verifiqueu des del panell de l'eina que tot s'ha configurat correctament. A partir d'aquí, Hotjar comença a recopilar dades de sessions reals i, al cap d'un temps, podeu consultar mapes de clics, scroll, moviment, enregistraments de sessions i més. Moltes d'aquestes plataformes ofereixen períodes de prova gratuïts d'uns dies suficients per fer-se una idea del potencial.
Plugins gratuïts de WordPress per a heatmaps
Si la teva web està muntada a WordPress i vols alguna cosa ràpida sense dependre de serveis externs per a tot, existeixen plugins de mapes de calor gratuïts que s'integren directament al panell d'administració.
Per exemple, un plugin de tipus “Heatmap for WordPress” permet crear mapes de calor de fins a cinc pàgines simultàniament en la versió gratuïta. El seu ús sol ser molt còmode perquè es llança des de la vista prèvia de les pàgines quan estàs loguejat, permet excloure IPs (perquè els vostres propis clics no contaminin les dades) i, a més de la visualització de zones calentes, mostra gràfiques de clics i visualitzacions per pàgina en els últims dies.
Un altre cas és “Aurora Heatmap”, amb desenes de milers d'instal·lacions actives. Ofereix una versió gratuïta que et permet veure el mapa de calor de clics també a mòbil i es pot aplicar a tantes pàgines com necessitis, sense límit. Aquestes solucions són especialment interessants per a petits projectes o blocs que volen millorar el seu UX sense complicar-se amb eines de pagament des del primer dia.
Últimes consideracions
Això sí, convé no perdre de vista que qualsevol connector que afegeixi scripts de seguiment introdueix un cert cost de rendiment. Per això sol recomanar-se fer servir aquestes eines de manera intensiva només durant períodes d'anàlisi (per exemple, el llançament d'una campanya) i no mantenir-les actives sense necessitat permanent.
Integrar de forma intel·ligent capes personalitzades i mapes de calor, tant en l'àmbit geoespacial com en l'anàlisi de comportament web, et permet passar de dades crues a patrons visuals que qualsevol persona pot entendre d'una ullada; combinant l'ús d'API com Google Maps o Azure Maps, eines GIS com QGIS i solucions d'UX com Hotjar o plugins de WordPress, pots construir ecosistemes de visualització molt potents sempre que tinguis cura del rendiment, el context d'ús i la interpretació adequada del que mostren els colors. Comparteix aquesta informació perquè altres usuaris coneguin del tema.