Geographic Information Systems Asked by Nelson Vilanculos on March 12, 2021
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);
}
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);
Answered by Falke Design on March 12, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP