Popup does not appear in Leaflet by using WFS of GeoServer

Question

I am trying to show a popup by using Leaflet and GeoServer, but not sure why does not work. I appreciate any help.

       <script>
    var map = L.map('map').setView([-36.799907, 174.708520], 11);
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, { minZoom: 8, maxZoom: 18, attribution: osmAttrib });
    map.addLayer(osm);

    //L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    //    maxZoom: 20,
    //    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    //}).addTo(map);


    var mywms = L.tileLayer.wms("http://localhost:9090/geoserver/localhost/wms", {
        layers: 'localhost:TEST_JSON',
        format: 'image/png',
        transparent: true,
        version: '1.1.0'
    });
    mywms.addTo(map);

    var owsrootUrl = 'https://localhost:9090/geoserver/ows';

    var defaultParameters = {
        service: 'WFS',
        version: '2.0.0',
        request: 'GetFeature',
        typeName: 'localhost:TEST_JSON',
        outputFormat: 'text/javascript',
        format_options: 'callback:getJson',
        SrsName: 'EPSG:2193'
    };

    var parameters = L.Util.extend(defaultParameters);
    var URL = owsrootUrl + L.Util.getParamString(parameters);

    var WFSLayer = null;
    var ajax = $.ajax({
        url: URL,
        dataType: 'jsonp',
        jsonpCallback: 'getJson',
        success: function (response) {
            WFSLayer = L.geoJson(response, {
                style: function (feature) {
                    return {
                        stroke: false,
                        fillColor: 'FFFFFF',
                        fillOpacity: 0
                    };
                },
                onEachFeature: function (feature, layer) {
                    popupOptions = { maxWidth: 200 };
                    layer.bindPopup("Popup text,cvbcvbcvbcvb " , popupOptions);
                }
            }).addTo(map);
        }
    });

As a test, I am entering this url in my browser,

 http://localhost:9090/geoserver/ows?service=wfs&version=2.0&request=GetFeature

And getting this errors:

 <ows:ExceptionReport xmlns:xs="http://www.w3.org/2001/XMLSchema" 
xmlns:ows="http://www.opengis.net/ows/1.1" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0.0" 
 xsi:schemaLocation="http://www.opengis.net/ows/1.1 
  http://localhost:9090/geoserver/schemas/ows/1.1.0/owsAll.xsd">
 <ows:Exception exceptionCode="MissingParameterValue" locator="GetFeature">
 <ows:ExceptionText>
   The query should specify either typeName, featureId filter, or a stored query id
 </ows:ExceptionText>
 </ows:Exception>
</ows:ExceptionReport>

Could anyone help me to send a get request through Url and see the response from GeoServer please ?

Answer 1

So simple, but took a long time to figure it out.

Geoserver in mine does not have SSL, so should be

owsrootUrl = 'http://localhost:9090/geoserver/ows'; and EPSG:4326

 var owsrootUrl = new L.GeoJSON();
     owsrootUrl = 'http://localhost:9090/geoserver/ows';

     var defaultParameters = {
         service: 'WFS',
         version: '2.0.0',
         request: 'GetFeature',
         typeName: 'localhost:TEST_JSON',
         outputFormat: 'text/javascript',
         format_options: 'callback:getJson',
         SrsName: 'EPSG:4326'
     };

     var parameters = L.Util.extend(defaultParameters);
     var URL = owsrootUrl + L.Util.getParamString(parameters);

     var WFSLayer = null;
     var ajax = $.ajax({
         url: URL,
         dataType: 'jsonp',
         jsonpCallback: 'getJson',
         success: function (response) {
             WFSLayer = L.geoJson(response, {
                 style: function (feature) {
                     return {
                         stroke: false,
                         fillColor: 'FFFFFF',
                         fillOpacity: 0
                     };
                 },
                 onEachFeature: function (feature, layer) {
                     popupOptions = { maxWidth: 200 };
                     layer.bindPopup("Popup text, access attributes with ParcelID:"+feature.properties.parcelid+"<br> this land has "+feature.properties.lat+" numbers</br>"
                         , popupOptions);
                 }
             }).addTo(map);
         }
     });

This post was very helpful:https://gis.stackexchange.com/questions/64406/getting-wfs-data-from-geoserver-into-leaflet