CODEWITHSUNDEEP
leaflet
Johan Hoeksma
Johan Hoeksma

Reputation: 3746

Show tiles from other zoomlevel in Leaflet

I'm trying to make offline maps with Leaflet.

For data saving, the user has an option to not save all the zoomlevels. By example the user has the zoomlevels: - 15 and 17.

Now the problem is, when the user is zooming in from level 15 to 16.

How do I show the level 15 (or 17) layers on the zoom from 16?

Alternative is to skip the zoomlevel 16, but maybe there is another option? I looked into the sourcecode from leaflet, but I can't figure it out.

JSFIDDLE

Update Fiddle with Plugin that skips the zoomlevel (by Ilja Zverev)

HTML

<div id="map"></div>
<div id="out"></div>

JAVASCIPT

var map = L.map('map').setView([52.084, 5.11], 15);
isNoZoomlevel = 16;

L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(map);


map.on('zoomend', function() {
    console.log("I zoomed to level " + map.getZoom());    
    if(map.getZoom() == isNoZoomlevel) {
        console.log("This offline zoomlevel does not excist");
        $("#out").html("This is no zoomlevel");
         // Howto replace the zoomlevel 16 with 17 or 15??   
    } else {
        $("#out").html("");
    }
});

CSS

#map {
    height: 250px;
}

Upvotes: 3

Views: 863

Answers (2)

Ilja Zverev
Ilja Zverev

Reputation: 953

Specially for you I've just made LimitZoom plugin: just specify zoom levels in zooms: [15, 17, ...] options of L.Map.

Upvotes: 3

YaFred
YaFred

Reputation: 10008

Based on your example, this works for me

var prevZoom = 15;
map.on('zoomend', function() {

    if(map.getZoom() == isNoZoomlevel) {

        if(map.getZoom() > prevZoom) {
            map.setZoom(map.getZoom() + 1); // force zoomIn
        }
        if(map.getZoom() < prevZoom) {
            map.setZoom(map.getZoom() - 1); // force zoomOut
        }
    } 
    prevZoom = map.getZoom();
});

Upvotes: 2

Related Questions