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.
Hope this helps.
--
Happy Coding
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
Just used your code to do something that has had me stuck all day. Thanks a heap.
ReplyDeleteI am glad that it helped you.
DeleteI am needing to something similar so that we can calculate mileage more efficiently when doing quotes on opportunities. how could I go about this? i would have HUB site as a starting point and then the site address for the customer
ReplyDeleteWow what a great blog, i really enjoyed reading this, good luck in your work. Freight Quote
ReplyDelete