Leaflet – How to Overlay Two or More WFS Layers in Leaflet

leafletwfs

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)

enter image description here

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();

Best Answer

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);
Related Question