Leaflet : two or more WFS overlay layers?

Question

I'm happy this script helped me to get a WFS layer inside Leaflet. I just had to use a trick of Geoserver (set ENABLE_JSONP to true in the Geoserver relevant config file).

WFS and Geojson layers in Leaflet, have the advantage of interaction: one click give you extra info (WMS overlays from Geoserver can't do that, even thought I think I read about another plugin)

With the below script, I'm able to load this WFS from the layer control as a "featureLayer" overlay.

but what about a second one, even a third one, that could be displayed at the same time?

I would like to copy this code and paste it below, but it looks like it needs a bit of change. I'm a bit lost: create a featurelayer2 var, a load_wfs2 function?

Can you help me change it for a second WFS, a third WFS overlay? I know how to call the layers in the layer control, but not build the layer itself.

// graphic symbol definition for point, uncomment Style Peru for areas

var customOptions =
    {
    maxHeight: 200, maxWidth: 200
    }


var featureLayer = new L.GeoJSON(
null, {
  //  style: styled(color= 'Peru', fillColor = 'Peru'),
    
    
      pointToLayer: function (feature, latlng) {
    var circleMarker = L.circleMarker(latlng, {
      radius: 4,
      fillColor: '#cc5500',
      color: "#fff",
      weight: 7,
      opacity: 0.5,
      fillOpacity: 0.5
    });
    return(circleMarker);
  },
    
// definition of the infotip
    onEachFeature: 
     
    function popUpall(feature, layer) {
 
    //console.info(feature);
 
    var out = [];
 
    if (feature.properties) {
 
        for (var key in feature.properties) {
 
            out.push(key + ": " + feature.properties[key]);
 
        }
 
        layer.bindPopup(out.join("<br />"), customOptions);
 
    }
 
    }

    
});


// 1st functional WFS

var featureLayer = new L.GeoJSON(null, {
  style: styled((color = "Peru"), (fillColor = "Peru")),
  onEachFeature: function popUpall(feature, layer) {
    //console.info(feature);

    var out = [];

    if (feature.properties) {
      for (var key in feature.properties) {
        out.push(key + ": " + feature.properties[key]);
      }

      layer.bindPopup(out.join("<br />"), customOptions);
    }
  },
});

var start_at_zoom = 10;

function onEachFeature(feature, layer) {
  // pour afficher seulement une ou deux ou plus, données dans l'infobulle
  if (feature.properties && feature.properties.appelation) {
    layer.bindPopup(
      feature.properties.appelation + "</br>" + feature.properties.legende
    );
  }
}

function loadGeoJson(data) {
  // console.log(data);
  $("#total").html(data.features.length);
  featureLayer.clearLayers();

  featureLayer.addData(data);
}

map.on("moveend", load_wfs);

function load_wfs() {
  if (map.getZoom() > start_at_zoom) {
    var geoJsonUrl = "http://mappingforyou.eu/geoserver/wfs?";
    var defaultParameters = {
      service: "WFS",
      version: "1.0.0",
      request: "getFeature",
      typeName: "worldmap:france.patrim.mh.toutpoint",
      maxFeatures: 300,
      outputFormat: "text/javascript",
      format_options: "callback: getJson",
      srsName: "EPSG:4326",
    };

    var customParams = {
      bbox: map.getBounds().toBBoxString(),
    };
    var parameters = L.Util.extend(defaultParameters, customParams);
    console.log(geoJsonUrl + L.Util.getParamString(parameters));

    $.ajax({
      jsonp: false,
      url: geoJsonUrl + L.Util.getParamString(parameters),
      dataType: "jsonp",
      jsonpCallback: "getJson",
      success: loadGeoJson,
    });
  } else {
    featureLayer.clearLayers();
  }
}

load_wfs();

Answer 1

you should in last of your code to call all your wfs to create in map like a control to be able to swich between all your layers overlay.

var baseMaps = { wfs1,wfs2,wfs3};
var overlayMaps = {};
L.control.layers(baseMaps, overlayMaps).addTo(map);

Answer 2

Success: I was finally able to load a second WFS in the control layer as another overlay named "featureLayer2". featureLayer appears in light orange, featureLayer2 appears in black, they are clickable with their Intotip. I guess and hope well I could do that with another featureLayer3, and featureLayer4 if I wish...

var featureLayer2 = new L.GeoJSON(
null, {
  //  style: styled(color= 'Peru', fillColor = 'Peru'),
    
    
      pointToLayer: function (feature, latlng) {
    var circleMarker2 = L.circleMarker(latlng, {
      radius: 8,
      fillColor: '#000000',
      color: "#000000",
      weight: 7,
      opacity: 0.5,
      fillOpacity: 0.5
    });
    return(circleMarker2);
  },
    
    
    
    
    
    onEachFeature: 
     
    function popUpall2(feature, layer) {
 
    //console.info(feature);
 
    var out = [];
 
    if (feature.properties) {
 
        for (var key in feature.properties) {
 
            out.push(key + ": " + feature.properties[key]);
 
        }
 
        layer.bindPopup(out.join("<br />"));
 
    }
 
    }

    
});



// test wfs2


var start_at_zoom2 = 10;

function onEachFeature2(feature, layer) {
    // does this feature have a property named dz?
    if (feature.properties && feature.properties.appelation) {
    layer.bindPopup(feature.properties.cuisine + '</br>' + feature.properties.legende) ;
    }
}


function loadGeoJson2(data) {
   // console.log(data);
    $("#total").html(data.features.length);
    featureLayer2.clearLayers();

    featureLayer2.addData(data);

}

map.on('moveend', load_wfs2);

function load_wfs2() {
    if (map.getZoom() > start_at_zoom2) {
    var geoJsonUrl2 = 'http://mappingforyou.eu/geoserver/wfs?';
    var defaultParameters2 = {
        service: 'WFS',
        version: '1.0.0',
        request: 'getFeature',
        typeName: 'worldmap:france.poi.barrest',
        maxFeatures: 300,
        outputFormat: 'text/javascript',
        format_options: 'callback: getJson2',
        srsName: 'EPSG:4326'
    };




    var customParams2 = {
        bbox: map.getBounds().toBBoxString()
    };
    var parameters2 = L.Util.extend(defaultParameters2, customParams2);
    console.log(geoJsonUrl2 + L.Util.getParamString(parameters2));


    $.ajax({
        jsonp: false,
        url: geoJsonUrl2 + L.Util.getParamString(parameters2),
        dataType: 'jsonp',
        jsonpCallback: 'getJson2',
        success: loadGeoJson2
    });

    } else {
    featureLayer2.clearLayers();
    }
}
  
  load_wfs2();