0

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.

1

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, (...)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.