[OpenLayers-Users] Measure button in a custom control panel

Thu Aug 25 16:28:09 EDT 2011

Dear list

After days of trying I am really stuck on this.
I am trying to add a measure tool to a button in a control panel. I have
used the radio button example from here as a template
http://openlayers.org/dev/examples/measure.html and can get the measure tool
to work when the button is clicked. However the problem is that upon
clicking another tool in the toolbar the measure button is not deactivated.
I think that setting the button to TYPE_TOOL might hold the key but I am
unsure of the correct syntax.

Help on this is gratefully received.

//javascript that appears in measure_tool6.js

var map;
var measureControls;
var control;
var ol_wms;
var btn;
var panel;
var onTrigger;
var event;
var element;
var out;
var pan;
var zb;
var max;

function init() {
    map = new OpenLayers.Map ("map");
    ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {
      layers: "basic"
      }
    );
    map.addLayers([ol_wms]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.setCenter(new OpenLayers.LonLat(1.5, 18.3), 5);

    control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path,
        {persist: true,
        geodesic: true});

// unsure of correct syntax here        
//    control = OpenLayers.Class(OpenLayers.Control, {
//    type: OpenLayers.Control.TYPE_TOOL
//    });

    pan = new OpenLayers.Control.DragPan({title:'Pan around the map'});
    zb = new OpenLayers.Control.ZoomBox({title:"Click and drag a box to
zoom"});
    max = new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max
extent"});

    onTrigger = function (control) {
    btn.activate();
    }

    control.events.on({
     "measure": handleMeasurements,
     "measurepartial": handleMeasurements
                });
    map.addControl(control);
    control.activate();

    btn = new OpenLayers.Control.Button({
      title: "measure stuff",
      'displayClass': 'olControlMeasure',
      trigger: onTrigger });

    function handleMeasurements(event) {
        var geometry = event.geometry;
        var units = event.units;
        var order = event.order;
        var measure = event.measure;
        var element = document.getElementById('output');
        var out = "";
        if(order == 1) {
            out += "measure: " + measure.toFixed(3) + " " + units;
        } else {
            out += "measure: " + measure.toFixed(3) + " " + units +
"<sup>2&lt;/&quot; + &quot;sup&gt;";
        }
        element.innerHTML = out;
    }

//setting the default to pan breaks the measuring tool...??
    var panel = new OpenLayers.Control.Panel();
            panel.addControls([pan, zb, max, btn]);
            nav = new OpenLayers.Control.NavigationHistory();
            map.addControl(nav);
            panel.addControls([nav.next, nav.previous]);
            map.addControl(panel);

    setMap: function(map) {
    OpenLayers.Control.prototype.setMap.apply(this, arguments);
    this.map.addControl(this.measure);
    }

}

html code.........

<head>

<link rel="stylesheet"
href="http://www.openlayers.org/api/theme/default/style.css" type="text/css"
/>

</head>
<body onload="init()">
<div id="output" style="float:right;"></div>
<div id="map" style="width:600px; height:500px;"></div>
</body>

--
View this message in context: http://osgeo-org.1803224.n2.nabble.com/Measure-button-in-a-custom-control-panel-tp6726162p6726162.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.