2

The following example is a code for three WFS layers on Leaflet, loading only inside a Bounding box in order to save resources.

Layers can be turned on in the Layer Control as featurelayer1, featurelayer2 and featurelayer3.

But, if you have more than one WFS layer enabled on the map, only the first one would be updated if you move the map and you would see only the data of one layer, because of the if else.. operants.

And if you replace else if by if, layers would begin to show randomly and not showing the one you expected.

This WFS code works fine for one layer, but I want the user to be able to show more than one layer at the same time but it seems like the code is not ready for that.

(note: the following has 3 quite identical codes for each WFS)

// variables

var wfs1 = 'worldmap:france.patrim.mh.toutpoint'; 
var wfs2 = 'worldmap:france.poi.stores';
var wfs3 = 'worldmap:france.occsol.paysagesfusion';
var wfs_barrest = 'worldmap:france.poi.barrest';
var wfs_stores = 'worldmap:france.poi.stores';

// 1st wfs

var startatzoom1 = 10;
   var featureLayer1 = 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.7, 
      fillOpacity: 0.7 
    }); 
    return(circleMarker); 
  }, 

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

function loadGeoJson1(data) { 
   // console.log(data); 
    featureLayer1.clearLayers(); 
    featureLayer1.addData(data); 
}; 

function load_wfs1() { 
    if (map.getZoom() > startatzoom1) { 
        var geoJsonUrl = 'https://mappingforyou.eu/geoserver/wfs?'; 
        var defaultParameters = { 
            service: 'WFS', 
            version: '1.0.0', 
            request: 'getFeature', 
            typeName: wfs1, 
            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: loadGeoJson1 
        }); 
      } else { 
        featureLayer1.clearLayers(); 
    } 
};

// 2nd wfs (quite identical)

var startatzoom2 = 10;
var featureLayer2 = new L.GeoJSON( 
null, { 
  //  style: styled(color= 'Peru', fillColor = 'Peru'), 
      pointToLayer: function (feature, latlng) { 
    var circleMarker = L.circleMarker(latlng, { 
      radius: 4, 
      fillColor: '#658ecf', 
      color: "#113163", 
      weight: 7, 
      opacity: 0.7, 
      fillOpacity: 0.7 
    }); 
    return(circleMarker); 
  }, 

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

function loadGeoJson2(data) { 
   // console.log(data); 
    featureLayer2.clearLayers(); 
    featureLayer2.addData(data); 
};

function load_wfs2() { 
    if (map.getZoom() > startatzoom2) { 
        var geoJsonUrl = 'https://mappingforyou.eu/geoserver/wfs?'; 
        var defaultParameters = { 
            service: 'WFS', 
            version: '1.0.0', 
            request: 'getFeature', 
            typeName: wfs2, 
            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: loadGeoJson2 
        }); 
      } else { 
        featureLayer2.clearLayers(); 
    } 
};

// 3rd wfs (quite identical)

var startatzoom3 = 10;
var featureLayer2 = new L.GeoJSON( 
null, { 
  //  style: styled(color= 'Peru', fillColor = 'Peru'), 
      pointToLayer: function (feature, latlng) { 
    var circleMarker = L.circleMarker(latlng, { 
      radius: 4, 
      fillColor: '#b80f2e', 
      color: "#e88093", 
      weight: 7, 
      opacity: 0.7, 
      fillOpacity: 0.7 
    }); 
    return(circleMarker); 
  }, 

    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); 
        } 
    } 
});     
function loadGeoJson3(data) {
   // console.log(data);
    featureLayer3.clearLayers();
    featureLayer3.addData(data);
};

function load_wfs3() {
    if (map.getZoom() > startatzoom3) {
        var geoJsonUrl = 'https://mappingforyou.eu/geoserver/wfs?';
        var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'getFeature',
            typeName: wfs3,
            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: loadGeoJson3
        });
      } else {
        featureLayer3.clearLayers();
    }
};


// try to reload things on move


function reloadcom() {
 if (map.hasLayer(featureLayer1)) {load_wfs1();}
    else if (map.hasLayer(featureLayer2)) {load_wfs2();}
    else if (map.hasLayer(featureLayer3)) {load_wfs3();}
    
};


map.on('moveend', reloadcom);

reloadcom();
7
  • 1
    Sorry, but this is so called "wall of code" and as such too demanding for others to debug it for you. GIS SE site is intended for focused question, with clearly defined problem, so this one is most likely to be closed as not focused enough.
    – TomazicM
    Jun 24 at 13:46
  • @TomazicM I tidied up the code with only 3 WFS and no styling - the thing I need to do remains: not to mix layers with map.on('movend'
    – Vincent Dc
    Jun 24 at 14:14
  • 1
    Please add detailed explanation of what you mean by "not to mix layers with map.on('movend'", "it's starting to be messy with items in the Leaflet layer control", "that didn't go along together" and "Everything is mixing, Leaflet layer control items that load another items especially on moving": exactly what you want to achieve by which means and exactly what and how it happens differently from what you want.
    – TomazicM
    Jun 24 at 14:26
  • 1
    surprised you get any content. There are no typenames called wfs1, wfs2, or wfs3 advertised in version 1.0.0 GetCapabilities for mappingforyou.eu/geoserver/wfs?, The GetFeature service URL is even advertised as port 8080
    – nmtoken
    Jun 24 at 18:16
  • @nmtoken I just added in the text the wfs* variables that I forgot. there is a working proxy of apache to the 8080 port of jetty running geoserver and the wfs are showing
    – Vincent Dc
    Jun 24 at 18:22

1 Answer 1

2

There are three things you have to take care of to make it work.

The main thing is using different name for each jasonp callback when retrieving WFS data. Since calls to get WFS data are async, when using the same name calls interfere with each other. So for example, load_wfs2 function could be defined as:

function load_wfs2() { 
  if (map.getZoom() > startatzoom2) { 
    var geoJsonUrl = 'https://mappingforyou.eu/geoserver/wfs?'; 
    var defaultParameters = { 
      service: 'WFS', 
      version: '1.0.0', 
      request: 'getFeature', 
      typeName: wfs2, 
      maxFeatures: 300, 
      outputFormat: 'text/javascript', 
      format_options: 'callback: getJson2', 
      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: 'getJson2', 
      success: loadGeoJson2 
    }); 
  } else { 
    featureLayer2.clearLayers(); 
  } 
};

In reloadcom function each overlay has to be reloaded if on the map:

function reloadcom() {
  if (map.hasLayer(featureLayer1)) load_wfs1();
  if (map.hasLayer(featureLayer2)) load_wfs2();
  if (map.hasLayer(featureLayer3)) load_wfs3();
};

In the last thing is that when overlay is added to the map through layer control, it also has to be loaded again, which can be achieved with processing layer's add event:

featureLayer1.on('add', function(evt) {
  load_wfs1();
});
featureLayer2.on('add', function(evt) {
  load_wfs2();
});
featureLayer3.on('add', function(evt) {
  load_wfs3();
});
1
  • Hello @TomazicM . I did the modifications and I've been testing the modified script all day, to find that it works fine. So thank you for your research and help. This script will be helpful to anyone wanting to load 3, 5 or even more WFS services inside a Leaflet.js map, without requiring too much resources thanks to the bounding box feature and the locked zoom. I'll just be adding a simple styling (circlemarker) to the layers, with different colors to each one, to make the script more understandable.
    – Vincent Dc
    Jun 26 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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