pushpin for San Fransisco shape placed in sea

Question

var cities = ["San Francisco", "Dallas", "Houston", "Los Angeles", "New York", "Philadelphia", "San Antonio"];

In Bing Maps, Am trying to place the marker for the above locations. But the San Fransisco location's pushpin placed in sea.

Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(cities, 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 });    
            }  
        });  

I expect the marker to be placed on the center of the San Fransico. Please let us know if there is any dynamic way to achieve this.

TIA

Answer 1

Hello,

The point is returned from your calculation of center of the polygon and changing it to a rectangle then calculating a point. To get a better answer I have two options for you.

1. Call the Geocoder API for "San Francisco" https://learn.microsoft.com/en-us/bingmaps/rest-services/locations
2. Call proper polygon math to get the actual center of the polygon like https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/getcentroid

Sincerely,
IoTGirl