0

I have make an interactive map with Leaflet and when I click in any point at the basemap it displays an empty pop-up. enter image description here

Here is The code map.addEventListener('click', onMapClick);

    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 BBOX = map.getBounds().toBBoxString();
    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 layerObj = {};
    layerObj["cite:Proj_Agadir"] = Projet;
    layerObj["cite:Projets_AssaZag"] =Projets_AssaZag;
    layerObj["cite:Proj_Inzegane"] = Projets_Inzegane; 
    layerObj["cite:Proj_Taroudant"] =Projets_Taroudant;
    layerObj["cite:Proj_Tata"] = Projets_Tata; 
    layerObj["cite:Essaouira"] =Projets_Essaouira;
    layerObj["cite:Export_Output3"] = Projets_Guelmim; 
    layerObj["cite:Chtouka"] =Projet_Chtouka_Ait_Baha;
    layerObj["cite:SidiIfni"] = Projet_Sidi_Ifni; 
    layerObj["cite:Tiznit"] =Projet_Tiznit; 
    layerObj["cite:AEP"] = AEP;
    layerObj["cite:Education"] = Education;
    layerObj["cite:Piste"] =Piste;
    layerObj["cite:Sante"] = Santé;  
    layerObj["cite:AGR"] =AGR;


    queryLayers = [];
    for (key in layerObj) { 
    if(map.hasLayer(layerObj[key])) {
     queryLayers.push(key);
     }
    }
    var urlLayers = queryLayers.join();
    var URL = 'http://localhost:8086/geoserver/cite/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetFeatureInfo&LAYERS=cite:AEP,cite:Education,cite:Piste,cite:Sante,cite:AGR,cite:Proj_Agadir,cite:Projets_AssaZag,cite:Proj_Inzegane,cite:Proj_Taroudant,cite:Proj_Tata,cite:Essaouira,cite:Export_Output3,cite:Chtouka,cite:SidiIfni,cite:Tiznit&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;
    popup = new L.Popup({maxWidth: 1000});

    popup.setLatLng(e.latlng);

    popup.setContent("<iframe src='"+URL+"' width='1000' height='200' frameborder='0'></iframe>");

    if (urlLayers)

    map.openPopup(popup);  


}
1

I see that you're trying to include the GeoServer WMS GetFeatureInfo for a large number of layers, as HTML, and then to include that as an iframe. I've tested this, and it should work.

I don't have access to your server, so I can't test the URL, but first test that. (You can do that by opening up your web browser's debug tools and watching when you open a popup for the request to go out, and copy and pasting that into a new tab.) If that works, then the issue must be with the code for the iframe. I've included an example that is tested and works here (as a basic web page):

<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY>
<iframe src="https://example.com/geoserver/version2/ows?service=WMS&version=1.1.1&request=GetFeatureInfo&layers=example_layer&query_layers=example_layer&feature_count=10&info_format=text/html&format_options=callback%3AhandleJson&SrsName=EPSG%3A4326&width=101&height=101&x=50&y=50&bbox=-36.6625%2C21.679905342529644%2C-36.4625%2C21.879905342529646&time=2018-01-10T23%3A00%3A00.000Z&callback=jQuery22408496475769282517_1515624085509&_=1515624085510" width="1000" height="200" frameborder="0"></iframe>
</BODY>
</HTML>

Even better would be to get the results as GeoJSON and format them as a table. That way you get text, and people can select the values. To do this, you use a similar URL, but make set your info_format to 'application/json'. And when your ajax request returns, you handle parse that JSON into a table.

  • 1
    Does WMS GetFeatureInfo ever return an image? – nmtoken Jan 10 '18 at 8:37
  • Actually, you're right, @nmtoken. I was distracted by the format=png parameter in the URL in the original post. I'll update my response. – Alex Leith Jan 10 '18 at 22:39
  • Thank you @AlexLeith for your answer, but it doesn't work with me, there isn't other solution to display popup for just layers. I tried many tricks but in vain. – MERIEMGIS Jan 11 '18 at 2:02
  • Hey @MERIEMGIS, what happens if you copy and paste your URL into the browser? – Alex Leith Jan 11 '18 at 2:10
  • It gives me an exception "java.lang.StringIndexOutOfBoundsException: String index out of range: -1 String index out of range: -1" – MERIEMGIS Jan 11 '18 at 2:32

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.