0

This script is working really fine: large WFS layer on Leaflet, loading only 3000 objects on a minimum zoom... It has only the basic Leaflet JS and CSS and jquery-2.0.2.js : http://jsfiddle.net/mga1v29w/3/show

    var start_at_zoom = 11;

    function onEachFeature(feature, layer) {
    // does this feature have a property named dz?
    if (feature.properties && feature.properties.dz) {
        layer.bindPopup(feature.properties.dz);
    }
}

var featureLayer = new L.GeoJSON(
null, {
    onEachFeature: onEachFeature
}).addTo(map);
load_wfs();

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://vdlibraries.fr/geoserver/wfs';
        var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'getFeature',
            typeName: 'france:route500',
            maxFeatures: 3000,
            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 {
        alert("please zoom in to see the polygons!");
        featureLayer.clearLayers();
    }
}

But, I need it to load only when I click a checkbox in L.control.layers overlays, how to do that? I will need to create 2 or 3 different checkboxes, or overlays. (Even checkboxes on a html page would do the job.. but I need to know the zoom condition, too)

When I add an overlay like this, the layer control would stop working and so would the wfs layer.

    var overlayMaps = {
                    
                     "MH": featureLayer,  
                        
};
      
L.control.layers(basemaps, overlayMaps).addTo(map);

And the console errors (Chrome) are about: https://ahalota.github.io/Leaflet.draw-extension/lib/leaflet-src.js

Uncaught TypeError: Cannot read property 'on' of undefined
    at NewClass._addLayer (leaflet-src.js:13060)
    
_addLayer: function (layer, name, overlay) {
        layer.on('add remove', this._onLayerChange, this);

    at NewClass.initialize (leaflet-src.js:12923)

    for (i in overlays) {
            this._addLayer(overlays[i], i, true);

    at new NewClass (leaflet-src.js:310)

    // call the constructor
        if (this.initialize) {
            this.initialize.apply(this, arguments);
        }

    at Function.L.control.layers (leaflet-src.js:13245)

L.control.layers = function (baseLayers, overlays, options) {
    return new L.Control.Layers(baseLayers, overlays, options);

    at nvtest.html?zoom=14&…070&lng=1.93643:828

L.control.layers(basemaps, overlayMaps).addTo(map);

I just updated to https://unpkg.com/leaflet@1.7.1/src/control/Control.Layers.js

and the errors became:

Uncaught TypeError: Cannot read property 'setZIndex' of undefined
    at i._addLayer (Control.Layers.js:246)

if (this.options.autoZIndex && layer.setZIndex) {
            this._lastZIndex++;
            layer.setZIndex(this._lastZIndex);
        }

    at initialize (Control.Layers.js:93)

    for (i in overlays) {
            this._addLayer(overlays[i], i, true);
        }

    at new i (Class.js:22)

if (this.initialize) {
            this.initialize.apply(this, arguments);
        }

    at Function.Yi.layers (Control.Layers.js:430)

// Creates a layers control with the given layers. Base layers will be switched with radio buttons, while overlays will be switched with checkboxes. Note that all base layers should be passed in the base layers object, but only one should be added to the map during map instantiation.
export var layers = function (baseLayers, overlays, options) {
    return new Layers(baseLayers, overlays, options);
};

    at nvtest.html?zoom=13&lat=48.3098&lng=1.9303:843

L.control.layers(basemaps, overlayMaps).addTo(map);
5
  • See example at leafletjs.com/examples/layers-control
    – TomazicM
    Jul 26 at 7:08
  • @TomazicM I know that, but when I add an overlay of "featureLayer", the layer control would not appear anymore and so would the WFS layer, it wouldn't appear too
    – Vincent Dc
    Jul 26 at 8:46
  • If you don't include info in the question, I cannot know that you know that. Any errors in the browser debugger console?
    – TomazicM
    Jul 26 at 8:48
  • @TomazicM thank you. I just updated with the console errors that appear when I add "MH": featureLayer, to the others var = overlayMaps
    – Vincent Dc
    Jul 26 at 9:27
  • @TomazicM even a simple checkbox on the HTML would be fine, but it needs to trigger the var start_at_zoom = 11; condition.... but I would like to remove the automatic load of the data on startup
    – Vincent Dc
    Jul 26 at 10:54
0

If you don't want initially to show overlay on the map, just don't add it to the map when you create it.

Relevant part of your code should then look something like this (tested):

var featureLayer = new L.GeoJSON( null, {
  onEachFeature: onEachFeature
});

var baseLayers = {
  "OpenStreetMap": osm
};  
var overlays = {
  "MH": featureLayer
};
  
L.control.layers(baseLayers, overlays).addTo(map);

load_wfs();
1
  • IT-WORKS!!! That's so kind @TomazicM . It is exactly this code. Thank you. Do you know if it's easy to add even more overlays like this ? adding a featureLayer2, a loadwfs2
    – Vincent Dc
    Jul 26 at 20:04

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.