freshfitz 0 Posting Pro in Training

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.

geocodecalc.js

/* ******************************************************** */
/* 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)
                    )
               )
           )
       );
};

default.htm.js

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();" />&nbsp;Miles<br />
                    <input type="radio" id="rdKilometers" name="Units" checked="checked" onclick="Unit_Click();" />&nbsp;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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.