[GIS] Geoserver popups in Leaflet

geoserverleafletpopupwms

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?

Best Answer

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

Related Solutions

[GIS] Using Leaflet WMS Layer from ArcGIS Server

Your piece of code seems to be good in theory. As I used arcGIS/Leaflet in exactly the same way.

But the problem could come from missing spatial reference (or maybe incorrect format (image/png or image/jpeg).

For the spatial reference, here is how Leaflet works :

Leaflet expects default spatial reference : EPSG:3857 / WGS84
But you can change it by an other one with JS plugin like Proj4leaflet by Kartena.

It's really easy and helpful. Works like this (for EPSG:3006) :

You define your new crs

// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS('EPSG:3006',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
  {
    resolutions: [
      8192, 4096, 2048, 1024, 512, 256, 128
    ],
    origin: [0, 0]
  })

And include it in your map :

var map = new L.Map('map', {
    crs: crs
});

You can find Spatial References here.

[GIS] No popup on map if no feature is selected

You can switch to infoformat=application/json so you will get a json response from Geoserver. Then just check how many features are returned and if features.length>0 is true show the popup otherwise not. For this solution you will have to create a table from the json-response. You could do something like that:

set infoformat in your L.TileLayer.BetterWMS.js:

params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          srs: 'EPSG:4326',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'application/json'
          ,propertyName:'LAND,DATUM'  // only get attributes "Land" and "Name"
        };

// Create a function that will return a table from a json response:

function buildpopup(content){

    var record; 

    var info = "<div class=\"mypopupinfo\">";

    for (var i=0 ; i < content.features.length; i++ ){

        record = content.features[i];

        info += "<div class=\"popupinfo\"><table>"
        info += "<tr><th><b>Name: </b></th></tr>";
        info += "<tr><td>" + record.properties.name + "</td></tr>";
        info+="</table></div>";


        if (i!= (content.features.length-1)){
            info += "<br />";
        }

    }

    info += "</div>"


    return info;

}

and use this function while setting the content of the popup:

    showGetFeatureInfo: function (err, latlng, content) {
    if (err) {
    return;
    } // do nothing if there's an error

    if (content.features.length>0)
    {
    // Otherwise show the content in a popup, or something.
    L.popup({ maxWidth: 800})
      .setLatLng(latlng)
      .setContent(buildpopup(content))
      .openOn(this._map);
      }
      else 
      {
      }
  }

Screenshot from my working example with json response: enter image description here

EDIT1: added two gists:

html-part: https://gist.github.com/anonymous/aa86f117f1342179f2e3

js-part: https://gist.github.com/anonymous/f6e7dc3d4eff9e0ed62b

Best Answer

Related Solutions

[GIS] Using Leaflet WMS Layer from ArcGIS Server

[GIS] No popup on map if no feature is selected

Related Question