none
How to create Accuracy Circle in Bing Map v8 RRS feed

  • Question

  • How to create Accuracy Circle in Bing Map v8?

    I have my previous code from V7:

    geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
              geoLocationProvider.addAccuracyCircle(InitLocation, 5000, 5000, {
                  polygonOptions: {
                      fillColor: new Microsoft.Maps.Color(0, 0, 0,0),
                      strokeColor: new Microsoft.Maps.Color(255,255,0,0),
                      strokeThickness: 2,
                      strokeDashArray: "30 5 5 5 "
    
                  }
              });
    However, it's not working on Bing Map V8

    Thursday, May 26, 2016 8:15 AM

Answers

  • The Bing Maps V8 SDK not longer has a GeoLocationProvider class. This was added in v7 which was released over 6 years ago. When it was released no browsers had any geolocation capabilities. Now, all major browsers have a built in HTML5 Geolocation API and there is no longer a need for this workaround class that was in v7. You can find an article on how to use the HTML5 geolocation API with V8 here: https://msdn.microsoft.com/en-us/library/mt712802.aspx

    These samples currently don't show how to create an accuracy circle as the spatial math library wasn't available yet which makes this really easy. In this library is a static function called getRegularPolygon (docs: https://msdn.microsoft.com/en-us/library/mt712834.aspx). It returns an array of locations that form a regular polygon around a location with a specified radius. If you generate a regular polygon that has 30 or more points, it will look like a circle. There is however a bug in this spatial math function in that it is meant to default to meters but is instead using KM's instead. I've put together a code sample that draws an accuracy circle around the users location and added a minor work around for the current bug. This work around will continue to work even after the bug is fixed so you don't need to worry about it breaking in the future. Here is the code sample:

    <!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'>
        function GetMap() {
            var 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 accuracyRadiusMeters = position.coords.accuracy;
    
                    var path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, accuracyRadiusMeters/1000, 30,  Microsoft.Maps.SpatialMath.DistanceUnit.KM);
                    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=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    Friday, May 27, 2016 8:13 PM

All replies

  • The Bing Maps V8 SDK not longer has a GeoLocationProvider class. This was added in v7 which was released over 6 years ago. When it was released no browsers had any geolocation capabilities. Now, all major browsers have a built in HTML5 Geolocation API and there is no longer a need for this workaround class that was in v7. You can find an article on how to use the HTML5 geolocation API with V8 here: https://msdn.microsoft.com/en-us/library/mt712802.aspx

    These samples currently don't show how to create an accuracy circle as the spatial math library wasn't available yet which makes this really easy. In this library is a static function called getRegularPolygon (docs: https://msdn.microsoft.com/en-us/library/mt712834.aspx). It returns an array of locations that form a regular polygon around a location with a specified radius. If you generate a regular polygon that has 30 or more points, it will look like a circle. There is however a bug in this spatial math function in that it is meant to default to meters but is instead using KM's instead. I've put together a code sample that draws an accuracy circle around the users location and added a minor work around for the current bug. This work around will continue to work even after the bug is fixed so you don't need to worry about it breaking in the future. Here is the code sample:

    <!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'>
        function GetMap() {
            var 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 accuracyRadiusMeters = position.coords.accuracy;
    
                    var path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, accuracyRadiusMeters/1000, 30,  Microsoft.Maps.SpatialMath.DistanceUnit.KM);
                    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=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    Friday, May 27, 2016 8:13 PM
  • Just curious if the bug was fixed ( or how to track) ? Asking b/c I noticed this is not defined in the typescript .d.ts file => 

    Microsoft.Maps.SpatialMath.KM

    Monday, August 8, 2016 2:37 PM
  • This was fixed in July and was add to the main release branch last week. The TypeScript definitions do include the KM distance unit. You access it like this:

    Microsoft.Maps.SpatialMath.DistanceUnit.KM


    [Blog] [twitter] [LinkedIn]

    Monday, August 8, 2016 4:11 PM
  • I think it's like this, unless somehow I didn't get latest on the typescript .d.ts

    Microsoft.Maps.SpatialMath.DistanceUnits.Kilometers

    Monday, August 8, 2016 5:27 PM
  • You are correct. That's what I get for going by memory and not checking the documentation I wrote for this: https://msdn.microsoft.com/en-us/library/mt712838.aspx

    [Blog] [twitter] [LinkedIn]

    Monday, August 8, 2016 8:46 PM