I am working on amcharts map
in angular
. I am binding locations using on lat
and long
, I don't have countries id
rather have location name. I want to zoom specific location using zoomToMapObject
.
I have dropdown, when I select one country from it, I want to zoom that.
This is my object
of locationData
{
"dId": 28046,
"lat": 33.8627681,
"long": -117.8870831,
"loc": "Fullerton CA"
"color":"red"
},
{
"dId": 25535,
"lat": 31.5649775,
"long": -110.2591639,
"loc": "Sierra Vista AZ"
"color":"yellow"
},
"dId": 31222,
"lat": 33.4308114,
"long": -70.7828727,
"loc": "Pudahuel Metropolitana"
"color":"green"
},
{
"dId": 23280,
"lat": 36.1676717,
"long": -94.1298177,
"loc": "Springdale AR"
"color":"red"
},
When I select dropdown, In SelectCountry
how can I get my code work. These all variables are returning undefined
, hence zoomToMapObject
not working
public mapCountry_selected(country)
{
setTimeout( () => {
this.mapChart.zoomToGeoPoint({latitude:country.lat,longitude:country.long},17,true)
}, 100);
}
This is my code
public locationMap()
{
this.mapChart = am4core.create("productsMap", 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.exclude = ["AQ"];
this.polygonSeries.useGeodata = true;
this.polygonSeries.calculateVisualCenter = true;
let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "lat";
place.propertyFields.longitude = "long";
imageSeries.data=this.locationData;
var circle = place.createChild(am4core.Circle);
circle.propertyFields.fill = "color";
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 3,
"max": 10,
"dataField": "value",
})
}
Edit1:
I am showing circle for every location("target": circle
) with three colors green, yellow, red. Now after adding true
point 2nd and 3rd solved(from my comment). I need highlight/popover location after selecting one from dropdown so user can directly will come know this location I have selected as there are many locations around each other.
from How to use zoomToMapObject when using lat and long for putting locations on map
No comments:
Post a Comment