CODEWITHSUNDEEP
reactjsgeoserverreact-leafletwmsgetfeatureinfo
Vasuprada Pottumuttu
Vasuprada Pottumuttu

Reputation: 11

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

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?

Upvotes: 1

Views: 1572

Answers (4)

Rodrigo Gomes
Rodrigo Gomes

Reputation: 1

Try this format:

<WMSTileLayer key={camada.id}
url="http://localhost:8080/geoserver/cite/wms"
layers="cite:car&QUERY_LAYERS"
version="1.1.0"
minZoom={1}
maxZoom={25}
width=696
height=768
params={{
    transparent: true,
    attribution:"© WMS Source",
    format:"image/png",
}}/>

Upvotes: 0

ydrea
ydrea

Reputation: 95

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!

Upvotes: 1

Caner &#199;alık
Caner &#199;alık

Reputation: 3

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

Upvotes: 0

Anonymous969
Anonymous969

Reputation: 1

Use latLngToContainerPoint in react leaflet

Upvotes: -1

Related Questions