How to add pop up to WMS Layer in react- leaflet

Question

I use react-leaflet to display WMS Layer <WMSTileLayer url="http://localhost:8080/geoserver/cite/wms?service=WMS" {...mapprops2} ></WMSTileLayer>

I use geoserver url to get the data, but how exactly should I pass user click(lat,long or X and Y) to this link and fetch data?

http://localhost:8080/geoserver/cite/wms?service=WMS&version=1.1.0&request=GetFeatureInfo&layers=cite%3Acar&QUERY_LAYERS=cite%3Acar&bbox=-3.2503604888916%2C51.4469833374023%2C-3.16548633575439%2C51.5405578613281&width=696&height=768&srs=EPSG%3A4326&format=application/json&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&STYLES=&WIDTH=101&HEIGHT=101

How do I add pop up using getFeatureInfo based on user click on this layer? Is there something like latLngToLayerPoint in react-leaflet too?

Answer 1

Having had an opportunity to get familiar with react-leaflet recently, my advice is BetterWMS. It requires a bit of tweaking on coordinates precision, but its not hard to get it working. Take a look at my example that also has pictures in popups!

Answer 2

Use latLngToContainerPoint in react leaflet

Answer 3

You can add a new WFS for your tooltip positions. Add an overlay layer top of the WMS Tile Layer in react-leaflet.