title: How do I display a popup showing feature attributes from a Geoserver WMS layer in a leaflet map?
body: <p>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.</p>
  
  <p>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 <a href="https://pantherfile.uwm.edu/srappel/www/Index.html" rel="nofollow">link to my pilot application</a> (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.</p>
  
  <p>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.  </p>
  
  <p>Is it possible to make a popup that can show information from multiple features from multiple layers?</p>
  
  <p>Can I control the attributes which are displayed in the popup?</p>
  
  <p>Would it be easier to do some kind of "info window" rather than popups?</p>
  
  <p>Really, any suggestions to keep me from giving up on this project would be much appreciated.</p>
  
  <pre><code>var map;
  
   function mapinitialize() {
  
  var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;'
  });
  
  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
  </code></pre>
  
  <p>The current popup:</p>
  
  <pre><code>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();   
  
   });
  
   }
  </code></pre>
  
  <p>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.  </p>
  
  <p>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.  </p>