I need to create pushpins for the below input.
var Countries = ["Austria", "Brazil", "India", "Germany", "USA", "Malaysia"];
Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(Countries, geoDataRequestOptions, map,
(data) => {
var value = data.location;
if (data.results.length > 0 && data.results[0].Polygons !== null) {
var polygons = data.results[0].Polygons;
var dataBounds = Microsoft.Maps.LocationRect.fromShapes(data.results[0].Polygons);
var loc = new Microsoft.Maps.Location(dataBounds.center.latitude, dataBounds.center.longitude);
var pin = new Microsoft.Maps.Pushpin(loc, {
icon: svgIcon,
anchor: new Microsoft.Maps.Point(20 / 2, 20 / 2)
});
map.entities.push(pin);
locs.push(pin);
map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(locs), padding: 80 });
}
});
}, 3000);
I am using GeoDataAPIManager to get the boundary polygons and get the center of the polygon to generate a pushpin. But when loading countries like Malaysia or USA, the pushpins are placed in the sea, as the getboundary() returns multiple polygons and getting the center of the polygon returns the center between the two boundaries which results in the pushpin placed in the sea.
Let me know if there is any alternate way to create the pushpin or to get the center of the polygon.
I already tried the spatial.Math module to get the center.
This is a common occurrence when working with polygons as their shape can be such that their center is not within the actually geometry. There are several different ways to do this.
Method 1: This method will fall back to the nearest point to the calculated center that's on the edge of the polygon.
Method 2: Focus just on the largest polygon.
Method 3: Attempt to calculate a visual center using external library.