I've got a simple Leaflet map with a basemap and one map-layer coming from my own hosted GeoServer.

I made the layers show up nicely in a map.

Now I want to add popups on the point layer showing information stored in MapService.

I couldn't find too much information about that topic.

There's one link to a working example but the link seems to be broken. I found another example which I addopted. You can see it on JSFiddle. I'd like to display the content of the name field in the attribute table but nothing happens when the user clicks the map.

Any idea?

  • You just need to search for example of sending GetFeatureInfo requests to GeoServer. Google is your friend here.
    – simogeo
    Mar 9, 2015 at 16:19
  • Well, I'm not really good at writing things like that! Would you mind to help me a bit? Thanks
    – hoge6b01
    Mar 9, 2015 at 16:26
  • 3
    I've had luck with this in the past: gist.github.com/rclark/6908938
    – toms
    Mar 9, 2015 at 17:15
  • Thanks. Okay, now I can see that it's sending a request but it does not show any popup in the map. Do I have to add code to my index.html? I took the code as provided in the link above. If you want I can put into a JSFiddle. Any idea?
    – hoge6b01
    Mar 9, 2015 at 19:52
  • I get HTTP 400 errors when I click the map in your fiddle. Are you sure your built URL is correct?
    – pk.
    Mar 10, 2015 at 20:42

1 Answer 1


The problem with your jsfiddle is that you try to do a Cross-Domain-Request that gets blocked due to the Same-Origin-Policy.

enter image description here

I could imagine that this is the same Problem on your server. If you host your Leaflet-App on Port 80 and try to get the Feature-Info from port 8080 this will be blocked. You can solve this problem by making your geoserver available on port 80,too or by using a proxy-file.

The first option would be less effort, so perhaps you could try this first.

Here you'll find more information: Getting WFS data from Geoserver into leaflet https://gist.github.com/jacobandresen/1004676

The other option would be to set up a proxy-file (php-file for example) and perhaps also use L.TileLayer.BetterWMS ( https://gist.github.com/rclark/6908938 ) which works,too: enter image description here

  • Thanks. I'll have a look at the cross-domain later (eventhough I think my webserver uses port 4711 and my geoserver 8080, so probably won't be a problem in production environment). I got a working map with popups using the BetterWMS you cited above. Now my question: As you can see in the screenshot the popup shows all available information. Would it be possible to define, let's says, to display infor from the "name" field only? thanks and BR
    – hoge6b01
    Mar 12, 2015 at 13:15
  • Would it be possible to show a vertical instead of a horizontal list in the popup? Thanks
    – hoge6b01
    Mar 12, 2015 at 13:27
  • 1
    that's right. for the css-cheat have a look at: gist.github.com/anonymous/268fd3023199a3611784
    – Thomas B
    Mar 13, 2015 at 15:57
  • 1
    a quick-and-dirty-workaround is to check the text-length of the response...something like if(content.length>658){ // show popup} else { } but perhaps a question on SE will give you a even nicer solution ;)
    – Thomas B
    Mar 15, 2015 at 22:04
  • 1
    in your callback-function: "success: function(data) { " ... there it's probably data.length or data.text.length what you have to check
    – Thomas B
    Mar 25, 2015 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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