2

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?

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
hoge6b01
  • 1,118
  • 3
  • 20
  • 39
  • You just need to search for example of sending GetFeatureInfo requests to GeoServer. Google is your friend here. – simogeo Mar 09 '15 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 09 '15 at 16:26
  • 3
    I've had luck with this in the past: https://gist.github.com/rclark/6908938 – toms Mar 09 '15 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 09 '15 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 '15 at 20:42
  • That was a good hint. I updated the JSFiddle. It now sends the right request. But still does not display it on the map. What else do I have to change? – hoge6b01 Mar 11 '15 at 09:58

1 Answers1

2

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

whyzar
  • 12,053
  • 23
  • 38
  • 72
Thomas B
  • 8,807
  • 1
  • 21
  • 62
  • 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 '15 at 13:15
  • Would it be possible to show a vertical instead of a horizontal list in the popup? Thanks – hoge6b01 Mar 12 '15 at 13:27
  • Yes you can use Freemarker-Templates (http://docs.geoserver.org/latest/en/user/tutorials/GetFeatureInfo/index.html) or use "info_format=application/json" and iterate trough the response ( http://docs.geoserver.org/stable/en/user/services/wms/reference.html#getfeatureinfo ) – Thomas B Mar 12 '15 at 14:20
  • Thank you very much. I added "propertyName:'LAND,DATUM'" to the L.TileLayer.BetterWMS.js. It now shows these two variables in the popup, but also fid. How can I exclude a field? Is it possible? – hoge6b01 Mar 12 '15 at 16:07
  • with Freemarker-Templates that's easy to realize.Otherwise you can use css to set the first child of every row to display:none. – Thomas B Mar 13 '15 at 08:37
  • Thanks Thomas! If I understand it correctly to use the Freemarker-Templates I have to change files on the server directly. But what if I use other geoservers not handled from my own server? In this case CSS seems to be the better choice, right? Would you mind (as I have no clue how to do it) to my Github and tell me how to change the CSS (if possible shouldn't display the headline as well). Thank you very much – hoge6b01 Mar 13 '15 at 13:00
  • 1
    that's right. for the css-cheat have a look at: https://gist.github.com/anonymous/268fd3023199a3611784 – Thomas B Mar 13 '15 at 15:57
  • Very nice. Thanks you so much. Works! (now I'll need to find out how to fix that if no feature is selected no empty popup shows up. should be the next question. thanks – hoge6b01 Mar 14 '15 at 22:20
  • 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 '15 at 22:04
  • Well, seems like finding a nicer solution isn't that easy. Regarding the quick-and-dirty workaround: where do I have to put your mentioned lines? thanks – hoge6b01 Mar 25 '15 at 12:39
  • 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 '15 at 14:02
  • The two steps described in http://apps.csdila.ie.unimelb.edu.au/index.php/how-to-enable-cors-on-geoserver/ helped me to get rid of the cross-domain issue. – Dirk May 11 '15 at 13:35