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);  


}
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
6
  • 1
    Does WMS GetFeatureInfo ever return an image?
    – nmtoken
    Commented Jan 10, 2018 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
    Commented Jan 10, 2018 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
    Commented Jan 11, 2018 at 2:02
  • Hey @MERIEMGIS, what happens if you copy and paste your URL into the browser?
    – Alex Leith
    Commented Jan 11, 2018 at 2:10
  • It gives me an exception "java.lang.StringIndexOutOfBoundsException: String index out of range: -1 String index out of range: -1"
    – MERIEMGIS
    Commented Jan 11, 2018 at 2:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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