Reputation: 39
I am trying to populate polygon on Bing map from the code below. But it doesn't draw polygon on the map at all. Please check the code below and let me know what am I missing ?
Please note the credentials I set xxxx for security purpose.
Thanks
<!DOCTYPE html>
<html>
<head>
<title>binaryOperationsHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type='text/javascript'>
var map;
var polygon;
function loadMapScenario() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(33.146190241986119, -86.482209833117281),
zoom: 7 });
//Load the Well Known Text module.
Microsoft.Maps.loadModule('Microsoft.Maps.WellKnownText', function () {
//Parse well known text string.
polygon = Microsoft.Maps.WellKnownText.read('POLYGON((-122.358 47.653, -122.348 47.649, -122.348 47.658, -122.358 47.658, -122.358 47.653))');
//Add parsed shape to the map.
map.entities.push(polygon);
});
}
</script>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=xxxx&callback=loadMapScenario' async defer></script>
</body>
</html>
Upvotes: 2
Views: 461
Reputation: 18052
Your code works fine and does add a polygon to the map. I think the issue is that your setting the initial map center to a location that is very far away from your polygon and thus your polygon is out of view and you would have to pan/zoom to find it. Try using this center value:
center: new Microsoft.Maps.Location(47.65, -122.4)
Upvotes: 1