Unable to Generate Popup with Leaflet From Geoserver

Question

I've been learning to use GeoServer. I found a tutorial: https://www.e-education.psu.edu/geog585/node/765. I followed all of the steps, however the Leaflet map does not generate a popup even when I go to localhost:8080.

Here is the code where the popup is generated:

          function Identify(e)
          {
            // set parameters needed for GetFeatureInfo WMS request
            var sw = map.options.crs.project(map.getBounds().getSouthWest());
            var ne = map.options.crs.project(map.getBounds().getNorthEast());
            var BBOX = sw.x + "," + sw.y + "," + ne.x + "," + ne.y;
            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);

            // compose the URL for the request
            var URL = 'http://localhost:8080/geoserver/geog585/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&LAYERS=philadelphia:FarmersMarkets&QUERY_LAYERS=philadelphia:FarmersMarkets&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=application%2Fjson&TILED=false&CRS=EPSG%3A3857&I='+X+'&J='+Y;

            //send GetFeatureInfo as asynchronous HTTP request using jQuery $.ajax

            $.ajax({
               url: URL,
               dataType: "json",
               type: "GET",
               success: function(data)
               {
                 if(data.features.length !== 0) {  // at least one feature returned in response
                   var returnedFeature = data.features[0]; // first feature from response

                   // Set up popup for clicked feature and open it
                   var popup = new L.Popup({
                     maxWidth: 300
                   });

                   popup.setContent("<b>" + returnedFeature.properties.NAME + "</b><br />" + returnedFeature.properties.ADDRESS);
                   popup.setLatLng(e.latlng);
                   map.openPopup(popup);
                }
              }
             });
           }

           map.addEventListener('click', Identify);

         }

Does anyone know why this may not be generating anything? I also tried it with the OpenLayers code and it worked perfectly.

I'm very new to this.

Answer 1

The issue is related to your var url,

// compose the URL for the request
        var URL = 'http://localhost:8080/geoserver/geog585/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&LAYERS=philadelphia:FarmersMarkets&QUERY_LAYERS=philadelphia:FarmersMarkets&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=application%2Fjson&TILED=false&CRS=EPSG%3A3857&I='+X+'&J='+Y

You do not have access to the geog585 server, you need to point to your computer's localhost, try setting and navigating to http://localhost:8080