Fully relative heatmap for Azure Maps?

Question

Fully relative heatmap for Azure Maps?

Jonathan 20

Is there a way to generate a fully relative heat map layer in Azure Maps? Specifically, I need a heatmap where:

At any given zoom level, only the single highest-density cluster is colored red (maximum intensity)
All other clusters are colored relative to this maximum, ensuring there's always exactly one red zone visible
When zooming in/out, if a different cluster becomes the highest-density area in the viewport, that cluster becomes red and the previous red cluster adjusts to a cooler color accordingly

This would essentially normalize the color scale dynamically based on the maximum density visible in the current map extent, rather than using a fixed global scale.

Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-08-29T12:13:26.88+00:00
Hey Jonathan

It sounds like you’re looking to create a dynamic heatmap in Azure Maps that adjusts based on the zoom level and always highlights the highest-density cluster in red. Here’s how you can tackle this:

Steps to Create a Fully Relative Heatmap:

Use the Heat Map Module: Start by utilizing the Heat Map Module from Azure Maps. This module is well-suited for visualizing data density.

Implement Dynamic Coloring:

Normally, heat maps use a fixed color scale. To achieve a fully relative heat map, you can customize the intensity of colors based on the maximum density in view.

When you calculate the heat map, keep track of the highest density cluster and adjust the color for that point to red (maximum intensity).

Zoom Behavior:

You can implement a zoom event listener that checks for the current highest-density cluster whenever the map is zoomed in or out. This way, it can dynamically adjust which cluster is colored red based on visibility and density.

Utilize the zoom expression to ensure that the radius of data points scales appropriately, making it look consistent across zoom levels.

Example & Resources:

Here’s an example you can refer to for the consistent zoomable heat map: Consistent Zoomable Heat Map.

Check out the details on customizing heat maps in the Heat Map Color Gradients documentation.

Hope it helps you do the needed modifications.

Thank you.
Jonathan 20 Reputation points

2025-09-01T01:44:52.4033333+00:00

Hi Manas,

Just have a couple of follow-up questions regarding the proposed solution.

You mentioned that,

keep track of the highest density cluster and adjust the color for that point to red (maximum intensity).

From my understanding of the API documentation, the clustering and calculation of the respective cluster density are done behind-the-scenes by the heat map. We are only responsible for feeding the dataset for plotting of the heat map.

Also,

You can implement a zoom event listener that checks for the current highest-density cluster whenever the map is zoomed in or out. This way, it can dynamically adjust which cluster is colored red based on visibility and density.

Is there a way for Azure Maps to expose the calculated density values, or to allow us to easily identify the maximum density value in the current view? I understand the idea behind your proposed solution, but getting the numbers itself seems to be the biggest challenge that I am currently facing.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-04T03:51:50.2633333+00:00

Hi Jonathan

Sorry for the late response. I am trying to come with a working code on myside.

It should be highly possible to do this with event listener.

Let me check the feasibility with product group directly and get back to you.

Thank you for staying patient.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-05T04:49:32.9666667+00:00

Hi Jonathan

Could you help with details requested in private message.

Thank you.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-17T01:26:08.08+00:00

Hi Jonathan

Got a review from product group, Drawback in your target statement is You want to show only one cluster as Red one. But we won't be able to color code One cluster as Red with around same weights even we normalize them with a script.

Consistent zoomable solution is almost meeting your requirement.

So, please accept below answer if you were happy with investigation.

Thank you.

Answer accepted by question author

0 additional answers

Your answer

Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-08-29T12:13:26.88+00:00

Hey Jonathan

It sounds like you’re looking to create a dynamic heatmap in Azure Maps that adjusts based on the zoom level and always highlights the highest-density cluster in red. Here’s how you can tackle this:

Steps to Create a Fully Relative Heatmap:

Use the Heat Map Module: Start by utilizing the Heat Map Module from Azure Maps. This module is well-suited for visualizing data density.

Implement Dynamic Coloring:

Normally, heat maps use a fixed color scale. To achieve a fully relative heat map, you can customize the intensity of colors based on the maximum density in view.

When you calculate the heat map, keep track of the highest density cluster and adjust the color for that point to red (maximum intensity).

Zoom Behavior:

You can implement a zoom event listener that checks for the current highest-density cluster whenever the map is zoomed in or out. This way, it can dynamically adjust which cluster is colored red based on visibility and density.

Utilize the zoom expression to ensure that the radius of data points scales appropriately, making it look consistent across zoom levels.

Example & Resources:

Here’s an example you can refer to for the consistent zoomable heat map: Consistent Zoomable Heat Map.

Check out the details on customizing heat maps in the Heat Map Color Gradients documentation.

Hope it helps you do the needed modifications.

Thank you.
Jonathan 20 Reputation points

2025-09-01T01:44:52.4033333+00:00

Hi Manas,

Just have a couple of follow-up questions regarding the proposed solution.

You mentioned that,

keep track of the highest density cluster and adjust the color for that point to red (maximum intensity).

From my understanding of the API documentation, the clustering and calculation of the respective cluster density are done behind-the-scenes by the heat map. We are only responsible for feeding the dataset for plotting of the heat map.

Also,

You can implement a zoom event listener that checks for the current highest-density cluster whenever the map is zoomed in or out. This way, it can dynamically adjust which cluster is colored red based on visibility and density.

Is there a way for Azure Maps to expose the calculated density values, or to allow us to easily identify the maximum density value in the current view? I understand the idea behind your proposed solution, but getting the numbers itself seems to be the biggest challenge that I am currently facing.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-04T03:51:50.2633333+00:00

Hi Jonathan

Sorry for the late response. I am trying to come with a working code on myside.

It should be highly possible to do this with event listener.

Let me check the feasibility with product group directly and get back to you.

Thank you for staying patient.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-05T04:49:32.9666667+00:00

Hi Jonathan

Could you help with details requested in private message.

Thank you.
Manas Mohanty 11,690 Reputation points Microsoft External Staff Moderator

2025-09-17T01:26:08.08+00:00

Hi Jonathan

Got a review from product group, Drawback in your target statement is You want to show only one cluster as Red one. But we won't be able to color code One cluster as Red with around same weights even we normalize them with a script.

Consistent zoomable solution is almost meeting your requirement.

So, please accept below answer if you were happy with investigation.

Thank you.

Answer 1

Hi Jonathan

Attached source for Zoomable heat map. User's image

https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Consistent%20zoomable%20Heat%20Map/Consistent%20zoomable%20Heat%20Map.htmlI think that consistent Zoomable heat maps should act as base reference for modification.

Normalizing heat map weights and re-rendering a new heat map with updated weights should give our desired results

    { position: [30.3322, -81.6557], weight: 0.8 },   // Jacksonville
            { position: [39.2904, -76.6122], weight: 0.85 },  // Baltimore
            { position: [43.651070, -79.347015], weight: 0.9 } // Toronto
        ];

   map.events.add('zoomend', updateHeatMap);
   map.events.add('moveend', updateHeatMap);

        function updateHeatMap() {
            var bounds = map.getCamera().bounds;
            var visiblePoints = heatMapData.filter(function (p) {
                return p.position[1] >= bounds[0][0] && p.position[1] <= bounds[1][0] &&
                       p.position[0] >= bounds[0][1] && p.position[0] <= bounds[1][1];
            });

            if (visiblePoints.length === 0) return;

            var maxDensity = Math.max(...visiblePoints.map(p => p.weight));

            var features = heatMapData.map(function (p) {
                var normalizedWeight = p.weight / maxDensity;
                return new atlas.data.Feature(new atlas.data.Point(p.position), {
                    weight: normalizedWeight
                });
            });

Have not come with a working code

Hope the logic of normalizing map weights upon hearing zoom or move end helps and re-rendering a new heat map helps.

Thank you

Share via

Fully relative heatmap for Azure Maps?

0 additional answers

Your answer