How to call getFeatureInfo from react-leaflet? [closed]

Question

I have example from github how to add wms layer: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/wms-tile-layer.js

but how to getFeatureInfo on click from wms layer?

Answer 1

react-leaflet WMSTileLayer component implements core leaflet L.TileLayer which does not support GetFeatureInfo :

There’s no GetCapabilities support, no legend support, and no GetFeatureInfo support.

You could consider to utilize WMS plugin for Leaflet which supports GetFeatureInfo, for instance leaflet.wms

Installation steps:

install leaflet.wms package:

npm i leaflet.wms

introduce a component for WMS layer:

import React, { Component } from 'react';
import { withLeaflet, useLeaflet } from "react-leaflet";
import * as WMS from "leaflet.wms";

function CustomWMSLayer(props) {
    const { url, options,layers } = props;
    const ctx = useLeaflet()
    const map = ctx.map;


    // Add WMS source/layers
    const source = WMS.source(
        url,
        options
    );

    for(let name of layers){
        source.getLayer(name).addTo(map)
    }

    return null;
}

Result

Demo

Answer 2

In React-Leaflet V3, the useLeaflet and withLeaflet Hooks are replaced with useMap. The updation to @Vadim Gremyachev code is below.

import React from 'react';
import {  useMap } from "react-leaflet";
import * as WMS from "leaflet.wms";

function GetFeatureInfoWms(props) {
    const { url, options,layers } = props;
    const map = useMap()

// Add WMS source/layers
const source = WMS.source(
    url,
    options
);

for(let name of layers){
    source.getLayer(name).addTo(map)
}
return null;
}