jalbert

jalbert

Dear Windy team,

Just FYI I've been waiting a week or so to post this because I thought it might possibly be fixed in updates, or perhaps be redundant with other people's questions or preliminary bug reports(?), but when I try to add zoomed-in layers in API v4, via either (for example):

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

or within the API initialization itself:

const options = {

            // Required: API key
            key: 'OznecmCq1hd17S4F3e5rtotajmkUBw2D',

            // Put additional console output
            verbose: true,

            // Optional: Initial state of the map
      lat:   48.46,
      lon: -123.31,
      zoom: 11,
      layers: [
        L.tileLayer('http://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          minZoom: 12,
          maxZoom: 17,
          attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, '
        })
      ],
      minZoom: 0,
      maxZoom: 17
}

// Initialize Windy API
windyInit( options, windyAPI => {

... etc ...

then those zoomed-in layers do not get added to the map (or at least are not accessible via the usual zoom buttons) -- whereas the above work fine in v2.3. Am I doing something wrong? -- do these layer additions need to be done differently in API v4?

Thank you all so much!
Justin

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

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

jalbert

Now I see (I don't know how I missed it) that there is an altitude slider at the very bottom of the selection panel that one gets if one opens the overlay selection (i.e., clicking on "Wind") in the upper right -- so I suppose I can just avoid adding this slider to the main window.

(It might still be nice to know why the above doesn't work, and if there is any way to create and open a slider on the main window. Note that Javascript console information doesn't seem to help for that -- there were no related error messages there.)

jalbert

I've added the following to the css code (just below the #windy section):

      .height-control {
                    width: 100px;
      }

      .height-control .ui-slider-handle {
                    font-size: 12px;
                    width: 50px;
            }

and the following to the javascript (within windyInit):

    const { map, store, picker, utils, overlays, broadcast } = windyAPI;

// var { map, store, picker, utils, overlays, broadcast } = windyAPI;
// var { map } = windyAPI
// .map is instance of Leaflet map

    const levels = store.getAllowed('availLevels');
      //create a custom control element for height
    var HeightSlider = L.Control.extend({
            options: {
                    position: 'topleft'
            },

            onAdd: function (map) {
                    // create the control container with a particular class name
                    var container = L.DomUtil.create('div', 'height-control');

                    // var valMap = ['surface', '100m','975h','950h','925h','900h','850h','800h', '700h','600h','500h','400h','300h', '250h', '200h', '150h' ];
                    var realHeight = ['surface', '100m','300m','600m','750m','900m','1.5km','2.0km','3.0km','4.2km','5.5km','7.0km','9.0km','10km','11.7km','13.5km'];
                    setTimeout(function () {

                            $(".height-control").slider({
                                    max: levels.length - 1,
                                    orientation: "vertical",
                                    slide: function(event, ui){
                                       // W.setLevel(valMap[ui.value])
                                       store.set('level', levels[ ui.value ]);
                                       $('.height-control').find(".ui-slider-handle").text(realHeight[ui.value]);
                                    }
                            });
                            $('.height-control').find(".ui-slider-handle").text(realHeight[0]);
                    }, 1000);
                    return container;
            }
    });

    //add the slider control element to the page
    //if(!($(".height-control").length)) {
            map.addControl( new HeightSlider() );
    //      window.setTimeout(addSliderTitle, 5000);
    // }

but a slider never appears on the windy page, and I am unable to make one appear.
What could I possibly be doing wrong?? (The equivalent code worked in APIv2.3.)

Thanks,
justin

jalbert

Might there be any way to make and display a picker for information (wind, in my case) at a non-surface altitude? For information at surface elevation, I can do:

    broadcast.once('redrawFinished', () => {
         picker.open({ lat: someLatitude, lon: someLongitude });
         // Opening of a picker (async)
    });

but is there any way I could set the picker's altitude too, with maybe something like:

    broadcast.once('redrawFinished', () => {
         picker.open({ lat: someLatitude, lon: someLongitude, alt: someAltitude });
         // Opening of a picker (async)
    });

(that above code of course doesn't work, but might there be anything that would?)

thanks very much!
justin

jalbert