Windy Community

    • Register
    • Login
    • Search
    • Unread
    • Categories
    • Groups
    • Go to windy.com

    Adding a slider (for wind altitude) in API v4 -- how to make it appear??

    Windy API v4
    1
    2
    571
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jalbert last edited by

      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

      1 Reply Last reply Reply Quote 0
      • J
        jalbert last edited by

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
        NodeBB & contributors, OSM & contributors, HERE maps
        Terms and Conditions     Privacy Policy