OpenLayers 5 – Utilizing ZoomToExtent API

Question

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
});

Answer 1

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