Modern maps are no longer just static images: today you can overlay custom layers, heat maps, and advanced visualizations that transform your data into clear and actionable information. Whether you work with customer locations, crimes, technical incidents, or user behavior on a website, a good implementation of these layers can make the difference between seeing isolated data points and detecting real patterns.
In this article we will see, in considerable detail and with a practical approach, how the custom layers and heat maps on different map typesFrom map APIs like Google Maps, QGIS, and Azure Maps, to web analytics heatmaps like Hotjar and WordPress plugins, you'll learn what they're for, their advantages, how to configure them correctly, and when to use them—or avoid them.
What is a heat map and what is it used for in cartography?
A geographic heat map is a way of visualize the intensity or density of data on a map using colors. Areas with a higher concentration of dots appear with warmer tones (reds, oranges), while areas with less density are represented with cooler colors (greens, blues or grays, depending on the style).
This type of visualization is ideal when you work with data from very dense, overlapping pointsLocations of crimes, traffic accidents, homes, field incidents, IoT sensors, customers, etc. Instead of seeing thousands of individual markers that don't tell you anything, you see colored patches that make it clear at a glance where events are concentrated.
Now, a heat map is primarily a visual tool, not a precise density analysisIt's perfect for exploring data or quickly presenting it to non-technical people, but when you need exact quantitative results it's usually better to move on to a more formal density calculation (e.g., core density estimation on a raster).
Implementing heat maps with the Google Maps API
Within the Google ecosystem, the Maps API for JavaScript has offered for years a specific layer of HeatmapLayer to display heat maps directly on an interactive map. Although this functionality is marked as obsolete and will no longer be available in May 2026, its usage and concepts remain very useful, and can be replicated today using third-party libraries such as deck.gl.
Loading the display library
The Google Maps heat map layer is not loaded by default: it is part of the library google.maps.visualizationTo use it, you must add the corresponding parameter to the Maps JavaScript API load URL, also including the callback that initializes the map.
The general idea is to load the API script with something like: a URL with the parameter libraries=visualization and an initMap function as a callback. Once the library is loaded, you will have the HeatmapLayer class available to create your heat map.
Basic creation of a heat map layer
The typical flow for creating a heat map with the API is fairly straightforward: first you initialize the base map, then you build a list of points, and finally you create the heat layer and associate it with the map.
In practice, you define an array of objects google.maps.LatLng with the coordinates From your points (for example, several locations in San Francisco), you configure the map with center, zoom level and map type, and create a new object google.maps.visualization.HeatmapLayer passing the list of points as a data property. Finally, you call setMap(map) so that this layer is displayed on the map.
The result is a color overlay on the satellite or street map in which Areas with a higher concentration of points will appear "hotter", following the default color gradient or the one you define.
Weighted Data: LatLng vs WeightedLocation
The Google Maps API for JavaScript allows the heat map layer to work not only with simple LatLng, but also with objects WeightedLocationBoth represent a point on the map, but WeightedLocation adds a weight property that controls the "strength" with which that point contributes to the heat map.
By default, each LatLng acts as if it had a implicit weight of 1If instead of adding the same LatLng point three times, you use a single WeightedLocation with weight: 3, the effect on the map will be equivalent, but more efficient in terms of performance, especially when handling large volumes of data in one place.
This weighting is useful in situations such as: highlight the magnitude of certain events (for example, more intense earthquakes), represent multiple observations in the same location without repeating points, or give more importance to critical incidents compared to minor ones.
Furthermore, it is possible to mix them in the same array LatLng and WeightedLocation objectsThis way you can leave most points with standard weight and highlight only a few key events by increasing their weight.
Heat map layer customization options
The HeatmapLayer class offers several options for adjust appearance and behavior of the layer. Some of the most important are:
- dissipatingThis setting indicates whether the heat map should "dissipate" when zooming. With the value set to true (the default), the radius in pixels remains constant, and as you zoom in, the patches occupy less geographic area. If set to false, the radius increases with zoom to preserve color intensity in a specific location.
- gradientThis allows you to define the color gradient as an array of CSS strings (e.g., RGBA values). This gives you complete control to create smoother, more aggressive, or customized heatmaps that match your application's visual identity.
- maxIntensityBy default, colors are dynamically scaled based on the maximum concentration of points in a pixel. With this option, you can set a maximum static intensity, very useful when there are very high outliers that distort the entire map.
- radius: defines the radius of influence of each point in pixels. Small radii show highly concentrated hotspots, while large radii smooth the map, generating wider patches.
- opacity: controls the overall opacity of the heat layer, with values between 0 and 1. Lowering the opacity can get a better view of the base map and other elements that's underneath.
Together, these parameters allow you to tailor the visualization for the heat map Answer exactly what you want to highlight: high point concentration, very extensive patterns, slight differences between areas, etc.
End of support and alternatives with deck.gl
It is important to keep in mind that The HeatmapLayer layer of the Google Maps JavaScript API is deprecated.The feature was de-supported in May 2025 and will be completely removed in a future API release planned for May 2026.
Alternatively, Google recommends using Integrations with third-party libraries such as deck.glThese solutions include an implementation of HeatmapLayer and other advanced layers. They enable the creation of high-quality visualizations on maps, with support for... complex data, large volumes, and animationsand they integrate well with modern web development frameworks.
Advanced heat maps and custom layers in QGIS
When you need to go a step further and do more complete and accurate spatial analysisQGIS is a reference tool. It allows you to style point layers with a "live" heat map renderer, and also generate core density rasters for more formal analysis.
Stylize a dot layer as a heat map
Imagine you are working with a CSV file of crime locations in Surrey (United Kingdom)The workflow in QGIS, broadly speaking, would be:
First you load a base map, for example the OpenStreetMap layer from the XYZ Tiles sectiondragging it to the main canvas. Then import the CSV data from the Data Source Manager, using the delimited text tab, specifying the downloaded file (for example, 2019-02-surrey-street.csv).
QGIS automatically detects the columns of Longitude and Latitude to define the geometryThe reference system is usually set to EPSG:4326 – WGS 84. After adding the layer, you will see the incident points on the base map, but with such high density it is difficult to appreciate the concentration of crimes.
To convert this point cloud into a heat map, you open the Layer Style panel Select the point layer and change the plot type to "Heatmap". The layer will then be displayed using a color ramp (usually gray by default), and you can adjust the settings while viewing the changes in real time.
Color ramp selection and radius of influence
In a typical heat map, people usually use a scale yellow-red or white-red so that the most intense areas visually "pop". In QGIS you can choose, for example, the "Reds" ramp from the color ramp dropdown in the style panel.
The key parameter is the radioThis defines the circular area around each point within which that point exerts its influence. In data such as crimes or incidents, this value has a lot of physical meaning: for example, you can assume that an incident has an impact within a 5 km radius of its location.
If your project is in a system like EPSG:3857 (Web Mercator), the units are meters, so you would indicate 5000 as radio for those 5 km. Changing this parameter clearly modifies the smoothness of the map: very small radii generate very localized patches; large radii produce wider and more diffuse areas.
Behind this calculation lies a kernel function which defines how the influence decays from the center of the point to the edge of the radius. QGIS's heat map renderer uses a quartic kernel by default, but there are others such as Triangular, Uniform, Triweight, or Epanechnikov, which you can use when generating heat maps through the kernel density processing algorithm.
Adjusting opacity and using weight fields
To view both the base map and the heat layer at the same time, you can reduce the heat map layer opacity From the layer representation section, for example, to 60%. This way you can still see streets, buildings, or administrative boundaries.
In some analyses it is sufficient to consider the point density as suchBut in other cases, it's essential that each point has a different weight. A violent crime, for example, shouldn't be weighted the same as a petty theft, or one point can represent several accumulated observations.
QGIS allows you to add a numeric weight field to the attribute table and use it in the heat map representation. An elegant way to do this is to create a virtual field with the Field Calculator: select the option to create a new field, name it “weight”, choose integer type and use a CASE expression to assign different weights according to the type of crime (using the “Crime type” field).
Applying this expression generates a new virtual attribute without modifying the original data. In the style panel, you can specify that the points are weight by the weight fieldThe result is a heat map that reflects not only the number of incidents but also their relative severity.
Generate raster heat maps with core density estimation
When you need a more robust result for analysis or reporting, instead of just relying on on-screen visualization, you can use the algorithm of Heat map (Core Density Estimate) in the QGIS process tools section. This algorithm generates a raster layer with calculated density values.
Before running the algorithm, it is advisable to reproject the point layer to a SRC projected appropriate for the areabecause calculating distances using geographic coordinates is not suitable. For example, for data in the United Kingdom, a common option is EPSG:27700 (OSGB 1936 / British National Grid).
After reprojecting (using the "Reproject Layer" process), you create the new layer and deactivate the original to avoid confusion. Next, you search for the Heatmap algorithm (core density estimation), define the radius (for example, 5000 meters), the weight field (weight (if you created it) and the pixel sizes in X and Y (for example, 50 meters). You leave the default quad kernel or adjust it according to the needs of your analysis.
Running the algorithm generates a new raster layer (for example, called OUTPUT). Initially, it is usually displayed with a single-band grayscale renderer which isn't very appealing. From the style panel, you can change the rendering to "Single-band pseudocolor," choose a ramp again like "Reds," and adjust the contrast until you get a visually clear and useful heat map.
Use of heat maps in business geospatial analysis
Beyond desktop GIS, many enterprise environments include heat map visualizations on interactive panels to analyze business data. A typical example is studying revenue by region or the sales potential of a retail chain.
These heat maps allow us to answer questions such as: Where are the highest-spending customers concentrated? In which areas are incidents most frequent? Which regions have the most room for growth?However, they are usually understood as a visual aid and it is recommended to complement them with other graphs such as time series, comparative tables or histograms.
Analytics platforms generally recommend that, if the map has more than about 2000 pointsInstead of displaying a direct heat map, it's preferable to use a density calculation or another type of aggregation. This avoids performance problems and results in a more stable representation.
Interacting with panels: filters, selection, and synchronization
In many BI or spatial data analysis tools, heat maps are inserted as cards or widgets within a dashboardThese components offer a range of controls to get the most out of the visualization:
- The Layer options It allows you to expand legends, change symbology, modify fields, and access parameters such as appearances, filters, or attributes.
- The tab Legend It shows the color gradient and the value associated with the extremes, making it easier to understand what is considered "high" and "low".
- From the tab of symbology You can change the field used to build the heat map or convert the visualization into another type of map (e.g., choropleths, simple points, etc.).
- The tab Appearance It offers visual adjustments: background color, foreground color, card border, map rotation, inclusion or exclusion of base map layers and the north arrow.
- In the tab Attributes The details of the selected entities are consulted, ideal when you want to go from the general overview to the specific detail.
In addition, there are usually specific buttons for: filter data within the card itselfSelect entities with different tools (single click, rectangle, lasso), zoom in on the selection, invert it, change the type of display (from map to bar chart, table, etc.), synchronize the extent of several maps, maximize the card, or activate cross-filters (so that what you select on one card filters the rest).
Heatmap layers and georeferenced images in Azure Maps
Azure Maps provides advanced functionalities for working with heat map layers and image layers about interactive maps on the web, geared towards developers building solutions in the Azure ecosystem.
Visualization of density with heat map layers
Heat map layers in Azure Maps are used to represent the dot density using a range of colorsAs in other systems, they allow the detection of "hot spots" where the concentration of events or values is higher.
These layers support weighted data pointsThis means that each entity can carry a value indicating its relative importance. This allows you to highlight, for example, sensors with extreme readings, customers with the highest purchase volume, or more serious incidents within the same data layer.
Azure Maps offers detailed documentation and code examples for adding and configuring these layers, covering aspects such as Adjustment of color gradients, radii, intensities, and stylesBy integrating them with Azure data APIs, they become a powerful tool for monitoring information in real time.
Image layers for overlaying plans, old maps, or drone footage
The Azure Maps image layer allows overlaying georeferenced images that move and scale along with the base map when zooming and panning. This functionality is very useful when you need to combine modern cartography with custom layers, such as:
- Floor Plans of buildings or industrial facilities, with which you can locate equipment, evacuation routes or sensors within a specific space.
- Historical maps, aligned with current cartography to compare how the territory has changed over time.
- Images captured by dronesFor example, to inspect crops, infrastructure, or disaster-affected areas.
With Azure Maps documentation and examples, you can learn how to register these images with appropriate coordinates and combine them with other vector or heat layers to create very rich and specific visualizations for each scenario.
Heatmaps in web analytics: UX, clicks and scrolling
Besides geographical maps, there is another very popular family of heat maps: the user behavior heatmaps on websitesInstead of representing real-world locations, they show where users click, how far they scroll, or how they move their mouse around the page.
These tools are crucial for improving the user experience (UX) and conversionBecause they transform abstract metrics into clear images. Instead of being limited to bounce rates and session duration, you literally see which areas of the page are "on fire" with activity and which remain cold.
Main uses of heat maps on websites
Among the most common uses, several key areas stand out:
On one hand, they allow identification the most used buttons and CTAsEach click is recorded and displayed with a color, so the most frequently clicked elements appear in warmer tones. This helps determine whether the call-to-action buttons are truly the visual focus or if, on the contrary, attention is being scattered to other elements.
They are also used for measuring how far do users scroll?Scroll heatmaps show what percentage of visitors reach each section of the page. If most don't scroll past a certain point, the key content might be too far down or the page might be too long, a common issue with one-page designs.
Another important use is the UX problem detectionOften, users click on images or text that look like buttons but aren't. Click heatmaps highlight these misunderstandings: if you see a lot of interaction on a non-interactive element, it probably needs redesigning to avoid frustration and abandonment.
In addition, heatmaps help to Compare the behavior between mobile and desktop versionsMost tools allow you to filter by device, making it easy to see what elements are unnecessary on mobile, what gets too hidden, or what works very well on a large screen but not so much on a phone.
Finally, they are excellent allies for A/B testing of designs or contentYou can launch two versions of the same landing page and, by simply looking at the heatmaps of clicks, movements and scrolling, see which one better directs attention towards the conversion points.
Common types of heatmaps in UX
Commercial heat map solutions for websites typically offer three basic types:
- Vertical displacement (scroll) mapsThese metrics show the percentage of visitors who reach each section of the page. The warmer a section is, the more users have viewed it. This helps in deciding where to place CTAs, forms, or critical information, and in identifying sections that almost no one reads.
- Click mapsThese indicate where clicks are concentrated on the page. The hottest areas point to elements that attract a lot of interest (for better or for worse). They are useful for verifying that users are clicking on the correct links and for detecting "trap zones" where people click without getting any response.
- Movement mapsThese sensors track the cursor's movement as users read or browse. While mouse movement doesn't always perfectly match eye gaze, they offer clues about reading patterns and help in decision-making. where to place headlines, key images, and buttons.
Where is it advisable to implement heatmaps on your website?
There's no need to fill everything with heatmaps: the sensible thing to do is choose. strategic pages where a UX or conversion improvement will have the greatest impactSome good candidates are:
- La homepagewhich is usually the first impression and the hub from which users distribute themselves to the rest of the site.
- The Product or service landing pagesespecially if you're launching a new offer and want to validate whether the design and copy work.
- Blog articles with high organic trafficwhere a small change in internal CTAs, banners, or content structure can boost performance.
How to create a heat map for a website (example with Hotjar)
To generate heat maps of your site you need a behavior analysis tool that records user activity. There are several well-known options on the market, such as Hotjar, Clicktale, and Crazy Egg, all of which function in a fairly similar way.
If we take Hotjar as an example, the process is usually simple: first you register on their website, indicating the domain you want to analyze. Then they provide you with a unique script to insert into the header of the pages that you want to monitor, or you can use a plugin if you work with a CMS like WordPress.
Once the script or plugin is installed, verify from the tool's dashboard that everything is configured correctly. From there, Hotjar starts collecting data from real sessions, and after a while, you can check the results. click maps, scroll maps, motion maps, session recordings, and moreMany of these platforms offer free trial periods of a few days, enough to get an idea of their potential.
Free WordPress plugins for heatmaps
If your website is built on WordPress and you want something fast without depending on external services for everything, there are free heat map plugins that are integrated directly into the administration panel.
For example, a plugin like “Heatmap for WordPress” allows you to create heatmaps of up to five pages simultaneously in its free version. It's usually very easy to use because It is launched from the page preview when you are logged inIt allows you to exclude IPs (so that your own clicks don't contaminate the data) and, in addition to displaying hotspots, shows graphs of clicks and views per page in recent days.
Another example is “Aurora Heatmap”, with tens of thousands of active installations. It offers a free version that allows you to View the click heat map on mobile too And it can be applied to as many pages as you need, without limit. These solutions are especially interesting for small projects or blogs that want to improve their UX without the hassle of paid tools from day one.
Final considerations
However, it's important to keep in mind that any plugin that adds tracking scripts... introduces a certain performance costThat's why it's generally recommended to use these tools intensively only during analysis periods (for example, the launch of a campaign) and not to keep them active unnecessarily.
Integrate intelligently custom layers and heat mapsIn both geospatial and web behavior analysis, it allows you to go from raw data to visual patterns that anyone can understand at a glance; by combining the use of APIs such as Google Maps or Azure Maps, GIS tools such as QGIS and UX solutions such as Hotjar or WordPress plugins, you can build very powerful visualization ecosystems as long as you take care of performance, the context of use and the appropriate interpretation of what the colors show. Share this information so that other users can learn about the topic.