CODEWITHSUNDEEP
polygonbing-mapsbingbing-apiwkt
user740022
user740022

Reputation: 39

Populate polygon from Microsoft.Maps.WellKnownText [ WKT ] on Bing map

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

Answers (1)

rbrundritt
rbrundritt

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

Related Questions