0

I have a button with class search_ and when clicked i want to change the map view to a specific extent. I am using ZoomToExtend API.

Here is what i try, without anything working:

   var roadlayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var map = new ol.Map({
    target: 'map',
    layers: [roadlayer],
    controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
    view: new ol.View({
        center: ol.proj.fromLonLat([33.33386, 35.14710]),
        zoom: 14,
        maxZoom: 19
    })
});
var layerExtent = roadlayer.getExtent();

$('.search_').on('click', function() {
    var ZoomToExtend = function() {
        map.getView().fit(layerExtent, map.getSize());
    }

    try {
        ZoomToExtend();
    } catch (err) {
        alert(err);
    }

});

Errors:

Error 1: Uncaught TypeError: Cannot read property 'getSimplifiedGeometry' of undefined

roadlayer.getExtent(); is undefined. Note that it's the base layer.

Update: Mike's comment helped but getExtent() only works for the baselayer. What should i use for the dynamically added layer below?

var wmsLayer_Parcel = new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: NicURL,
    params: {
      'LAYERS': 'parcel_layer'
    },
    serverType: 'geoserver',
   // crossOrigin: 'anonymous',
  })
});

This won't work:

var layerExtent = wmsLayer_Parcel.getExtent() || wmsLayer_Parcel.getSource().getTileGrid().getExtent();

var ZoomToExtent = function(){
map.getView().fit(layerExtent,{
  duration: 1600,
  nearest: true
});
  • layerExtent is undefined? – Fran Raga May 13 at 8:58
  • 2
    You haven't specified and extent when you declared roadLayer. It none is specified the entire extent of the tile grid will be available var layerExtent = roadlayer.getExtent() || roadlayer.getSource().getTileGrid().getExtent(); – Mike May 13 at 9:17
  • 1
    As you can see in OL5 example openlayers.org/en/latest/examples/wms-image.html, for single image WMS you have to specify extent yourself. – TomazicM May 13 at 12:45
  • @TomazicM the layers will be added dynamically depending on the input. So each layer has different size and position. Why should i set the extent statically? – csandreas1 May 13 at 13:22
  • If you don't specify an extent OpenLayers will request data for anywhere covered view's projection. If you know the WMS data has a limited extent you could find the bbox by parsing the WMS capabilities before creating the layer openlayers.org/en/v4.6.5/examples/wms-capabilities.html – Mike May 13 at 14:00
2

If you specify an extent when you create the layer

var wmsLayer_Parcel = new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: NicURL,
    params: {
      'LAYERS': 'parcel_layer'
    },
    serverType: 'geoserver',
   // crossOrigin: 'anonymous',
  }),
  extent: ????
});

wmsLayer_Parcel.getExtent() will return that when you need to fit the layer

  • Alright, i thought that it should be requested from the server and get the result of the extent along with the layers. – csandreas1 May 16 at 13:15
  • 1
    If you know the url and layers you would most likely know or could find out the extent and code it in, but it could be found by loading and parsing the WMS capabilities if necessary, for example if an application wasn't receiving the url and layer requirements until run time. – Mike May 16 at 16:44
  • okay i can you please show an example retrieving the extent from the XMLfile and assign that to the layer extent property? – csandreas1 May 17 at 6:04
  • 1
    You could either create a layer asynchronously after parsing the extent for an immediate fit codepen.io/anon/pen/GaEJJj or create a layer then asynchronously set the extent for use by a button codepen.io/anon/pen/YbQPRz – Mike May 17 at 13:12
  • 1
    To read anything by XHR or fetch the document needs to be either same origin or CORS enabled. For public WMS that is normal, but if you are using your own localhost you will need to enable it in the server settings. – Mike May 27 at 12:00

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.