5. Adding Functionality

1. Add the following to the OLControls in the Cadcorp:Map

Copy

<Cadcorp:OLMeasureLine  ID="measureLineControl"  
runat="server" 
Options="immediate:true,persist:true" 
ClientMeasurementHandler="lineMeasureCompleteHandler"  
ClientMeasurePartialHandler="lineMeasurePartialHandler" />

2. Now add :

• A button to the page to activate the control
• Some JavaScript for the event handlers
• An element to display the measurement.

3. Add the following to map.aspx just after the map container div.

Copy

<div id="controlsContainer" >
<div id="buttonContainer">
<button id="measureLineButton" onclick="measureLineClicked();return false;">Measure Line</button> 
</div>
<div id="displayMeasure"></div>
</div>

4. Next add the JavaScript event handlers. Add the following to the end of script.js.

Copy

function measureLineClicked() {
    var measureLine = Cadcorp.testMap.getControlsBy('id', 'measureLineControl');
    if (measureLine && measureLine.length > 0) {
        measureLine[0].activate();
    }
}
function lineMeasureCompleteHandler(eventArgs) {
    displayMeasurement(eventArgs);
}
function lineMeasurePartialHandler(eventArgs) {
    displayMeasurement(eventArgs);
}
function displayMeasurement(eventArgs) {
    var label = document.getElementById('displayMeasure');
    var measurementUnit = eventArgs.units;
    var measurement = eventArgs.measure;
    label.innerHTML = '<span>' + measurement + measurementUnit + '</span>';
}

5. When the project is run, a button element is added to the page. When it is clicked the Open Layers measure line control is activated and line measurement starts.

The code explained

<Cadcorp:OLMeasureLine ID="measureLineControl" runat="server" 
Options="immediate:true,persist:true" 
ClientMeasurementHandler="lineMeasureCompleteHandler" 
ClientMeasurePartialHandler="lineMeasurePartialHandler" />

Adds an Openlayers.Controls.Measure control to the map object.

The measure object is configured with a handler to measure lines. The options attribute is used to set configuration options on the measure control. See http://dev.openlayers.org/docs/files/OpenLayers/Control/Measure-js.html for the full list of options.

handlerOption is not available.

ClientMeasurementHandler attribute adds a measure event handler to the measure control.

ClientMeasurePartialHandler attribute adds a measurepartial event handler to the measure control.

The value for ClientMeasurementHandler and ClientMeasurePartialHandler is the name of a JavaScript function to call when the event is raised by the measure control. Listeners receive an event object with measure, units, order, and geometry properties.

function measureLineClicked() {
    var measureLine = Cadcorp.testMap.getControlsBy('id', 'measureLineControl');
    if (measureLine && measureLine.length > 0) {
        measureLine[0].activate();
    }
}

• The above function is called when the button is clicked.
• First the client side Open Layers measure control is found by calling a function on the map object. See http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html
• If it is found, its activate method is next called. This explicitly activates a control and its associated handler. http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html#OpenLayers.Control.activate

function lineMeasureCompleteHandler(eventArgs) {
    displayMeasurement(eventArgs);
}
function lineMeasurePartialHandler(eventArgs) {
    displayMeasurement(eventArgs);
}

These are the event handlers for the measure control. They both call the same function to display the measurement.

function displayMeasurement(eventArgs) {
    var label = document.getElementById('displayMeasure');
    var measurementUnit = eventArgs.units;
    var measurement = eventArgs.measure;
    label.innerHTML = '<span>' + measurement + measurementUnit + '</span>';
}

Displays the measurement from the measure control.

Adding a measure polygon control is similar to adding a measure line control.

<Cadcorp:OLMeasurePolygon  ID="measurePolygonControl"  
runat="server" 
Options="persist:true,immediate:true" 
ClientMeasurementHandler="polygonMeasureCompleteHandler"  
ClientMeasurePartialHandler="polygonMeasurePartialHandler" />

1. Add a button so the user can select either measure line or measure polygon. Add this snippet to the button container div.

<button id="measurePolygonButton" onclick="measurePolygonClicked();return 
false;">Measure Polygon</button>

2. Now add the JavaScript event handlers. Add the following to the end of script.js

function measurePolygonClicked() {
    var measurePolygon = Cadcorp.testMap.getControlsBy('id', 'measurePolygonControl');
    if (measurePolygon && measurePolygon.length > 0) {
        measurePolygon[0].activate();
    }
    var measureLine = Cadcorp.testMap.getControlsBy('id', 'measureLineControl');
    if (measureLine && measureLine.length > 0) {
        measureLine[0].deactivate();
    }
    var label = document.getElementById('displayMeasure');
    label.innerHTML = '';
}
function polygonMeasureCompleteHandler(eventArgs) {
    displayMeasurement(eventArgs);
}

function polygonMeasurePartialHandler(eventArgs) {
    displayMeasurement(eventArgs);

3. Two of the existing JavaScript functions need modification.

a. Modify measureLineClicked as follows:

function measureLineClicked() {
    var measureLine = Cadcorp.testMap.getControlsBy('id', 'measureLineControl');
    if (measureLine && measureLine.length > 0) {
        measureLine[0].activate();
    }
    var measurePolygon = Cadcorp.testMap.getControlsBy('id', 'measurePolygonControl');
    if (measurePolygon && measurePolygon.length > 0) {
        measurePolygon[0].deactivate();
    }
    var label = document.getElementById('displayMeasure');
    label.innerHTML = '';
}

b. Change displayMeasurement as follows:

function displayMeasurement(eventArgs) {
    var label = document.getElementById('displayMeasure');
    var measurementUnit = eventArgs.units;
    var measurement = eventArgs.measure;
    var order = eventArgs.order;
    if (order === 1)
         label.innerHTML = '<span>' + measurement + measurementUnit + '</span>';
    else
         label.innerHTML = '<span>' + measurement + measurementUnit + '<sup>' + order + '</sup></'</span>';
}

4. When the project is run there should now be two buttons. The second button will enable the user to measure a polygon.

The code explained

<Cadcorp:OLMeasurePolygon ID="measurePolygonControl" runat="server"

Options="persist:true,immediate:true"

ClientMeasurementHandler="polygonMeasureCompleteHandler" ClientMeasurePartialHandler="polygonMeasurePartialHandler" />

Adds an Openlayers.Controls.Measure control to the map object.

The measure object is configured with a handler to measure polygons. The options attribute is used to set configuration options on the measure control. See http://dev.openlayers.org/docs/files/OpenLayers/Control/Measure-js.html for the full list of options. handlerOption is not available.

ClientMeasurementHandler attribute adds a measure event handler to the measure control.

ClientMeasurePartialHandler attribute adds a measurepartial event handler to the measure control. The value for ClientMeasurementHandler and ClientMeasurePartialHandler is the name of a JavaScript function to call when the event is raised by the measure control. Listeners receive an event object with measure, units, order, and geometry properties.

function measurePolygonClicked() {
    var measurePolygon = Cadcorp.testMap.getControlsBy('id', 'measurePolygonControl');
    if (measurePolygon && measurePolygon.length > 0) {
        measurePolygon[0].activate();
    }
    var measureLine = Cadcorp.testMap.getControlsBy('id', 'measureLineControl');
    if (measureLine && measureLine.length > 0) {
        measureLine[0].deactivate();
    }
    var label = document.getElementById('displayMeasure');
    label.innerHTML = '';
}

• The above function is called when the measure polygon button is clicked.
• First the client-side Open Layers Measure Polygon control is found by calling a function on the map object. See http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html.
• If it is found, its Activate method is called. This explicitly activates a control and its associated handler. See http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html#OpenLayers.Control.activate
• Then the measure line control is found and deactivated.
• Finally, the measurement display is emptied.

The function measureLineClicked is modified so it finds the measure polygon control and deactivates it. It is also modified to empty the measurement display.

function polygonMeasureCompleteHandler(eventArgs) {
    displayMeasurement(eventArgs);
}
function polygonMeasurePartialHandler(eventArgs) {
    displayMeasurement(eventArgs);
}

These are the event handlers for the measure control. They both call the same function to display the measurement.

function displayMeasurement(eventArgs) {
    var label = document.getElementById('displayMeasure');
    var measurementUnit = eventArgs.units;
    var measurement = eventArgs.measure;
    var order = eventArgs.order;
    if(order === 1)
         label.innerHTML = '<span>' + measurement + measurementUnit + '</span>';
    else
         label.innerHTML = '<span>' + measurement + measurementUnit + '<sup>' + order + 
'</sup></'</span>';
}

This displays the measurement from the measure control. If order is greater than 1, it is assumed it is an area measurement.