How to toggle geojson layer visibility in openlayers 3 on click of a button?

0
votes

I have several geojson layers added via:

    var layer1 = new ol.layer.Vector({
        title: 'Geojson 1',
        source: new ol.source.Vector({
            url: 'geojson1.json',
            format: new ol.format.GeoJSON()
        })
    });

    map.addLayer(layer1);
    var layer1 = new ol.layer.Vector({
        title: 'Geojson 2',
        source: new ol.source.Vector({
            url: 'geojson2.json',
            format: new ol.format.GeoJSON()
        })
    });

    map.addLayer(layer2);

How can I create a button "Toggle Layer 1" and another button for "Toggle Layer 2" outside of my map that has an onclick event so that the corresponding layer will show and hide on click?

1
javascriptopenlayers-3

1 Answers

1
votes

You can bind it to button element like this (using layer1 as an example, similar for layer2 as well):

document.getElementById("myBtn").onclick = function() { 
    layer1.setVisible(!layer1.getVisible());
};

If you have a lot of these layers/buttons, a helper function could generalize the step and make it cleaner:

var bindLayerButtonToggle = function (btnId, layer) {
    document.getElementById(btnId).onclick = function() { 
        layer.setVisible(!layer.getVisible());
    };
}

Then you can just do:

bindLayerButtonToggle("myBtn", layer1);
bindLayerButtonToggle("myBtn2", layer2);