I am looking for a way to make a leaflet map loaded from a geoserver interactive by displaying popups with information. Can someone provide a solution using jsfiddle to help me understand? I am struggling to figure out how to achieve this. Essentially, I want to bring a layer from the geoserver and have popup information available in each part of the map. The code snippet I currently have is:
var stComerciaisLayer= L.tileLayer.wms("http://...:8080/geoserver/wms/", {
layers: 'IGEO:setor_comercial_geo',
format: 'image/png',
transparent: true,
attribution: "Test"
});
Could you please guide me on how to add popups to this setup? Thank you!
I copied the following exactly as it is:
http://bl.ocks.org/rclark/6908938
However, it doesn't work:
<script src="L.TileLayer.BetterWMS.js"></script>
var stComerciaisLayer= L.tileLayer.betterWms("http://...:8080/geoserver/wms/", {
layers: 'IGEO:setor_comercial_geo',
format: 'image/png',
transparent: true,
attribution: "Some test"
});
L.TileLayer.BetterWMS.js
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
// Rest of the script content...
});
// Rest of the scripts continued...
The error message I receive is:
Failed to load http://...:8080/geoserver/wms/?REQUEST=GetFeatureInfo&SERVICE=WMS&SRS=EPSG%3A4326&STYLES=&TRANSPARENT=true&VERSION=1.1.1&FORMAT=image%2Fpng&BBOX=-38.74431610107422%2C-4.0605082148574105%2C-38.26400756835938%2C-3.726884196645965&HEIGHT=974&WIDTH=1399&LAYERS=IGEO%3Asetor_comercial_geo&QUERY_LAYERS=IGEO%3Asetor_comercial_geo&INFO_FORMAT=application%2Fjson&X=821&Y=172: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
leaflet.js:5 Uncaught TypeError: Cannot read property 'lat' of undefined