Azure Maps Control With Weighted Heat Map Layer - azure

Question

I am creating a web page that has a Heat Map on it using Azure Maps.
I have the heat map successfully pulling in points and displaying, but I need to change how it is rendering.
Specifically my heat map needs to be based on length of time in an area - which can be accomplished by looking at the timestamp that is on my data points. Any ideas on how to accomplish this in the heat map layer using DateTime like values?

Answer 1

The HeatMapLayer class has an option called weight that can take a data driven style expression that provides a number between 0 and 1 to indicate the weight. In your case you are working with timestamps, so you will first want to decide what your time range for min and max values should be. If your timestamps are strings, you should loop through your data before adding it to the data source and calculate the integer value for the data and store it as a property in the feature (i.e. time). For example: new Date('2022-2-14T03:24:00').getTime()
For example, you might want the max value to be anything that has occurred in the current minute (0ms), and the min value to occur on anything that is 15 minutes (900,000ms) or older. You can then put together a formula that makes use of the integer date to get a scalar value between 0 and 1. Here is the math using plain JavaScript:
var timeRange = 900000; //15 minutes
var now = Date.now();
var time = new Date('2022-2-14T03:24:00').getTime();
//Calculate the time offset and snap to the 0 to 15 minute range.
var dt = Math.max(0, Math.min(timeRange, now - time))
//We want the inverse weight since smaller dt should be higher. Thus 1 minus ratio.
var weight = 1 - dt/timeRange;
This can then be turned into a data driven expression and set as the weight value in the heat map layer options.
var timeRange = 900000; //15 minutes
var now = Date.now();
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
weight: ['-', 1, ['/', ['max', 0, ['min', ['-', now, ['get', 'time']], timeRange]], timeRange]]timeRange]]
}), 'labels');
If you want to update the now value periodically you can rebuild the expression and update the heat map using the setOptions function. For example;
var timeRange = 900000; //15 minutes
function getWeightExp(){
var now = Date.now();
return ['-', 1, ['/', ['max', 0, ['min', ['-', now, ['get', 'time']], timeRange]], timeRange]];
}
//Create heatmap layer.
var heatMap = new atlas.layer.HeatMapLayer(datasource, null, {
//Set weight option.
weight: getWeightExp()
});
//Add the heatmap to the map.
map.layers.add(heatMap, 'labels');
//Set an update frequency. In this case once a minute.
setTimeout(function() {
heatMap.setOptions({
weight: getWeightExp()
});
}, 60000);