[GIS] Changing visibility of layers on project with OpenLayers and GeoServer

geoserveropenlayersvisibility

I'm working on a proyect with openlayers and geoserver, the idea is to have a select menu where the user can choose which layer is visible, something like this

  <select id="format">
    <option value="rios_dobles">Rios Dobles </option>
    <option value="rios_simples">Rios Simples</option>  
    <option value="lagos_lagunas">Lagos Lagunas</option>
    <option value="vias">Vias</option>
    <option value="limite_parroquial" selected>Limite Parroquial</option>
    <option value="basicos">Basicos</option>
    <option value="Centros_Poblados">Centros Poblados</option>
    <option value="Aptitud_final">Aptitud Final</option>
    <option value="uso_final">Uso Final</option>
  </select>

The layers are set like this

var limites = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,

                    url: 'http://localhost:8080/geoserver/gis2017/wms',
                    params: {'FORMAT': format,
                        'VERSION': '1.1.1',
                        STYLES: '',
                        LAYERS: 'gis2017:limite_parroquial',
                    }
                })
            });

And are displayed on the map like this

var map = new ol.Map({
                controls: ol.control.defaults({
                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                        collapsible: false
                    })
                }).extend([mousePositionControl]).extend([scaleLineControl]),
                interactions: ol.interaction.defaults().extend([
                new ol.interaction.DragRotateAndZoom()
                ]),

                target: 'map',

                layers: [
                    limites,
                    //lagos,
                    //vias,
                    //riosDobles,
                    aptitud,
                    //centros,
                    //riosSimples,
                    uso,
                ],

                view: new ol.View({
                    projection: projection
                }),
            });

At least as a test I've seen if I can make the layer limites visible or not, but it won't work, I've tried using the methots setVisible and setVisibility but regarldess of weather or not I put true or false, the layer won't display (or any other for that matter)

I don't know what to change or do, I'm completely stuck.

Best Answer

You need to address 3 things:

Assign a name to each layer

You need to identify your layers to know which layer you want to make visible or invisible.

For each layer, add a nameproperty to it, like:

var limites = new ol.layer.Image({
    name: 'limites';
    source: new ol.source.ImageWMS({
        ratio: 1,
        (...)

Comboxbox option values

On the combobox, for each option, the value must be equal to the layer name, like:

<select id="format">
    (...)
    <option value="limites" selected>Limite Parroquial</option>
    (...)
</select>

Listener to change visibility

If you have assigned names to the layers and the combox have values equals to the layer names, you can write a small fuction to handle the visibility, like:

document.getElementById("format").addEventListener("change", changeVisibility);

function changeVisibility() {
    var layer_name = this.value;
    map.getLayers().forEach(function(lyr) {
        // console.log(lyr.get('name'));
        if (lyr.get('name') === layer_name) {
          var is_visible = lyr.get('visible');
          lyr.setVisible(!is_visible);
        }
    });
}

Geoserver transparent option

Since you are using Geoserver, you may need to add the transparentoption to your layer requests, like:

"VERSION": "1.1.1", "transparent": true, (...)
Related Question