12

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 | |
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 | |
  • Now I'm working on formatting the GetFeatureInfo data with Geoserver Freemarker templates. Any thoughts on a Leaflet hover/mouseover interaction? – zarbo Sep 14 '11 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 '11 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 '11 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 '14 at 14:29
  • 4
    @PedroMendes The link to the example is unfortunately broken. Could you please update it? – ustroetz Jun 4 '14 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 | |
  • Note that WMS GetFeatureInfo can return JSON now. – Alex Leith Apr 15 '16 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.