I have successfully created MapPolygonSeries on amcharts5 with heatRules. But I am trying to add MapPointSeries to set the colour of the bullets. It appears to me that the heatRules are not called at all. Does anyone have a working example, or is the issue with my code obvious?
var rootElements = am5.registry.rootElements;
var root = (rootElements.length > 0? rootElements[0]: am5.Root.new("chartdiv"));
root.container.children.clear();
var chart = root.container.children.push (
am5map.MapChart.new(root, {
projection: am5map.geoMercator(),
panX: "none",
panY: "none",
wheelX: "none",
wheelY: "none"
})
);
var pointSeries = chart.series.push(
am5map.MapPointSeries.new(root, {
latitudeField: "lat",
longitudeField: "lon",
fill: am5.color(0xff0000)
})
);
var circleTemplate = am5.Template.new({});
pointSeries.bullets.push(function() {
var bulletCircle = am5.Circle.new(root, {
radius: 5,
fill: pointSeries.get("fill"),
fillOpacity: 0.8
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: bulletCircle
});
});
pointSeries.set("heatRules", [{
target: circleTemplate,
dataField: "value",
key: "fill"
min: am5.color(0xff3300),
max: am5.color(0xffff00),
}]);
pointSeries.data.setAll(myPointData);
myPointData looks like this:
[
{lat: -15.4183, lon: 28.287, value: 1.00448108131708},
{lat: -9.7915, lon: 29.0791, value: 1.0057251847281312},
...
]
Notes:
- If I do not set fill in MapPointSeries.new, then nothing is drawn (or so it appears)
- No errors in the browser console (Chrome)
Thank you in advance for any insight on this!
Here is how I did a workaround, but it is ugly, since I basically wrote my own heatmap function. I am still open to suggestions how to get the heatRules to work properly for points!