6

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.

  • it seems this has been asked before here and here - though neither have an accepted answer. – fluidmotion Oct 16 '14 at 10:12
3

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;
    }
}
  • your link is referencing a dead link, I think! – SIslam Jan 29 '17 at 4:41
  • The used mapbox layer didn't exist anymore. Switched to OSM-Layer in the example so it's working again – Thomas B Jan 29 '17 at 8:48
1

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).

  • Apparently I asked a question earlier on this site where I had some problems implementing this. The problem was not the same as you are having, but my question and the answer are quite detailed code wise, you might be able to find some information there. – Josh Oct 22 '14 at 20:27

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.