Load or display differents geojson data on zoom level for leaflet maps

Question

I have a map with 3 levels of information. The first is the country, the second the state and the last one the cities. I wonder know if it's possible to use the zoom value in order to display the different datas from my geojson file ? I think about a kind a zoom listener or maybe display the three layer but use the setOpacity link to the zoom level.

Answer 1

You can register the zoomend-event as mentioned before. Then just remove the "old" layer with map.removeLayer(your_old_layer); or remove all geoson-layers with the map.eachLayer-function:

Just have a look at my jsfiddle example: http://jsfiddle.net/expedio/kuovyw8m/

Code-Snippet:

    map.on('zoomend', function (e) {
    zoom_based_layerchange();
});

function clean_map() {
    map.eachLayer(function (layer) {
        if (layer instanceof L.GeoJSON)


        {
            map.removeLayer(layer);

        }
        //console.log(layer);


    });
}



function zoom_based_layerchange() {
    //console.log(map.getZoom());

var currentZoom = map.getZoom();
    switch (currentZoom) {
        case 11:
            clean_map();
            coorsLayer.addTo(map); //show Coors Field
            break;
        case 12:
            clean_map();

            buslayer.addTo(map); //show Busline
            break;
        case 13:
            clean_map();
            campuslayer.addTo(map);
            // show Campus
            break;
        case 14:
            clean_map();
            rental.addTo(map);
            // show rental
            break;

        default:
            // do nothing
            break;
    }
}

Answer 2

This is possible. It has been answered before (see comment by @fluidmotion), but I'll attempt to give a more in depth answer here.

There are two methods you need, map.on('zoomend', function() {}); and map.remove(layer). Basically the map.on('zoomend' checks for when the zoom function has finished. You can check what the final zoom level is with map.getZoom() and compare it to a constant that you set. If it meets your requirements, then clear all the layers using map.remove(layer) (you'll have to do this for all layers) and add the new GeoJSON layer.

There are plenty of optimizations you can do with this, but this is the general flow. One example of an optimization, keep the GeoJSON in a cache and only update it if necessary (instead of an every zoom call).