Leaflet WMS Tile Layer bounds set - leaflet

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.

Answer 1

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}
...
/>