Zoom is limited to level 11

Hroch

Is it new limitation in APIv4 that it is not possible to zoom more than level 11? In APIv3 zoom was working without problems.

Vincent Lion

Hi,
I have the same problem. Have found an answer ?

maxmastalerz

same issue here. Not having the zoom go past 11 makes my project pretty much impossible to attain with windy. I may have to use google maps api with general markers to indicate wind speed at a certain spot. I honestly don't know what to do...

jalbert

Exact same issue here as well. I also asked about this in:
https://community.windy.com/topic/6580/adding-zoomed-in-layers-in-api-v4

and other people have also asked about this problem in other threads, but no one yet has mentioned a fix (or API update) for this issue so far I believe...

Tedde

You can adjust the zoom levels by adding the following code to the windyInit{}

map.options.minZoom = 4;
map.options.maxZoom = 18;

Then you can add another tile layer, hidden by default if you start at a higher zoom level:

topLayer =L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}').addTo(map); 
topLayer.setOpacity('0');

Create a document ready with and add a zoomend listener that detects if the zoom is 12 or higher. If so, show the 'other' tile layer.

map.on('zoomend', function() { 
    if (map.getZoom() >= 12) {
        topLayer.setOpacity('1');
    } else {
        topLayer.setOpacity('0');   
    }
});

You can now zoom in to a deep level, in this example 18, with a tile layer of your own choice.
Note: this is leaflet related, not specifically Windy API related.

jalbert

OK, thanks, I have this working now -- specifically in the lines right after :

// Initialize Windy API
windyInit( options, windyAPI => {
    // windyAPI is ready, and contains 'map', 'store',
    // 'picker' and other useful stuff
    // const { map } = windyAPI
    var { map } = windyAPI
    // .map is instance of Leaflet map

the code added to get it working is:

    map.options.minZoom = 4;
    map.options.maxZoom = 17;

    var topLayer = L.tileLayer('http://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, ',
        minZoom: 12,
        maxZoom: 17
    }).addTo(map);
    topLayer.setOpacity('0');

    map.on('zoomend', function() {
        if (map.getZoom() >= 12) {
            topLayer.setOpacity('1');
        } else {
            topLayer.setOpacity('0');
        }
    });
    map.setZoom(14);

and it now works for me. (Adding the minZoom and maxZoom settings to the const options = { ... } settings before the WindyInit, or any code before var { map } = windyAPI in the WindyInit, did not work for me.) Thanks!

(BTW, I'll have a couple more questions later on a couple of other Windy API4 / Leaflet minor issues I'm having that are unrelated to the zoom levels.)

Thank you very very much!!!
justin

MMurphyThree

Just for anyone coming to this topic now, I used @Tedde / @jalbert's solution and it worked a treat, but I've found it can actually be achieved with a bit less code. @jalbert added minZoom and maxZoom options to the tileLayer, essentially negating the need for the zoomend Event Listener that @Tedde suggested. So in short, the following code is all that's required:

map.options.minZoom = 4;
map.options.maxZoom = 17;

var topLayer = L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, ',
    minZoom: 12,
    maxZoom: 17
}).addTo(map);