Does anyone know how to add more measurements to this code without continuing to measure the same distance which is what it does. I want to measure the distance between 2 points, then measure the distance between another 2 points keeping each measurement stored as a variable.
/* ******************************************************** */
/* The code for the GeoCodeCalc class was copied from here: */
/* http://pietschsoft.com/Blog/Post.aspx?PostID=1452 */
/* ******************************************************** */
var GeoCodeCalc = {};
GeoCodeCalc.EarthRadiusInMiles = 3956.0;
GeoCodeCalc.EarthRadiusInKilometers = 2.093E+07;
GeoCodeCalc.ToRadian = function(v) {
return v * (Math.PI / 180);
};
GeoCodeCalc.DiffRadian = function(v1, v2) {
return GeoCodeCalc.ToRadian(v2) - GeoCodeCalc.ToRadian(v1);
};
GeoCodeCalc.CalcDistance = function(lat1, lng1, lat2, lng2, radius) {
return radius * 2 * Math.asin(
Math.min(1,
Math.sqrt(
(
Math.pow(Math.sin((GeoCodeCalc.DiffRadian(lat1, lat2)) / 2.0), 2.0) +
Math.cos(GeoCodeCalc.ToRadian(lat1)) * Math.cos(GeoCodeCalc.ToRadian(lat2)) *
Math.pow(Math.sin((GeoCodeCalc.DiffRadian(lng1, lng2)) / 2.0), 2.0)
)
)
)
);
};
function LoadMap()
{
// Load the Map
map = new VEMap("myMap");
map.LoadMap();
var latLong = new VELatLong(39.882123, -75.513219);
// Attach our onclick map event handler
map.AttachEvent("onclick", Map_Click);
map.SetCenterAndZoom(latLong, 20);
map.SetMapStyle("a");
}
// The Map onclick event handler
function Map_Click(eventArgs)
{
var clickedLatLong = eventArgs.latlong;
if (map.GetMapMode() == VEMapMode.Mode2D)
document.getElementById("myMap").style.cursor = 'crosshair';
{
// In 2D Mode the eventArgs.latlong property doesn't contain the lat/long point that was clicked.
// So we must figure it out using the x and y coordinates of the point on the map that was clicked.
clickedLatLong = map.PixelToLatLong(new VEPixel(eventArgs.mapX, eventArgs.mapY));
}
// When the user Right-Clicks, Draw the Polygon
if (eventArgs.leftMouseButton)
{
var newShape = null;
if (map.GetShapeLayerCount() > 0)
{
// Get reference to the Default Shape Layer
var shapeLayer = map.GetShapeLayerByIndex(0);
if (shapeLayer.GetShapeCount() > 0)
{
// Get points already plotted
var points = shapeLayer.GetShapeByIndex(0).GetPoints();
// Add the newly clicked point to the collection of points
points[points.length] = clickedLatLong;
newShape = new VEShape(VEShapeType.Polyline, points);
// Don't show the shapes icon on the map, we only want to see the line
newShape.HideIcon();
}
}
if (newShape == null)
{
// If this is the first Point plotted, then show it as a Pushpin
newShape = new VEShape(VEShapeType.Pushpin, clickedLatLong);
}
// Clear out the old shape
map.DeleteAllShapes();
// Add our new shape
map.AddShape(newShape);
CalculateDistance();
}
}
function CalculateDistance()
{
var distMessage = document.getElementById("spanDistanceMessage");
var dist = document.getElementById("spanDistance");
var points = new Array();
// Get all the Points being plotted
if (map.GetShapeLayerCount() > 0)
{
var shapeLayer = map.GetShapeLayerByIndex(0);
if (shapeLayer.GetShapeCount() > 0)
{
points = shapeLayer.GetShapeByIndex(0).GetPoints();
}
}
if (points.length <= 1)
{
// Display message to plot more points
distMessage.style.display = "";
dist.style.display = "none";
}
else
{
// Display the Distance of all the points being plotted
distMessage.style.display = "none";
dist.style.display = "";
var dblDistance = 0.0;
var unit = GeoCodeCalc.EarthRadiusInMiles;
if (!document.getElementById("rdMiles").checked) unit = GeoCodeCalc.EarthRadiusInKilometers;
for(var i = 1; i < points.length; i++)
{
dblDistance += GeoCodeCalc.CalcDistance(points[i - 1].Latitude, points[i - 1].Longitude, points[i].Latitude, points[i].Longitude, unit);
}
dist.innerHTML = dblDistance.toString() + " " + (unit == GeoCodeCalc.EarthRadiusInMiles ? "Miles" : "Feet");
}
}
function btnClearMap_Click()
{
// Clear all points plotted
map.DeleteAllShapes();
// ReCalculate - so we can hide the last calculated distance
CalculateDistance();
}
function Unit_Click()
{
// ReCalculate the distance when the distance unit is changed
CalculateDistance();
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Virual Earth - Calculate Distance UI Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript" src="GeoCodeCalc.js"></script>
<script type="text/javascript" src="Default.htm.js"></script>
</head>
<body onload="LoadMap();">
<form id="form1" runat="server">
<div>
<h2>Virual Earth - Calculate Distance UI Example</h2>
<h3>How To:</h3>
<ul>
<li>You can scroll/zoom around the Map as normal.</li>
<li>Just Right-Click the Map to draw a polyline and measure it's length.</li>
</ul>
<br />
<table>
<tr>
<td>
<div id="myMap" style="position:relative; cursor:pointer; width:650px; height: 500px;" ></div>
</td>
<td valign="top">
<strong>Distance:</strong><br />
<span id="spanDistanceMessage">Plot more points to Calculate distance.</span>
<span id="spanDistance" style="display:none;"></span>
<br />
<strong>Units:</strong><br />
<input type="radio" id="rdMiles" name="Units" onclick="Unit_Click();" /> Miles<br />
<input type="radio" id="rdKilometers" name="Units" checked="checked" onclick="Unit_Click();" /> Feet
<br />
<br />
<input type="button" id="btnClearMap" value="Clear Map" onclick="btnClearMap_Click();" />
<input type="button" id="StrDrawMap" value="Start Measure" onclick="Map_Start();" />
<div><input value='Delete Shape' type='button' onclick='DeleteShape();'/></div>
</td>
</tr>
</table>
<br />
Written by <a href="http://pietschsoft.com">Chris Pietschmann</a><br />
This code was originally posted here: <a href="http://pietschsoft.com/Blog/Post.aspx?PostID=1453">http://pietschsoft.com/Blog/Post.aspx?PostID=1453</a>
</div>
</form>
</body>
</html>