Drawing circle in Bing Maps does not work

Chris S 0 Reputation points
2023-03-14T13:49:01.7366667+00:00

I am trying to create a code to draw a circle on Bing Maps. I do have a valid API-Key but something in the following code seems to be wrong: When I save the code as .HTM(L), nothing is being displayed. When I omit everything after Microsoft.Maps.loadModule, the map is being displayed and zoomed to the correct coordinate. Can anyone help me with that?


<!DOCTYPE html>
<html>
<head>
    <title>Bing Maps Example</title>
    <meta charset="utf-8" />
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MY_KEY'></script>
    <script type='text/javascript'>
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                center: new Microsoft.Maps.Location(51.7369, 7.1350),
                zoom: 12
            });
            
            //Load the Spatial Math module.
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
                var center = new Microsoft.Maps.Location(51.7369, 7.1350);
                var radius = 1852, // 1 nautical mile = 1852 meters 

                //Calculate the locations for a regular polygon that has 36 locations which will rssult in an approximate circle. Radius units defaults to meters.
                var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(center, radius, 36);
                
                //Create a polygon from the points.
                var circle = new Microsoft.Maps.Polygon(new Microsoft.Maps.Location(locs), { 
                    strokeColor: 'red', 
                    strokeThickness: 2, 
                    fillColor: 'rgba(255,0,0,0.2)' 
                });
                map.entities.push(circle);

            
                // Create a clickable tag with the specified text
                var infobox = new Microsoft.Maps.Infobox(
                    new Microsoft.Maps.Location(51.7369, 7.1350), 
                    { 
                        title: 'TEST_TITLE',
                        description: 'TEST_DESCRIPTION',
                        visible: false 
                    });
                infobox.setMap(map);
                
                Microsoft.Maps.Events.addHandler(circle, 'click', function () {
                    infobox.setOptions({ visible: true });
                });         
            });
        }
    </script>
</head>
<body onload='loadMapScenario();'>
    <div id='myMap' style='width: 800px; height: 600px;'></div>
</body>
</html>
Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
245 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. IoTGirl 2,976 Reputation points Microsoft Employee
    2023-04-09T19:38:17.5533333+00:00

    Hi Chris,

    I think you are adding the polygon circle after the map has already rendered. Have you tried starting with one of the samples like https://samples.bingmapsportal.com/?search=circles to see if these solve your issue?

    You can also look at the Interactive SDK and see that it does all of the map work then the load, as shown here: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/addonelayeritem#HTML

    Sincerely,

    IoTGirl

    0 comments