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