Load data on layer show

[ebertti]

Have some way to only load data (AJAX) after clicking on a layer button?

[stefanocudini]

???

[ebertti]

Hey man, wait a litle more then a hour to close this issue, I'm waiting for half year. :smiley:

Let my explain:

To declare a over layer, you need to do something like this:

var overLayers = [
    {
        name: "Drinking Water",
        icon: '<i class="icon icon-water"></i>',
        layer: L.geoJson(WaterGeoJSON)
    },   
];

But the necessary data must already be loaded at the time of the overlayer statement

My suggestion is make the layer load using a data loaded or a callback function, only when the layer is selected to be shown:

var overLayers = [
    {
        name: "Drinking Water",
        icon: '<i class="icon icon-water"></i>',
        layer: function(layer){
            $.get('some/url/path').done(function(data){
                layer.render(L.geoJson(data))
            });
        }
    },   
];

This will be helpful when you need to show to much data on a layer.

[stefanocudini]

Closing the issue was an incentive to describe best your idea :-)

Great idea!

[stefanocudini]

Hi @ebertti in latest days I have thought a lot about this solution.. But I implemented new way most generic.. for adding layers at runtime, look here: http://labs.easyblog.it/maps/leaflet-panel-layers/examples/dynamic-layers.html

From version 0.2.2 you can add new layer using two methods: panel.addBaseLayer(item); panel.addOverlay(item);

Your code can be changed in this way:

var panel = L.control.panelLayers();

$.getJSON('some/url/path.geojson', function(data){
    panel.addOverlay({
        name: "Drinking Water",
        icon: '<i class="icon icon-water"></i>',
        layer: L.geoJson(data)
    });
});

[ebertti]

Hi @stefanocudini, 👍 this solution already help.

But lets think this scenario. If I have 10 overlay with 200 points. With this solution I steel need to preload all data before add the overlay on map interface.

[stefanocudini]

waiting upgrade compatibility to Leaflet 1.0, this is the best solution:

var panel = L.control.panelLayers(),
var river = L.geoJson();

map.on('layeradd', function(e) {
    if(L.stamp(e.layer) === L.stamp(river)) {
        $.getJSON('data/river.json', function(data) {
            river.addData( data );
        });
    }
});

panel.addOverlay({
    name: "Drinking Water",
    icon: '<i class="icon icon-water"></i>',
    layer: river
});

add an empty layer and after addData on this

[ebertti]

16