CODEWITHSUNDEEP
zoomingtilesleaflet
user2605934
user2605934

Reputation: 11

Leaflet zoom out when no tiles

I have offline map for leaflet. Due to the reason of minimal weight in megabytes this map has 2 sectors: First sector has zooms from 11th up to 14th. Second sector has zooms from 11th up to 17th.

I need when a user see map in first sector and want to ZOOM in up to more than 14th zoom the map will not allow this and automatically zoom out to the 14th zoom.

And when user want to ZOOM the second sector - it's work properly up to the 17th zoom.

I use this code:

 var layer1 = new L.tileLayer('map/all/{z}/{x}/{y}.png', { minZoom: 11, maxZoom: 14,   errorTileUrl:'empty.png', opacity:1});
    var layer2 = new L.tileLayer('map/center/{z}/{x}/{y}.png', { minZoom: 15, maxZoom: 17,errorTileUrl:'empty.png', opacity:1});


    var map = new L.Map('map', {
    center: new L.LatLng(55.74178084263216, 37.607244264547475),
    zoom: 11,
    minZoom: 11,
    maxZoom: 17,
    layers: [layer1,layer2]
    });

Upvotes: 1

Views: 3035

Answers (1)

Patrick D
Patrick D

Reputation: 6849

You can catch the event when the map's zoom level changes, and make appropriate decisions here based on which one of your sectors is showing.

I'm not sure how you're determining which sector is shown, so my example code below has a comment. Put your logic in here for determining which layer is shown. 

// Called when Map zoom changes
map.on('zoomend', function() {
    if (/*The map is set to Sector 1*/) {
        // If the user zooms past 14, this will set them back to 14.
        if (map.getZoom() > 14) {
            map.setZoom(14);
        }
    }
});

Upvotes: 1

Related Questions