'Floating points (wfs) on map using geojson in leaflet

I am trying to get geojson from geoserver and put it on the map. It seems to import geojson, but it is not displayed on the map, and I do not know what the problem is.

  // WFS
    var defaultParameters = {
        service: 'WFS',
        version: '1.1.1',
        request: 'GetFeature',
        typeName: 'test:station',
        maxFeature: 50,
        outputFormat: 'application/json',
        format_options: 'callback:getJson',
        SrsName: 'EPSG:3857',
    };

    var baseballIcon = L.icon({
        iconUrl: 'https://cdn-icons-png.flaticon.com/512/82/82169.png',
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28]
    }); 
    
     var geojsonMarkerOptions = {
        radius: 0,
        fillColor: "#ff7800",
        color: "#000",
        weight: 0,
        opacity: 0,
        fillOpacity: 0.0
    };
    
    var parameters = L.Util.extend(defaultParameters);

    var URL = 'http://localhost:8082/geoserver/test/ows/service=WFS'+ L.Util.getParamString(parameters);
    
    var wfsLayer = null;
    
    var ajax = $.ajax({
        url: URL,
        dataType: 'json',
        jsonpCallback:'getJson',
        success:function(data){
        //console.log("data = "+data);
        wfsLayer = L.geoJSON(data, {
            style: function (feature) {
            console.log("feature: "+feature)
                return {icon: baseballIcon};
            },
    
            pointToLayer: function (feature, latlng) {
            console.log("feature: "+feature+" and "+"/ latlng: "+latlng)
                return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: '#ff7800',
                    color: '#000',
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });
            }
            }).addTo(map);
        }
    });
    console.log("WFS CHECK");

// map and tilelayer are already defined
var map = L.map(divId, mapOption).setView(center, zoomLevel);
var baseMap = new L.tileLayer(GCRM.tmsInfos[mapType].tileUrl, {
... }

enter image description here

I can't see anything on the map What's wrong with the code above?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source