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.
Edit2:
Map after selecting location from dropdown
Initial Response for Question Revision 1
Recommended Approach
Based on what information you have available it may be easier to consider using the zoomToGeoPoint method available on the MapChart object eg
where
17
is your desired zoom level.zoomToMapObject
is especially useful when handling chart events.More specific to your question
However, if you would like to use the zoomToMapObject method, Based on your example the following approach could be considered.
For each data point in your dataset, and using the initial data stored in
am4geodata_worldLow
which has the "id" (eg. extracting the id for the firstam4geodata_worldLow.features[0].id
) for each polygon, you could determine for each country/place using the lat/lng coordinates which is closest to the center of each polygon.In the
MapChart
object you have stored inthis.mapChart
there are multiple series (vaguely considered as layers) which you would have to check for polygon or MapObjects. These can be extracted using the following:You could then build a data structure mapping each of your custom country/places to the ids available in the map (for eg an object
{"your-country-id":mapPolygonObject}
)For each
mapPolygon
you can extract coordinate points usingYou could then find the center/centroid of this polygon using these points as bounds and then for each of your country points you would find the euclidean distance between the polygon center point and your country. The shortest distance could assume that this country is associated with this point. Considerations may be made for distance (NB. Since you are working with coordinates, be sure to consider to 5 decimal points at least) as 50,000 miles (please observe your coordinate system for ways to convert lat/lng distances to metres/miles) may mean these are different places.
You could then extract the ids and build your map object for use later in your script. This may be time consuming and compute intensive and ideally would be better if you did this before had and stored the necessary references to be used later.
Another Approach to search for ids
Moreover, if you had the country ids, then this would be simpler search as denoted below:
Initial Response for Question Revision 2 (Edit1)
Based on the updated code, I noticed a few issues, I was unable to see markers on your map so i made a few modifications. Also, the modifications now allow you to retrieve marker/map objects by id as I have augmented the data with the id you have used please see updated code below.
I have created a dropdown/select node to simulate the onchange event, in the callback/event handler,
onCountryChange
you will see how we can retrieve a marker by it's new pseudo-id that we specified and call actions (I will open a popup) according to the Documented MapImage API