[GIS] toggle visibility of a Layer in Openlayers 3(!) with a Checkbox

htmljavascriptopenlayersopenlayers-2visibility

I have some vector layers on top of a tiled layer and a checkbox for each vector layer. I want a layer to be visible if its checkbox is checked and vanish if it gets unchecked.

I tried to call a function with the onchange attribute of the checkbox. It should set the visibility of the layer according to the (un)checked state of the checkbox.

This is my fiddle but unfortunately the checkboxes don't change anything.

edit: updated the code..

Best Answer

You need to call setVisibility(true/false) on the layer.

setVisibility

All you are doing in your code is changing the value of static variables. This will not trigger any action on the layer.

In your checkbox handler, you need to get a reference to the layer and change the visibility:

triangleLayer1.setVisible(value);

Related Solutions

[GIS] Openlayers – Vector Layer – Combining hide/show features using style property

You are using the JavaScript switch - case construct incorrectly. You need to add a break statement at the end of each case block, e.g.

switch (f) { 

    /* ... */

    case 'type_2': 
        if (checked) {
            filter('show_type_2');
        } else {
            filter ('hide_type_2);
        }
        break;

    case 'shape_1': 
        if (checked) {
            filter('show_shape_1');
        } else {
            filter ('hide_shape_1);
        }
        break;

}

Note that the case keyword only marks the beginning of execution, and the next case keyword does not mean the end of execution. You have to use break or return if you want to leave the switch block once it was entered.

[GIS] openlayers toggle visibility of layer

I cannot fully understand the code you have posted.

When using the library OpenLayers, the usual programming pattern - as seen in the examples available at OpenLayers web page - consists on creating an instance of OpenLayers.Map that is stored in a global variable, so it is available to every function.

Let us suppose that this variable is named map; then, you would get the layer whose visibility you want to toggle with a JavaScript code like this:

var layerName = 'food-growing-projects';
var layer = map.getLayersByName(layerName)[0];
layer.setVisibility(true);

I hope this helps.

Best Answer

Related Solutions

[GIS] Openlayers – Vector Layer – Combining hide/show features using style property

[GIS] openlayers toggle visibility of layer

Related Question