Embeddable maps

6. Switching between controls

The OpenLayers.Controls.Measure control can be initialised so that it will measure areas instead of lines. Each control has an “activate” and “deactivate” method that can be triggered.

To add a separate control to measure areas instead of polygons, update the script file like this: (the new parts of the script are highlighted):

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();
}

Now add two buttons to enable the controls to the index.html

<button onclick="enableMeasureLine();">Measure Line</button>
<button onclick="enableMeasurePolygon();">Measure Area</button>

Explaining the code

var measuringControl;
var measurePolygonControl;

The two controls are declared outside of the scope of the afterInitMethod so that they can be accessed by other methods on the page.

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]);	
}

The afterInitMethod has been modified so that now there are two controls added, one with a handler set for Path and one for Polygons. The autoActivate method has been removed from the control constructor as the intention is to activate from the buttons.

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;
}

The measure handler has been modified so that the units switch to units squared if the measure order is not “1”.

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

These are the methods launched from the buttons on the index page. These methods check whether the other control has been declared and is active, deactivates it and then activates the intended control.

7. Sample site

---