Currently, I am encountering an issue with binding data to a map.
In the past, my data binding process involved using JSON data in records format as shown below:
{
"latitude":39.7645187,
"longitude": -104.9951976,
"name": "ORCL",
"value":32,
"activeProducts":"127",
},
{
"latitude":49.619446,
"longitude": -128.695623,
"name": "RCXC",
"value":72,
"activeProducts":"789",
},
Previously, I used the lat and long directly from the data to display circles on the map, while name, value, and activeProducts were utilized for tooltips.
Now, I have grouped the data based on the name field after applying the reduce clause:
CDFN: (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HCDR: (33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HVBL: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
PCMD: (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
Each group contains similar data including lat, long, and name. The value (as seen in the first JSON data) represents the count of records in each group (CDFN: (26)). After expansion, the data appears like this:
{
"latitude":39.7645187,
"longitude": -104.9951976,
"name": "CDFN",
"activeProducts": "127",
"totalproducts": "140"
},
{
"latitude": 49.619446,
"longitude": -128.695623,
"name": "HCDR",
"activeProducts": "789",
"totalproducts": "810"
},
My current query is:
- How can I extract the
latandlongof a single record from groups likeCDFN,HCDR,HVBL, etc., to bind it to themap?
The code I am presently utilizing is provided below:
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",
})
}
The following lines are crucial where data binding occurs:
imageSeries.data=Stations.Stations;
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"max": 15,
"dataField": "value",
})
I attempted to use the following code but was unsuccessful in displaying anything on the map:
imageSeries.data=group;