De-/activate getfeature-request via button

Question

I have an Openlayers3-map with more than one WMS-Layer. I want to add a button (for every queryable layer) so the user can decide to query the wms-layer or not.

var getfeature = function(click) {
    map.on(click, function (evt) {
        document.getElementById('info').innerHTML = '';
        var viewResolution = (view.getResolution());
        var url = wms_url.getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, projection,
            {
                'INFO_FORMAT': 'text/html'
            });
        if (url) {
            document.getElementById('info').innerHTML =
                '<iframe seamless src="' + url + '"></iframe>';
        }
    });
}

This part works fine so far.

Now combine the getfeature-request with the "user-interface" (here just a checkbox)

var userquery = function() {
    var $input = $( this );
    //checkbox true/false
    if($input.prop("checked")) {
        //change cursor appearance
        map.getViewport().style.cursor = 'help';
        //getfeature-request on singleclick
        getfeature('singleclick');
     } 
    else {
        //change cursor appearance, when checkbox is unchecked
        map.getViewport().style.cursor = '';
        //WHAT TO DO HERE???
        //...
   }
};

the checkbox with id="cursor10"

var checkbox = document.getElementById('cursor10');

and add the functionality via

checkbox.onchange = userquery;

At the moment the getfeature-function is continue working once it's activated.

What do I need to do, so the getfeature function will stop working when the checkbox is unchecked? Or any ideas for another approach?

see the code on http://jsfiddle.net/d1wrkb95/ activate the chekbox and click in the map to get the response of the getfeature-request — MichaelJS, Jun 09 '15 at 15:08
feel free to accept and/or upvote my answer if it meet your expectations. Else, you are invited to give comment — Below the Radar, Jun 09 '15 at 16:40

Below the Radar · Accepted Answer · 2015-06-09T16:04:40.243

You can use the unByKey() function to unregister the event listener of the map by its key

see: http://jsfiddle.net/d1wrkb95/2/

var mapEventKey;

var getfeature = function(click) {
    mapEventKey = map.on(click, function (evt) {
        document.getElementById('info').innerHTML = '';
        var viewResolution = (view.getResolution());
        var url = wms_url.getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, projection_to,
            {
                'INFO_FORMAT': 'text/html'
            });
        if (url) {
            document.getElementById('info').innerHTML =
                '<iframe seamless src="' + url + '"></iframe>';
        }
    });
};


var userquery = function() {
    var $input = $( this );
    //checkbox true/false
    if($input.prop("checked")) {
        //cursor ändern
        map.getViewport().style.cursor = 'help';
        //getfeatureabfrage bei einzelklick
        getfeature('singleclick');
     } 
    else {
        map.unByKey(mapEventKey);
        map.getViewport().style.cursor = '';
   }
};

De-/activate getfeature-request via button

1 Answers1