0

I need to view WMS information through a popup in Leaflet map. I tried with the code below, but the popup doesn't come out with information, but automatically downloads a file.

map = L.map(document.getElementById('mapDIV'), {    
center: [-19.000, 35.09],
zoom: 5.6,
});

var ProvinciasWMS = L.tileLayer.wms('http://localhost:8080/geoserver/Mocambique/wms?',{
    layers:'Mocambique:Provincias_Moz',
  version: '1.1.0',
   transparent:'true',
   format: 'image/png',
   attribution: "myattribuition"
});

var DistritosWMS = L.tileLayer.wms('http://localhost:8080/geoserver/Mocambique/wms?',{
    layers:'Mocambique:Distritos',
  version: '1.1.0',
   transparent:'true',
   format: 'image/png',
   attribution: "myattribuition"
});

var PostosAdministraticosWMS = L.tileLayer.wms('http://localhost:8080/geoserver/Mocambique/wms?',{
    layers:'Mocambique:Moçambique_Distritos_e_Postos',
  version: '1.1.0',
   transparent:'true',
   format: 'image/png',
   attribution: "myattribuition"
});

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://localhost:8080/geoserver/Mocambique/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetFeatureInfo&LAYERS='+'Mocambique:Provincias_Moz,Mocambique:Distritos,Mocambique:Moçambique_Distritos_e_Postos'+'&QUERY_LAYERS='+'Mocambique:Provincias_Moz,Mocambique:Distritos,Mocambique:Moçambique_Distritos_e_Postos'+'&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='400' height='200'         frameborder='0'></iframe>");
    map.openPopup(popup);
    }  

enter image description here

4
  • 2
    What does not work? Please edit your question and more info about what are you trying to do and what does not work. – TomazicM Feb 18 at 9:48
  • Any errors in the browser debugger console or network section? – TomazicM Feb 19 at 18:27
  • What request is actually generated. If you use that request in a browser does it return any results – nmtoken Feb 20 at 8:34
  • Is the layer queryable – nmtoken Feb 20 at 8:35
0

You need to add the wms-layers to the map with .addTo(map)

var PostosAdministraticosWMS = L.tileLayer.wms('http://localhost:8080/geoserver/Mocambique/wms?',{
    layers:'Mocambique:Moçambique_Distritos_e_Postos',
  version: '1.1.0',
   transparent:'true',
   format: 'image/png',
   attribution: "myattribuition"
}).addTo(map);
1
  • I added the variables using a tree-shaped menu control .. my difficulty is in viewing the information using a popup in the leaflet. – Nelson Vilanculos Feb 18 at 9:46

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.