Get extent of WMS layer dynamically in Leafletjs

The Web Map Service(WMS) standard provides a simple HTTP interface for requesting geo-registered map images. Since it is the image, we have to provide the Bounding box for getting the layer. The leaflet calculates the bounding box internally. The WMS layer can get in the leaflet using the following syntax,

var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/wms?', {
    layers: 'workspace:layer_name'
}).addTo(map);

For the geoJSON data, we can get the map to extend directly using getBounds function on the map object. The getBounds is not available for the WMS standard. So we can not get the map bounds and can not zoom the required WMS layer to the map dynamically. But Unfortunately, we can get the required bounding box information through getCapabilities request. I am using axios for the HTTP client as below,

var wms_url = "http://localhost:8080/geoserver/wms?service=wms&version=1.1.1&request=GetCapabilities";

axios.get(wms_url).then((res) => console.log(res.data));

The response from the above request will provide you the XML as the response data. Since the data output is in XML, first of all, you need to JSON and you can filter the bbox for the required layer. The easiest way to convert it is by using wms-capabilities. First of all, you need to include this library in your code.

<script src="path/to/wms-capabilities.min.js"></script>

After that, you need to filter the data by writing the code something like below,

axios.get(wms_url).then((res) => {

    // For convert the xml to JSON
    const json = new WMSCapabilities(res.data).toJSON();

    // GetCapabilities provides all the layers so we need to filter the required one.
    const layers = json?.Capability?.Layer?.Layer;
    const layer = layers?.filter(
      (l) => l.Name === `${workspace}:${layer_name}`
    )[0];

    // To get the bounding box of the layer
    const bbox = layer?.LatLonBoundingBox;

    // Use this bounding box to zoom to the layer,
    map.fitBounds([
          [bbox[1], bbox[0]],
          [bbox[3], bbox[2]],
        ]);
});

Replace the ${workspace}:${layer_name} with your workspace and layer_name.

Replace the map with your leaflet map object.

Note: Please use getCapabilities request having a version less than or equal to 1.1.1. On the greater version, the LatLonBoundingBox is missing. But the problem with these versions are, it fetches all the information from the server, we can't filter the capabilities for some specific layer only. That means the namespace parameter will not work.

Happy coding!