Windmap

Test using ESRI's Wind-js, modified with custom color palette.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Wind Animation</title>

map.on("load", mapLoaded);
        function mapLoaded() {
          // Add raster layer
          if ( canvasSupport ) {
            rasterLayer = new RasterLayer(null, {
              opacity: 0.75
            });
            map.addLayer(rasterLayer);
            
            map.on("extent-change", redraw);
            map.on("resize", function(){});
            map.on("zoom-start", redraw);
            map.on("pan-start", redraw);
            var layersRequest = esriRequest({
              url: './gfs.json',
              content: {},
              handleAs: "json"
            });
            layersRequest.then(
              function(response) {
                console.log(response);
                windy = new Windy({ canvas: rasterLayer._element, data: response });
                redraw();
            }, function(error) {
                console.log("Error: ", error.message);
            });
          } else {
            dom.byId("mapCanvas").innerHTML = "This browser doesn't support canvas. Visit <a target='_blank' href='https://www.caniuse.com/#search=canvas'>caniuse.com</a> for supported browsers";
          }
        }
        // does the browser support canvas? 
        function supports_canvas() {
          return !!document.createElement("canvas").getContext;
        }
        function redraw(){
          rasterLayer._element.width = map.width;
          rasterLayer._element.height = map.height;
          windy.stop();
          var extent = map.geographicExtent;
          setTimeout(function(){
            windy.start(
              [[0,0],[map.width, map.height]], 
              map.width, 
              map.height, 
              [[extent.xmin, extent.ymin],[extent.xmax, extent.ymax]]
            );
          },500);
        }
      });
    </script>
  </head>
  
  <body class="">
     <div id="mapCanvas" style="height:100%;">
     </div>
  </body>

</html>

https://js.arcgis.com/3.12compact/