How do I display a popup showing feature attributes from a Geoserver WMS layer in a leaflet map?

Question

I'm pretty new to Leaflet and I'm trying to get some pretty basic (or so I thought) functionality on my webmap. In short, I have many (179) WMS layers hosted on Geoserver and I would like the user to be able to click any feature and display a popup showing information about the feature.

I have 179 layers each representing the polygon footprints of paper map sheets for the map library I work for. Each of the layers represents one "series" of maps in the collection. The attribute fields for each layer are identical. Some of the features are stacked on top of one another (multiple records for different editions of the same map). To give you an idea of what I'm interested in creating, here is a link to my pilot application (showing just 3 of the layers) I made in ArcGIS online. Forgive the elementary HTML, it was just an example to show what I needed to do.

I have created a leaflet map displaying two of the layers and I would like to add the other layers once I figure out this functionality.

Is it possible to make a popup that can show information from multiple features from multiple layers?

Can I control the attributes which are displayed in the popup?

Would it be easier to do some kind of "info window" rather than popups?

Really, any suggestions to keep me from giving up on this project would be much appreciated.

var map;

 function mapinitialize() {

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

map = new L.Map('map',
    {
        center: new L.LatLng(46, -90),
        zoom: 6,
        layers: [osm],
        zoomControl: true
    });



//This is all for the layer control:

var f0999 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
    layers: "Geodex:f0999",
    format: 'image/png',
    styles: 'F0999',
    transparent: true,
    attribution: ""
});


var f0177 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
    layers: "Geodex:f0177",
    format: 'image/png',
    styles: 'F0177',
    transparent: true,
    attribution: ""
}); 

var baseMaps = {
"osm": osm
};

var overlayMaps = {
"f0999 Messing Around Layer": f0999,
"f0177 Nautical Charts": f0177
};

L.control.layers(baseMaps, overlayMaps).addTo(map);
//End layer control

The current popup:

map.on('click', function(e){

var popupContent = "You have clicked the map at " + e.latlng.lat + ", " + e.latlng.lng;

var marker = new L.marker(e.latlng).addTo(map)
        .bindPopup(popupContent)
        .openPopup();   

 });

 }

All the references to popups in leaflet I can find are assigned to markers, and as you can see in the code, I have been able to assign a popup to a marker.

Ideally, I would like to place a marker where the user clicks and display attributes for the features underneath. The intention is that a user can use this application to query what maps we have for a specific area.

Jason Koopmans Jason Koopmans · Accepted Answer · 2015-07-22T13:23:44

If you are using the 7.X version of leaflet, there isn't direct support for this in the box. Luckily for all of us, the library supports customization through plugins and object extension well.

Personally, I've adapted this example for a similar need. It wouldn't accommodate showing details for multiple layers, but with some additional customization that could be accomplished. You'd definitely be able to control what attributes are shown.It extends the framework provided WMS tile layer adding the ability to do a WMS GetFeatureInfo request which is at the heart of what you need.

It seems like GeoServer's OpenLayers backed layer preview feature does do this, but the results are loaded in another div, not a popup. OpenLayers might support this more in-the-box if you prefer not to get your hands too dirty.

Also, if using a WFS layer is an option you would have a much easier time attaching an onclick event using that layer's onEachFeature event. If the number of features were small, you could bind popups to the data you want to show -- with an onclick listener to show the popup when clicked. I can provide some examples of this if it's interesting.

How do I display a popup showing feature attributes from a Geoserver WMS layer in a leaflet map?

1 Answers