2

I have popups working well in Leaflet as pulled from Geoserver utilizing getfeatureinfo and drawing layers using wms. Unfortunately I cannot figure out how to only request a popup information for layers currently drawn on the map. Right now I request my getfeatureinfo with this code:

map.addEventListener('click', onMapClick);
popup = new L.Popup({maxWidth: 1000});
function onMapClick(e) {
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()._southWest.lat+","+map.getBounds()._northEast.lng+","
+map.getBounds()._northEast.lat;
var WIDTH= map.getSize().x;
var HEIGHT = map.getSize().y;
var X = map.layerPointToContainerPoint(e.layerPoint).x;
var Y = map.layerPointToContainerPoint(e.layerPoint).y;
var URL = 'http://xx.xx.xx.xx/geoserver/workspace/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=layer1,layer2&QUERY_LAYERS=layer1,layer2,layer3&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
popup.setLatLng(e.latlng);
popup.setContent("<iframe src='"+URL+"' width='450' height='500' frameborder='0'></iframe>");
map.openPopup(popup);
}

How can I send the getfeatureinfo request url with only the layers checked as active in my TOC in leaflet? (i.e. only layer 1). Right now I get a popup with information from and of the three layers that have a feature where clicked whether they a selected and drawn or not.

4

Create a variable that consists of geoserver layer names for layers that are currently drawn on the map, then pass the variable into the URL string.

To do this its really beneficial to organize your layers in a data structure like:

var layerObj = {};
layerObj["geoserverLayerName"] = layer;

Loop through your layers and check if its on the map. If it is, add the layers name to queryLayers array:

queryLayers = [];
for (key in layerObj) { 
    if(map.hasLayer(layerObj[key]) {
         queryLayers.push(key)
    }
}

then construct the URL string like:

    var urlLayers = queryLayers.join();
var URL = 'http://xx.xx.xx.xx/geoserver/workspace/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=layer1,layer2&QUERY_LAYERS='+urlLayers+'&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
  • You can add the layers to the object the same way, layerObj["geoserverLayerNameTwo"] = layerTwo; queryLayers would be just an array of strings - the geoserver layer names of layers that are on the map. – Owen J Lamb Dec 13 '16 at 19:43
  • This worked great nested in my code! – user86605 Dec 13 '16 at 20:51
  • @user86605 I'm glad it worked for you! if you don't mind marking my answer as accepted, I would really appreciate it. Thanks – Owen J Lamb Dec 14 '16 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.