Monday 28 September 2020

How to use zoomToMapObject when using lat and long for putting locations on map

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