3

I need a LayerSwitcher with the possibility of including a "zoom to extent" button for each layer. So, searching I found the example:

https://viglino.github.io/ol-ext/examples/control/map.switcher.html

I took the source code of the example and made a change, including another layer layer_limit. However, this layer that includes it did not show the "zoom to extent" button, as it is on GEOLOGIE layer. Can someone help me?

enter image description here

Here is my code:

var brgm = new ol.layer.Tile ({
"title": "GEOLOGIE",
"extent": [
  -653182.6969582437,
  5037463.842847037,
  1233297.5065495989,
  6646432.677299531
],
"minResolution": 3.527777777777778,
"maxResolution": 3527.777777777778,
"source": new ol.source.TileWMS({
  "url": "https://geoservices.brgm.fr/geologie",
  "projection": "EPSG:3857",
  "params": {
    "LAYERS": "GEOLOGIE",
    "FORMAT": "image/png",
    "VERSION": "1.3.0"
  },
  "attributions": [
    "<a href='http://www.brgm.fr/'>&copy; Brgm</a>"
  ]
})
});
  
var layer_limit = new ol.layer.Vector({
    title: 'Limit',
    visible: true,
    zIndex: 1,
    style: new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(83,0,255,0.050980392156862744)',
        opacity: 1
      }),
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 0, 0.35)',
        width: 4,
        opacity: 1
      })
    }),
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
          return urlGeoserver +'wfs?service=WFS&' +
              'version='+versionGeoserver+'&request=GetFeature&typename=LIM&' +
              'outputFormat=application/json&srsname=EPSG:4326&' +
              'all=' + extent.join(',') + ',EPSG:4326';
        },
        strategy: ol.loadingstrategy.all
    })
});
// The Map
var map = new ol.Map({
target: 'map',  
 view: new ol.View({
        center: ol.proj.fromLonLat([-46.444137, -23.713596]), 
        zoom: 12
    }),
layers: [ baseLayers, brgm, layer_limit ]
});

map.addControl(new ol.control.LayerSwitcher({ 
//target:$(".layerSwitcher").get(0), 
//trash: true, 
extent: true,
collapsed: false 
}));
2
  • Zoom to extent button is shown for those layers that have extent defined. Layer brgm has extent, but layer layer_limit doesn't.
    – TomazicM
    Nov 27, 2023 at 17:31
  • How can I set the extension when creating the layer_limit layer, the way it is being created? I can't leave it fixed, as it is constantly being added to. Nov 27, 2023 at 17:45

1 Answer 1

5

Zoom to extent button is shown for those layers that have extent defined. Layer brgm has extent, but layer layer_limit doesn't.

One possible solution for this is to catch featuresloadend event for layer_limit layer source, get source extent, then set layer_limit extent and only then add layer switcher control.

Relevant part of the code could then look something like this:

var layer_switcher = new ol.control.LayerSwitcher({ 
  extent: true,
  collapsed: false 
});

var layer_limit_source = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function(extent) {
    return urlGeoserver +'wfs?service=WFS&' +
      'version='+versionGeoserver+'&request=GetFeature&typename=LIM&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      'all=' + extent.join(',') + ',EPSG:4326';
  },
  strategy: ol.loadingstrategy.all
})
layer_limit_source.on('featuresloadend', function(evt) {
  var extent = layer_limit_source.getExtent();
  layer_limit.setExtent(extent);
  map.addControl(layer_switcher);
});

var layer_limit = new ol.layer.Vector({
  title: 'Limit',
  visible: true,
  zIndex: 1,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(83,0,255,0.050980392156862744)',
      opacity: 1
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.35)',
      width: 4,
      opacity: 1
    })
  }),
  source: layer_limit_source
});
3
  • 1
    Got it, thank you. In the example I only used one layer layer_limit, but if there are more layers, where should I add map.addControl(layer_switcher);? Nov 27, 2023 at 19:30
  • If answer helped you solve you problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems know that problem was resolved. If there are more layers, add layer switcher when all are loaded. If you don't know how to do that, that's a separate question, otherwise one question could go ad infinitum.
    – TomazicM
    Nov 27, 2023 at 19:40
  • Thanks for this info but Andreia's remark makes sense : since the extent of a layer is found in the capabilities (WMS layer in my case), why does the programmer have to give that info (again) ? It's weird...
    – bendeg
    May 10 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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