Geolocation Accuracy Circle Example

When using the HTML Geolocation library, it may be useful to be able to display the accuracy circle for the user’s location. Using the Spatial Math library an approximate circle can be generated by calculating a regular polygon with a lot of sides. This example calculates a regular polygon with 36 sides centered on the user’s location and renders it as a polygon. A pushpin is also added to the map at the user's location and the map is zoomed in.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
	<script type='text/javascript'>
    var map;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Load the spatial math module
        Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath", function () {
            //Request the user's location
            navigator.geolocation.getCurrentPosition(function (position) {
                var loc = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);

                //Create an accuracy circle
                var path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, position.coords.accuracy, 36,  Microsoft.Maps.SpatialMath.Meters);
                var poly = new Microsoft.Maps.Polygon(path);
                map.entities.push(poly);

                //Add a pushpin at the user's location.
                var pin = new Microsoft.Maps.Pushpin(loc);
                map.entities.push(pin);

                //Center the map on the user's location.
                map.setView({ center: loc, zoom: 17 });
            });
        });
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Running this code, you will initially be prompted by the browser to share your location. If you share your location the map will zoom in and display a pushpin and an accuracy circle for your location.

BMV8_SpatialMathGeolocationAccuracyCircle