0

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();
2
  • WMS overlays can give you extra information, with a GetFeatureInfo request.
    – nmtoken
    Jan 6, 2022 at 15:19
  • @nmtoken thank you for pointing that out, I'll make my research ;à
    – Vincent Dc
    Jan 7, 2022 at 21:36

2 Answers 2

0

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);
5
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jan 4, 2022 at 9:05
  • Hello Resuk, I know how to call the layer, I just need to build them in the first place
    – Vincent Dc
    Jan 4, 2022 at 10:13
  • Do you use geoserver?
    – resuk
    Jan 4, 2022 at 10:53
  • yes @resuk I do
    – Vincent Dc
    Jan 4, 2022 at 13:14
  • check this link u will find how to do it : dev.to/iamtekson/wfs-request-in-geoserver-using-leafletjs-552g
    – resuk
    Jan 4, 2022 at 14:45
0

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...

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.