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

i'm pretty new leaflet , i'm trying pretty basic (or thought) functionality on webmap. in short, have many (179) wms layers hosted on geoserver , user able click feature , display popup showing information feature.

i have 179 layers each representing polygon footprints of paper map sheets map library work for. each of layers represents 1 "series" of maps in collection. attribute fields each layer identical. of features stacked on top of 1 (multiple records different editions of same map). give idea of i'm interested in creating, here link pilot application (showing 3 of layers) made in arcgis online. forgive elementary html, example show needed do.

i have created leaflet map displaying 2 of layers , add other layers once figure out functionality.

is possible make popup can show information multiple features multiple layers?

can control attributes displayed in popup?

would easier kind of "info window" rather popups?

really, suggestions keep me giving on project 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 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 map @ " + e.latlng.lat + ", " + e.latlng.lng;  var marker = new l.marker(e.latlng).addto(map)         .bindpopup(popupcontent)         .openpopup();      });   } 

all references popups in leaflet can find assigned markers, , can see in code, have been able assign popup marker.

ideally, place marker user clicks , display attributes features underneath. intention user can use application query maps have specific area.

if using 7.x version of leaflet, there isn't direct support in box. luckily of us, library supports customization through plugins , object extension well.

personally, i've adapted example similar need. wouldn't accommodate showing details multiple layers, additional customization accomplished. you'd able control attributes shown.it extends framework provided wms tile layer adding ability wms getfeatureinfo request @ heart of need.

it seems geoserver's openlayers backed layer preview feature does this, results loaded in div, not popup. openlayers might support more in-the-box if prefer not hands dirty.

also, if using wfs layer option have easier time attaching onclick event using layer's oneachfeature event. if number of features small, bind popups data want show -- onclick listener show popup when clicked. can provide examples of if it's interesting.