BetterWMS for React-Leaflet v4.x

BetterWMS.jsx

import L from "leaflet";
import "./L.TileLayer.BetterWMS";
import {
    createTileLayerComponent,
    createElementObject,
    updateGridLayer
} from "@react-leaflet/core";

const BetterWMS = createTileLayerComponent(
  function createBetterWMSLayer({options, url, layers, ...props}, context) {

    const layer = L.TileLayer.betterWms(url, {layers, ...props})

    return createElementObject(layer, context)
  },
    (layer, props, prevProps) => {
    updateGridLayer(layer, props, prevProps);

    if (props.params != null && props.params !== prevProps.params) {
      layer.setParams(props.params);
    }
  }
);

export default BetterWMS

L.TileLayer.BetterWMS.js

// Credits to https://gist.github.com/rclark/6908938
import L from 'leaflet'

L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
  onAdd: function (map) {
    // Triggered when the layer is added to a map.
    //   Register a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    // Triggered when the layer is removed from a map.
    //   Unregister a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },

  getFeatureInfo: function (evt) {
    // Make an AJAX request to the server and hope for the best
    var url = this.getFeatureInfoUrl(evt.latlng),
    showResults = L.Util.bind(this.showGetFeatureInfo, this);

    console.log(url)

    // UNCOMMENT HERE AND INSTALL JQUERY

    // $.ajax({
    //     url: url,
    //     success: function (data, status, xhr) {
    //         var err = typeof data === 'string' ? null : data;
    //         showResults(err, evt.latlng, data);
    //     },
    //     error: function (xhr, status, error) {
    //         showResults(error);
    //     }
    // });
  },

  getFeatureInfoUrl: function (latlng) {
    // Construct a GetFeatureInfo request URL given a point
    const point = map.latLngToContainerPoint(latlng);
    const size = map.getSize();

    // https://docs.geoserver.org/latest/en/user/services/wms/reference.html#wms-getfeatureinfo
    params = {
    request: 'GetFeatureInfo',
    service: 'WMS',
    crs: 'EPSG:4326',
    styles: this.wmsParams.styles,
    transparent: this.wmsParams.transparent,
    version: this.wmsParams.version,
    format: this.wmsParams.format,
    bbox: this._map.getBounds().toBBoxString(),
    height: size.y,
    width: size.x,
    layers: this.wmsParams.layers,
    query_layers: this.wmsParams.layers,
    info_format: 'text/html'
    };

    params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
    params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;

    return this._url + L.Util.getParamString(params, this._url, true);
  },

  showGetFeatureInfo: function (err, latlng, content) {
    if (err) { console.log(err); return; } // do nothing if there's an error

    // Otherwise show the content in a popup, or something.
    L.popup({ maxWidth: 800})
    .setLatLng(latlng)
    .setContent(content)
    .openOn(this._map);
  }
});

L.TileLayer.betterWms = function (url, options) {
  return new L.TileLayer.BetterWMS(url, options);
};

Map.jsx

import 'leaflet/dist/leaflet.css'
import {MapContainer, TileLayer} from "react-leaflet";
import BetterWMS from "./BetterWMS";

function Map() {

  const wmsLayer = {
    id: '777',
    url: "http://localhost:8080/geoserver/ows?",
    layers: "public:my_layer",
    props: {
      version: "1.3",
      format: "image/png",
      transparent: true,
      tiles: true,
      zIndex: 150,
      uppercase: true,
      opacity: '0.8'
    }
  }

  return (
    <MapContainer center={[-15.795, -47.890]} zoom={8} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* DON'T FORGET TO UNCOMMENT AJAX REQUEST ON L.TileLayer.BetterWMS.js OR CHANGE TO AXIOS*/}
      <BetterWMS 
        key={wmsLayer.id}
        id={wmsLayer.id}
        url={wmsLayer.url} 
        layers={wmsLayer.layers} 
        {...wmsLayer.props}
      />
    </MapContainer>
  );
}

export default Map;

thanks for this!