Popup using WMS with Leaflet

Question

I would like to know how do leaflet a map coming from a geoserver be iterative and display popups with information. Please, someone could do something in the jsfiddle so I can understand, because I just can not figure out how to do this. Basically that's all I want, to bring a layer of the geoserver and be able to get information from it with popups in each part. My code is just it:

var stComerciaisLayer= L.tileLayer.wms("http://...:8080/geoserver/wms/", {
          layers: 'IGEO:setor_comercial_geo',
          format: 'image/png',
          transparent: true,
          attribution: "Test"
        });

How I put popups? Thanks!

---

I copy EXACTLY this:

http://bl.ocks.org/rclark/6908938

But dont 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({

  onAdd: function (map) {
    // Triggered when the layer is added to a map.
    //   Register a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    // Triggered when the layer is removed from a map.
    //   Unregister a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },

  getFeatureInfo: function (evt) {
    // Make an AJAX request to the server and hope for the best
    var url = this.getFeatureInfoUrl(evt.latlng),
        showResults = L.Util.bind(this.showGetFeatureInfo, this);
    $.ajax({
      url: url,
      success: function (data, status, xhr) {
        var err = typeof data === 'string' ? null : data;
        showResults(err, evt.latlng, data);
      },
      error: function (xhr, status, error) {
        showResults(error);  
      }
    });
  },

  getFeatureInfoUrl: function (latlng) {
    // Construct a GetFeatureInfo request URL given a point
    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
        size = this._map.getSize(),

        params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          srs: 'EPSG:4326',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'application/json'
        };

    params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
    params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;

    return this._url + L.Util.getParamString(params, this._url, true);
  },

  showGetFeatureInfo: function (err, latlng, content) {
    if (err) { console.log(err); return; } // do nothing if there's an error

    // Otherwise show the content in a popup, or something.
    L.popup({ maxWidth: 800})
      .setLatLng(latlng)
      .setContent(content)
      .openOn(this._map);
  }
});

L.tileLayer.betterWms = function (url, options) {
  return new L.TileLayer.BetterWMS(url, options);  
};

The error this:

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

Answer 1

The error message you show is about CORS.

It says that your server (geoserver) is not configured to send CORS headers, therefore your browser refuses to load data from that server, sticking to the Same-origin policy.

You should have plenty resources to configure CORS headers of your geoserver, including here on SO or on GIS Stack Exchange, e.g. CORS - Tomcat - Geoserver