<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/windLayer.js"></script>
<script type="text/javascript" src="index.js"></script>

$.getJSON('https://sakitam-fdd.github.io/wind-layer/data/wind.json', function (data) {
        var wind = new windLayer.OlWind(data, {
            layerName: 'windLayer',
            projection: 'EPSG:4326',
            devicePixelRatio: window.devicePixelRatio,
            colorScale: [
                'rgb(36,104, 180)',
                'rgb(60,157, 194)',
                'rgb(128,205,193 )',
                'rgb(151,218,168 )',
                'rgb(198,231,181)',
                'rgb(238,247,217)',
                'rgb(255,238,159)',
                'rgb(252,217,125)',
                'rgb(255,182,100)',
                'rgb(252,150,75)',
                'rgb(250,112,52)',
                'rgb(245,64,32)',
                'rgb(237,45,28)',
                'rgb(220,24,32)',
                'rgb(180,0,35)'
            ],
            minVelocity: 0,
            maxVelocity: 10,
            velocityScale: 0.05,
            particleAge: 90,
            lineWidth: 1,
            particleMultiplier: 0.01
        });

        map.addLayer(wind);
});

Layer.js:91 Uncaught TypeError: Cannot read property 'opacity' of undefined
    at e.useContainer (Layer.js:91)
    at e.renderFrame (TileLayer.js:225)
    at e.render (Layer.js:205)
    at e.renderFrame (Composite.js:110)
    at e.renderFrame_ (PluggableMap.js:1166)
    at e.<anonymous> (PluggableMap.js:186)

TypeError: Argument 1 of Node.appendChild does not implement interface Node. seecast-ol6.e31bb0bc.js:11134:12
    replaceChildren https://example.com/seecast-ol6.e31bb0bc.js:11134
    renderFrame https://example.com/seecast-ol6.e31bb0bc.js:38003
    renderFrame_ https://example.com/seecast-ol6.e31bb0bc.js:35575
    animationDelay_ https://example.com/seecast-ol6.e31bb0bc.js:34383
    <anonymous> self-hosted:876

Uncaught (in promise) TypeError: data.checkFields is not a function
    at OlWind.push../node_modules/ol5-wind/dist/ol-wind.esm.js.OlWind.setData (Vertex.js:27)
    at new OlWind (Vertex.js:27)
    at map.tsx:35

import * as React from 'react';
import 'ol/ol.css';
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import { WindLayer } from 'ol5-wind';
import './map.scss';

export default class MapX extends React.Component {
  mapDiv: any;

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const layer = new TileLayer({
      source: new OSM({
        url: '//{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
      })
    });

    const map = new Map({
      layers: [layer],
      target: this.mapDiv,
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    fetch('./content/data/wind.json')
      .then(res => res.json())
      .then(res => {
        const windLayer = new WindLayer(res, {
          forceRender: false,
          windOptions: {
            velocityScale: 1 / 20,
            paths: 5000,
            colorScale: [
              'rgb(36,104, 180)',
              'rgb(60,157, 194)',
              'rgb(128,205,193 )',
              'rgb(151,218,168 )',
              'rgb(198,231,181)',
              'rgb(238,247,217)',
              'rgb(255,238,159)',
              'rgb(252,217,125)',
              'rgb(255,182,100)',
              'rgb(252,150,75)',
              'rgb(250,112,52)',
              'rgb(245,64,32)',
              'rgb(237,45,28)',
              'rgb(220,24,32)',
              'rgb(180,0,35)'
            ],
            lineWidth: 2,
            generateParticleOption: false
          }
        });
        map.addLayer(windLayer);
      });
  }

  render() {
    return (
      // Need this extra div to supress css of the parent
      <div>
        <div className="openlayers-map" ref={el => (this.mapDiv = el)} style={{ height: `${window.innerHeight - 132}px` }}>
          {this.props.children}
        </div>
      </div>
    );
  }
}

 found 21 vulnerabilities (3 low, 6 moderate, 11 high, 1 critical) in 7463 scanned packages

woodbri@B1B8B6F:~/work/wind-layer$ npm audit fix
npm WARN [email protected] requires a peer of openlayers@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of maptalks@^0.40.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-node@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-promise@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=2.0.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

fixed 3 of 21 vulnerabilities in 7463 scanned packages
  17 vulnerabilities required manual review and could not be updated
  1 package update for 1 vulnerability involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

import OlWindy from 'wind-layer/dist/OlWindy.js';

var windy = new OlWindy(windData, {
    layerName: 'Wind Animation',
    title: 'Wind Animation',
    projection: 'EPSG:4326',
    devicePixelRatio: window.devicePixelRatio,
    map: map,
    colorScale: [
        "rgb(36,104, 180)",
        "rgb(60,157, 194)",
        "rgb(128,205,193 )",
        "rgb(151,218,168 )",
        "rgb(198,231,181)",
        "rgb(238,247,217)",
        "rgb(255,238,159)",
        "rgb(252,217,125)",
        "rgb(255,182,100)",
        "rgb(252,150,75)",
        "rgb(250,112,52)",
        "rgb(245,64,32)",
        "rgb(237,45,28)",
        "rgb(220,24,32)",
        "rgb(180,0,35)"
    ],
    minVelocity: 0,
    maxVelocity: 10,
    velocityScale: 0.05,
    particleAge: 90,
    lineWidth: 1,
    particleMultiplier: 0.01,
});

// control to toggle windy on/off
function toggleWindy() {
    if ($(this).prop('checked')) {
        if (windData) {
            windy.removeLayer();
            windy.setData(windData);
            windy.appendTo(map);
        }
    }
    else {
        windy.clearWind();
        windy.removeLayer();
    }
}

$('input[name=animatewinds]').prop('checked', false);
$('input[name=animatewinds]').on('click', toggleWindy);

TypeError: projection1.getUnits is not a function proj.js:399:33
    equivalent proj.js:399
    getImage Image.js:153
    prepareFrame ImageLayer.js:146
    renderFrame Map.js:157
    renderFrame_ PluggableMap.js:1226
    animationDelay_ PluggableMap.js:193
    <anonymous> self-hosted:876

RES = '1p00'
YYYMMDD = utcnow.strftime("%Y%m%d")
HH = '{0:0>2}.format(int(int(utcnow.strftime("%H"))/6)*6)

URL = 'https://nomads.ncep.noaa.gov:9090/dods/gfs_{0}/gfs{1}/gfs_{0}_{2}z'.format(RES, YYYMMDD, HH)

//lev_2_m_above_ground: 'on',

lev_10_m_above_ground: 'on',

//lev_surface: 'on',

// var_TMP: 'off',

var_UGRD: 'on',

var_VGRD: 'on',

subregion: 'on'