locked
Drawing a circle in v8 RRS feed

  • Question

  • Hi, 

    I have a requirement for: 

    1) users clicks a button which allows them to draw a circle on a map

    2) after the circle is drawn work out the mile radius of the circle drawn

    3) report the mile radius back to the customer

    I have noticed that circles were mentioned on the release notes to be as part of the drawing tools, but the online demos seem to have missed them out? Im wondering how the above is possible, can someone point me in the correct direction.

    Thanks

    Tuesday, August 9, 2016 10:19 AM

Answers

  • In the release notes circle and rectangle drawing capabilities are planned features, they are currently not available in V8. These will likely be available by the end of September.

    If you need this right now you can do this in a couple of other ways. The following code sample shows how to do this using the Spatial Math module.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
            var map,
                outputPanel,
                circle,
                mouseDownEventHandler,
                mouseMoveEventHandler,
                mouseUpEventHandler;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath');
    
            outputPanel = document.getElementById('output');
        }
    
        function DrawCircle() {
            ClearDrawing();        
    
            mouseDownEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousedown', function (e) {
                //Lock map so it doesn't move when dragging.
                map.setOptions({ disablePanning: true });
    
                //Create a polygon for the circle.
                circle = new Microsoft.Maps.Polygon([e.location, e.location, e.location]);
    
                //store the center point in the polygons metadata.
                circle.metadata = {
                    center: e.location
                };
    
                map.entities.push(circle);
            });
    
            mouseMoveEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                if (circle) {
                    UpdateCircle(e);
                }
            });
    
            mouseUpEventHandler = Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e) {
                UpdateCircle(e);
    
                //Unlock map panning.
                map.setOptions({ disablePanning: false });
    
                //Remove event handlers.
                Microsoft.Maps.Events.removeHandler(mouseDownEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseMoveEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseUpEventHandler);
            });
        }
    
        function ClearDrawing() {
            map.entities.clear();
            circle = null;
            outputPanel.innerHTML = '';
        }
    
        function UpdateCircle(e) {
            //Calculate distance from circle center to mouse.
            var distance = Microsoft.Maps.SpatialMath.getDistanceTo(circle.metadata.center, e.location, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Calculate circle locations.
            var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(circle.metadata.center, distance, 36, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Update the circles location.
            circle.setLocations(locs);
    
            //Display the radius in miles rounded to 2 decimal places.
            outputPanel.innerHTML = 'Radius: ' + Math.round(distance*1000)/1000 + ' miles';
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
        <br/>
        <input type="button" value="Draw Circle" onclick="DrawCircle()"/>
        <br/>
        <div id="output"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, August 9, 2016 7:08 PM