Leaflet WMS Tile Layer bounds set

Question

I want to limit my wms tile layers with a region. I saw a parameter in the WMSTileLayer bounds, however it can't be usable it always gives an error lat long.

TypeError: Cannot read property 'lat' of undefined

It looks like wms tile layer not overlapping with coordinates. I set the srs option such a below


  <WMSTileLayer
    layers={tile.layer}
    format='image/png8'
    version='1.3'
    url={tile.url}
    tiled={true}
    bounds={tile.bounds}
    time={tile.date}
    transparent={true}
    zIndex={tile.zIndex}
    srs={CRS.EPSG4326}
  />

and bounds

      bounds: [
        [27.5, 37.5],
        [28.24, 37.9]
      ]

Geoserver configuration can be shown in the image.

Thanks for your help.

Seth Lutske Seth Lutske · Accepted Answer · 2021-04-08T15:27:49

WMSTileLayer inherits from L.TileLayer, which inherits from L.GridLayer. The bounds option is an instance of L.LatLngBounds, but you have it as an array of numbers. You need to construct a latLngBounds from your bounds:

const { bounds } = tile
// bounds:
// [
//  [27.5, 37.5],
//  [28.24, 37.9]
// ]

const latLng1 = L.latLng(bounds[0]);
const latLng2 = L.latLng(bounds[1]);

const myLatLngBounds = L.latLngBounds(latLng1, latLng2);

Now you can use that in the bounds prop of the WMSTileLayer:

 <WMSTileLayer
    ...
    bounds={myLatLngBounds}
    ...
  />

Leaflet WMS Tile Layer bounds set

1 Answers