<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Area and Distance Calculator"
             description="Calculates area of or distance along a defined path.  Flexible enough to allow the path to be edited after placing!  Can also work with multiple paths.  Unlike another area mapplet available, this area calculator actually works!"
             author="Mike Brewer"
             author_email="mapplets@thebrewerfamily.co.uk"
             author_affiliation="Mike Brewer Photography"
             author_location="Gloucestershire, England"
             screenshot="http://www.mikebrewer.co.uk/files/area_distance_screenshot.png"
             thumbnail="http://www.mikebrewer.co.uk/files/area_distance_thumb.png"
>
  <Require feature="sharedmap"/>
</ModulePrefs>

<Content type="html"><![CDATA[
<style type="text/css">

body {
  font-family: Arial, sans serif;
  font-family: Arial, sans serif;
  font-size: 11px;
}

#debug {
  visibility:hidden;
}

#featuredetails {
  font-weight:bold;
}

#clear_button {
  padding-top:1px;
}

#hand_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}

#line_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}

#shape_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
}
#shape_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}

</style>

<table><tr style="vertical-align:top">
  <td style="width:15em">

<table><tr>
<td><div id="hand_b"
         onclick="stopEditing()"/></td>
<td><div id="line_b"
         onclick="startLine()"/></td>
<td><div id="shape_b"
        onclick="startShape()"/></td>
<td><div id="clear_button"><form onsubmit="clear_map(); return false;"><input type="submit" value="Clear"></form></div></td>
</tr></table>

	<div id="debug"></div>
	<div id="featuredetails"></div>
     <div id ="explain"><p>Click on a button above to choose between drawings a line (whose length is measured) or shape (whose area is measured).  Double-click to stop drawing the line or shape.  To edit a line or shape, mouse over it and drag the points.  Click on a point to delete it.  You can draw multiple lines and shapes; click on an existing line or shape whose measurement you want to be shown again.</p></div>
  </td>
</tr></table>


<script type="text/javascript">
var COLORS = [["blue", "#0000ff"],["orange", "#ffa500"], ["lime","#00ff00"],
              ["red", "#ff0000"], ["fuchsia", "#ff00ff"], ["aqua", "#00ffff"], ["yellow", "#ffff00"]];
var options = {};
var colorIndex_ = 0;
var detailInfo_;
var debugInfo_;

var sqMtrsPerAcre = 4046.8564224;
var sqFtPerSqMtr = 10.763910417;

var map = null;
map = new GMap2(document.getElementById("map"));
map.clearOverlays();
detailInfo_ = document.getElementById("featuredetails");
debugInfo_ = document.getElementById("debug");
debugInfo_.innerHTML = "hello";
detailInfo_.innerHTML = "Measurements should appear here";
select("hand_b");

function select(buttonId) {
  document.getElementById("hand_b").className="unselected";
  document.getElementById("shape_b").className="unselected";
  document.getElementById("line_b").className="unselected";
  document.getElementById(buttonId).className="selected";
}

function stopEditing() {
  select("hand_b");
}

function getColor(named) {
  return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}

function startShape() {
  select("shape_b");
  var color = getColor(false);
  var polygon = new GPolygon([], color, 2, 0.7, color, 0.3);

  map.addOverlay(polygon);
  polygon.enableDrawing(options);
  polygon.enableEditing({onEvent: "mouseover"});
  polygon.disableEditing({onEvent: "mouseout"});

    GEvent.addListener(polygon, "endline", function() {
	    select("hand_b");
	    debugInfo_.innerHTML = "endline";
	});

	GEvent.addListener(polygon, "click", function(latlng, index) {
		if (typeof index == "number") {
			debugInfo_.innerHTML = "click-delete";
			polygon.deleteVertex(index);
		}
		else
		{
			debugInfo_.innerHTML = "click-notdelete";
			displayArea(polygon, detailInfo_);
		}
	});

	GEvent.addListener(polygon, "lineupdated", function() {
		debugInfo_.innerHTML = "lineupdated";
		displayArea(polygon, detailInfo_);
	});
}

function displayArea(polygon, field) {
    polygon.getAreaAsync(function(areaInSqMtrs) {
		var areaInAcres = areaInSqMtrs / sqMtrsPerAcre;
		areaInSqFt = Math.round(areaInSqMtrs * sqFtPerSqMtr);
		areaInAcres = Math.round(areaInAcres * 100) / 100;
		areaInHectares = Math.round(areaInSqMtrs / 10000 * 100) / 100;
		areaInSqMtrs = Math.round(areaInSqMtrs * 10) / 10;
		field.innerHTML = "Area is " + areaInAcres + " acres<br>    (" + areaInSqMtrs + " sq m or " + areaInHectares + " ha or " + areaInSqFt + " sq ft)";
	});	
}

function startLine() {
  select("line_b");
  var color = getColor(false);
  var line = new GPolyline([], color);
  
  map.addOverlay(line);
  line.enableDrawing(options);
  line.enableEditing({onEvent: "mouseover"});
  line.disableEditing({onEvent: "mouseout"});

    GEvent.addListener(line, "endline", function() {
	    select("hand_b");
	    debugInfo_.innerHTML = "endline";
	});

	GEvent.addListener(line, "click", function(latlng, index) {
		if (typeof index == "number") {
			debugInfo_.innerHTML = "click-delete";
			line.deleteVertex(index);
		}
		else
		{
			debugInfo_.innerHTML = "click-notdelete";
			displayLength(line, detailInfo_);
		}
	});

	GEvent.addListener(line, "lineupdated", function() {
		debugInfo_.innerHTML = "lineupdated";
		displayLength(line, detailInfo_);
	});

}

function displayLength(line, field) {
    line.getLengthAsync(function(lengthInMtrs) {
		lengthInMiles = Math.round(lengthInMtrs * 0.62137119224 / 1000 * 100) / 100;
		lengthInYards = Math.round(lengthInMtrs * 1.0936132983 * 100) / 100;
		lengthInMtrs = Math.round(lengthInMtrs * 100) / 100;
		field.innerHTML = "Length is " + lengthInMtrs + " metres<br>    (" + lengthInMiles + " miles or " + lengthInYards + " yards)";
	});	
}

function clear_map() {
	map.clearOverlays();
	debugInfo_.innerHTML = "cleared";
	detailInfo_.innerHTML = "";
}

    </script>
]]></Content>
</Module>

