Embeddable maps

7. Sample Site

Here is the complete HTML and JavaScript created for this document.

HTML

<html>
<head>
	<title>Embedded maps development</title>
	<script src= "script/embeddedMapScript.js" ></script>
	</head>
	<body>
	<script src=" http://localhost/webmaplayers/GetMap.axd?mapid=myMap&mapname=embedded&controlTag=MapPlaceholder
	&x=530284&y=179551&resolution=1.2&showsymbol=true
	&controls=panzoom&initialisedcallback=afterInitethod"type="text/javascript"></script>
		<div style="width:500px;height:500px;" id="MapPlaceholder"></div>
		<div>			
		Total Distance: <span id="totalDistance"></span>
		</div>
		<button onclick="enableMeasureLine();">Measure Line</button>
		<button onclick="enableMeasurePolygon();">Measure Area</button>
	</body>
</html>

JavaScript

var measuringControl;
var measurePolygonControl;
function afterInitMethod(eventArgs){		
	measuringControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, { persist:true } );
	measurePolygonControl = new

OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, { persist:true });
	measuringControl.events.on( {
		"measure": measureHandler,
		"measurepartial": measureHandler
	});
	measurePolygonControl.events.on( {
		"measure": measureHandler,
		"measurepartial": measureHandler
	});
	eventArgs.map.addControls([ measuringControl, measurePolygonControl]);	
}

function measureHandler(eventArgs){
	var outputSpan = document.getElementById('totalDistance');
	var output = eventArgs.measure.toFixed(3) + ' ' + eventArgs.units + (eventArgs.order==1 ? '' : '<sup>2</sup>');		
	outputSpan.innerHTML = output;
}

function enableMeasureLine(eventArgs){
	if(measurePolygonControl != undefined && measurePolygonControl.active){
		measurePolygonControl.deactivate();
	}
	measuringControl.activate();
}
function enableMeasurePolygon(eventArgs){
	if(measuringControl != undefined && measuringControl.active){
		measuringControl.deactivate();
	}
	measurePolygonControl.activate();
}