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?

@SethLutske Please see the new edit, I am requesting geoserver url using axios get in react-leaflet. — Vasuprada Pottumuttu, Feb 22 '21 at 11:12

score 0 · Answer 1 · edited Apr 02 '21 at 13:29

0

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

edited Apr 02 '21 at 13:29

Adrian Mole

49,934
160
51
83

answered Apr 02 '21 at 12:15

Caner Çalık

3
3

score -1 · Answer 2 · answered Feb 23 '21 at 08:27

-1

Use latLngToContainerPoint in react leaflet

answered Feb 23 '21 at 08:27

Anonymous969

1

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

2 Answers2