Monday, 11 November 2019

Distance between two locations - Bing Maps

Hi Everyone,

Today I was working on Bing Maps and the requirement was there are some static locations and we have to calculate the distance between the draggable Pushpin and static locations.

Here is the full HTML of the same, please make sure that you replace BING-MAP-KEY with your key.

<html>
<head>
    <title>Drag Pushpin</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Segoe UI',Helvetica,Arial,Sans-Serif;
        }
    </style>
</head>
<body>
    <div id='printoutPanel'></div>
    <div id='divLatitudeUp'></div>
    <div id='divLongitudeUp'></div>
    <div id='divDistance'></div>
    <div id='myMap'></div>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=BING-MAP-KEY&callback=loadMapScenario' async defer></script>

    <script type='text/javascript'>
        var zoomLevel = 10;
        var map;
        var vLatitude = "17.53512546311542";
        var vLongitude = "78.3292079101957";

        // Pushpin Dragend event.
        function pushPinDragEndEvent(id, e) {
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());
            var loc = e.target.getLocation();;
            var location = new Microsoft.Maps.Location(loc.latitude, loc.longitude);
            if (id == "pushpinDragEnd") {
                document.getElementById("divLatitudeUp").innerHTML = "Latitude : " + loc.latitude;
                document.getElementById("divLongitudeUp").innerHTML = "Longitude : " + loc.longitude;
                getDistanceBetweenLocations(location, new Microsoft.Maps.Location(vLatitude, vLongitude));
            }
        }

        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { zoom: zoomLevel });
            var center = map.getCenter();
            var Events = Microsoft.Maps.Events;
            var Location = Microsoft.Maps.Location;
            var Pushpin = Microsoft.Maps.Pushpin;
            var loc = new Location(center.latitude, center.longitude);

            var dragablePushpin = new Pushpin(loc, { color: '#00F', draggable: true });
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), { center: loc, zoom: zoomLevel });
            Events.addHandler(dragablePushpin, 'dragend', function (e) { pushPinDragEndEvent('pushpinDragEnd', e); });
            map.entities.push(dragablePushpin);

            var pushpin = new Microsoft.Maps.Pushpin(new Location(vLatitude, vLongitude), {
                icon: 'https://bingmapsisdk.blob.core.windows.net/isdksamples/defaultPushpin.png',
                anchor: new Microsoft.Maps.Point(12, 39),
            });
            map.entities.push(pushpin);
        }

        // Calculate distance between two locations.
        function getDistanceBetweenLocations(Location1, Location2) {
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
                var vDistance = Microsoft.Maps.SpatialMath.getDistanceTo(Location1, Location2, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
                document.getElementById('divDistance').innerHTML = "Distance in Miles : " + vDistance;
            });
        }

    </script>
</body>
</html>

Hope this helps.

--
Happy Coding
Gopinath

No comments:

Post a Comment