How to show WFS in Leaflet control

Question

I am trying to add the WFS layer to my map to make it clickable via L.control, unfortunately, I am not using this properly as when I click on the other layers in control, the popup feature is still there on the map while WMS layer disappears.

I guess the solution is putting WFS as a layer in control, but I am not sure how.

My Code:

L.control.layers({
        "osm": osm.addTo(map),
    {
         "points_Mohsen": // WMS Layer
           L.tileLayer.wms("http://localhost:9090/geoserver/localhost/wms", {
            layers: 'localhost:DP_View',
            format: 'image/png',
            transparent: true,
            version: '1.1.0' 
        })
        ,
        "polygon_Mohsen": L.tileLayer.wms("http://localhost:9090/geoserver/localhost/wms", {
            layers: 'localhost:TEST_JSON',
            format: 'image/png',
            transparent: true,
            version: '1.1.0' 
        })
        , 'drawlayer': drawnItems
    }
     ,   { position: 'topright', collapsed: false }).addTo(map);

    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));


  map.on('overlayadd', onOverlayAdd);

    function onOverlayAdd(e) {

        //  alert(e.layer.wmsParams.layers);

        if (e.name == "points_Mohsen") {
            if (map.hasLayer(WFSLayer))
                map.removeLayer(WFSLayer);

            var defaultParameters = {
                service: 'WFS',
                version: '2.0.0',
                request: 'GetFeature',
                typeName: 'localhost:DP_View',
                outputFormat: 'text/javascript',
                format_options: 'callback:getJson'

            };

            var parameters = L.Util.extend(defaultParameters);
            var URL = owsrootUrl + L.Util.getParamString(parameters);
            ////layerVisibility[L.Util.extend(defaultParameters)] = true;

            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.P_id + "</br>"
                                , popupOptions);
                        }
                    }).addTo(map);
                }
            });
        }
 };

Answer 1

You're confusing the workflow and what map events achieve.

Besides, by reading your code I'm gonna guess that you want to display a WFS layer whenever a corresponding WMS layer is shown.

The best way to do this is to use a L.LayerGroup to treat both as one, like so:

var pointsWMS = L.tileLayer( ... );
var pointsWFS = L.geoJson( ... );
var pointsGroup = L.layerGroup([ pointsWMS, pointsWFS ]);

var linesWMS = L.tileLayer( ... );
var linesWFS = L.geoJson( ... );
var linesGroup = L.layerGroup([ linesWMS, linesWFS ]);



L.control.layers( {
    points: pointsGroup,
    lines: linesGroup
});

If you're loading your L.GeoJSON layers asynchronously, you can also do something like

$.ajax( ...
  success: function (response) {
      pointsGroup.addLayer( L.geoJson(...) );
  }
);

If this is not what you wanted, please make your question clearer.