How can I bind groupby data to a amcharts map

Question

I am facing problem while binding data to a map.

How I was binding data before. I had JSON data as records format

{
    "latitude":39.7645187,
    "longitude": -104.9951976,
    "name": "ORCL",
    "value":32,
    "activeProducts":"127", 
},
{
    "latitude":49.619446,
    "longitude": -128.695623,
    "name": "RCXC",
    "value":72,
    "activeProducts":"789",
},

From above data, directly I was using lat, long to show circle on the map. name, value and activeProducts for tooltip.

Now I have grouped data based on name field which came after using reduce clause

CDFN: (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HCDR: (33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HVBL: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
PCMD: (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}

Each single group have same data like lat, long, name. value(shown in first JSON data) is the count of each group records(CDFN: (26)). Data looks like this after expanding

{
    "latitude":39.7645187,
    "longitude": -104.9951976,
    "name": "CDFN",
    "activeProducts":"127",
    "totalproducts":"140"   
},
{
    "latitude":49.619446,
    "longitude": -128.695623,
    "name": "HCDR",
    "activeProducts":"789",
    "totalproducts":"810"   
},

Now my question

1. from above groups CDFN, HCDR, HVBL etc how can I get let and long of one records only to bind to map.

This is code I am using currently

public productsLocMap()
{
  this.mapChart = am4core.create("stationsMap", am4maps.MapChart);
  this.mapChart .geodata = am4geodata_worldLow;
  this.mapChart .projection = new am4maps.projections.Miller();
  this.polygonSeries = this.mapChart .series.push(new am4maps.MapPolygonSeries());
  this.polygonSeries.useGeodata = true;
  this.polygonSeries.strokeWidth = 0.5;

  let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
  imageSeries.dataFields.value = "value";
  
  
  
  var place = imageSeries.mapImages.template;
  place.nonScaling = true;
  place.propertyFields.latitude = "latitude";
  place.propertyFields.longitude = "longitude";   
  imageSeries.data=Stations.Stations;     
  
  var circle = place.createChild(am4core.Circle);
  circle.fillOpacity = 0.7;
  circle.propertyFields.fill = "color";
  circle.tooltipText = "[bold]{name}:[/]\nCompliance Devices: {activeDevices}\nTotal devices:{totalDevice}";

  place.events.on("hit", (ev)=>{
    console.log(ev.target.dataItem.dataContext.title)
  })

  imageSeries.heatRules.push({
    "target": circle,
    "property": "radius",
    "max": 15,
    "dataField": "value",
  })      
}

Below lines are important where I am binding data

  imageSeries.data=Stations.Stations;  
  imageSeries.heatRules.push({
    "target": circle,
    "property": "radius",
    "max": 15,
    "dataField": "value",
  })

I tried doing this but not showing anything on map

 imageSeries.data=group;

Answer 1

AmCharts expects an array for the data property in a series or chart object, not an object/map that points to an array. You need to assign an array to it directly. You can create multiple image series and assign a group to each one, e.g.

series1.data = group.CDFN;
// ...
series2.data = group.HCDR;
// ...
// etc