Show WMS information in popup on Leaflet map?

Question

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

Answer 1

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

Answer 2

This amended code should work for you:

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 = Math.trunc(map.layerPointToContainerPoint(e.layerPoint).x);
    var Y = Math.trunc(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);
    }