Geolocation Accuracy Circle Example

Bing
 

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.

Copy 
<!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;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Your Bing Maps Key'
        });

        //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>
</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

Show: