13

I have geoserver serving shapefiles as a WMS into Leaflet.

I'd like to add interativity that shows a popup with WMS attributes in the Leaflet map when the user hovers over or clicks on a WMS feature.

I've seen the wax/leaflet interactivity, but is that possible with WMS and Leaflet?

Improve this question

3 Answers 3

Reset to default
14

You should try using WMS GetFeatureInfo. Here's an example with Leaflet made available Bryan McBride. The event used for triggering the GetFeatureInfo request is onclick.

Improve this answer
5
  • Now I'm working on formatting the GetFeatureInfo data with Geoserver Freemarker templates. Any thoughts on a Leaflet hover/mouseover interaction?
    – zarbo
    Sep 14, 2011 at 16:18
  • As shown in the example you should try changing the event passed to the onMapClick function: line 41 » map.addEventListener('click', onMapClick); I think you should take a look at the documentation page: leaflet.cloudmade.com/reference.html. Regarding the Geoserver freemarker templates I never used it, but it makes more sense to me to make a WFS GetFeature request asking for the response to be formatted in GeoJson instead of the WMS GetFeatureInfo. With that GeoJson object in the client side is far more easy to build a simple HTML markup to display the feature(s) data.
    – Pedro Mendes
    Sep 14, 2011 at 23:54
  • Sorry.. There's no way of making a GetFeature with Leaflet.. :/ Even though you could use the GeoJSON layer for the same effect (the feature's attributes are already accessible on the client). But that's I love OpenLayers =).
    – Pedro Mendes
    Sep 15, 2011 at 0:02
  • Hi Zabro,Did you manage to get this working? i want to implement same. would you mind sharing some code snippets?
    – Pragnesh Patel
    May 15, 2014 at 14:29
  • 4
    @PedroMendes The link to the example is unfortunately broken. Could you please update it?
    – ustroetz
    Jun 4, 2014 at 8:22
4

I get Leaflet interactivity in two ways, depending on how big the dataset is. I would recommend against WMS getFeatureInfo, because the styling is all set server-side, which is tedious to configure. So, here's my two ways:

  1. If the dataset is small, just load the whole thing as a vector (do the request as JSONP or JSON if you have CORS enabled). For example: https://maps.gcc.tas.gov.au/dogexerciseareas.html and code: https://github.com/gccgisteam/maps-website/blob/master/dogexerciseareas.html
  2. If the dataset is large, do an onClick request and return vectors for near features (using JSON or JSONP). Example: https://maps.gcc.tas.gov.au/stormwater.html and code: https://github.com/gccgisteam/maps-website/blob/master/stormwater.html

(That stormwater example is a little more complex than it really needs to be because I change whether a layer is interactive when the layers are turned on and off...)

Improve this answer
1
  • Note that WMS GetFeatureInfo can return JSON now.
    – Alex Leith
    Apr 15, 2016 at 5:06
2

Here's a small plugin which achieves this well: https://gist.github.com/rclark/6908938

If you're using a leaflet version greater than 0.7.3, this is another good plugin to do the on click identification within WMS layers: https://github.com/heigeo/leaflet.wms

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.