Issue with OL 6.1.1

[slarosa]

Hi, I am trying to add wind layer to my map by using the following example:

I add in my the script:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wind-layer@0.1.2/dist/windLayer.js"></script>
<script type="text/javascript" src="index.js"></script>

and then I add layer definition in my main index.js:

$.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);
});

The "wind" layer is not displayed and I see the following log error:

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)

I also tried to add opacity option but I get the same error.

Any hint to get it working?

Thank you.

[sakitam-fdd]

@slarosa Will be fixed in the next version

[sakitam-fdd]

@slarosa Try v1.0.0-alpha.3

[slarosa]

@sakitam-fdd thanks.

It seems is not enough to change version to the source of the script tag. I done it but it has not worked.

Anyway, I tried the following different way:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol-wind@1.0.0-alpha.3/dist/ol-wind.min.js"></script>

but i get TypeError: OlWind is not a constructor

Also it throws the error:

ol-wind.min.js:23 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at s (ol-wind.min.js:23)
    at a (ol-wind.min.js:23)
    at ol-wind.min.js:44
    at ol-wind.min.js:44
    at ol-wind.min.js:8
    at ol-wind.min.js:8

Any hint?

Thank you.

[sakitam-fdd]

@slarosa There are some changes to the API for the new version，Here are some minimal examples https://codesandbox.io/s/map-ol-wind-2vc8v.
In addition, for the new version of OL, it may rely more on packaging tools, and may not be very friendly to CDN references, and for OL, there are many internal functions that are not exposed, so it is difficult to be compatible.

[sakitam-fdd]

Use custom build-legacy build ol packages, Here's a simple example https://codepen.io/sakitam-fdd/pen/NWGOBoj

[slarosa]

Thank you for your help @sakitam-fdd .

It now is working well. So I don't know why before it was not working.

<script src="//cdn.jsdelivr.net/npm/ol-wind@1.0.0-alpha.5/dist/ol-wind.js"></script>

fetch('https://danwild.github.io/leaflet-velocity/wind-global.json')
        .then(res => res.json())
        .then(res => {
            var wind = new WindLayer(res, {
                title: 'Wind',
                visible: false,
                wrapX: true,
                forceRender: false,
                windOptions: {
                    addLayer: true,
                    globalAlpha: 0.8,
                    maxAge: 90,
                    velocityScale: 0.01,
                    paths: 2000,
                    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: 3,
                },

            });

            map.addLayer(wind);
        });

However, I now have another problem but it concerns another topic so I will open a new issue for it.

Thanks much for the amazing job

[sakitam-fdd]

@slarosa For the previous error, you can use codepen or codesandbox to give me a simple example, I will check it out tomorrow

[slarosa]

@sakitam-fdd here a simple example which shows the previous error. https://codepen.io/slarosa/pen/yLYQzad

If the javascript source links to //cdn.jsdelivr.net/npm/@sakitam-gis/ol6@6.3.3/dist/ol.js your own OL6 library (6.3.3) all works fine. While with official OL6 library (6.3.1 as in codepen) it does not work.

[sakitam-fdd]

@slarosa For this question, you may be interested in external and globals of rollup. You can see some code in:

1. https://github.com/sakitam-fdd/wind-layer/blob/master/rollup/external/ol.js
2. https://github.com/sakitam-fdd/wind-layer/blob/master/packages/ol/src/renderer.ts#L5
3. https://github.com/sakitam-fdd/wind-layer/blob/master/packages/ol/src/renderer.ts#L14

with official OL6 library, ol.proj and ol.transform some of the modules used are not exposed，I just modified some things according to the official documents to expose these modules.

For example, add @api under the required function annotation:
https://github.com/openlayers/openlayers/blob/master/src/ol/transform.js#L35

/**
 * Resets the given transform to an identity transform.
 * @param {!Transform} transform Transform.
 * @return {!Transform} Transform.
 * @api
 */
export function reset(transform) {
  return set(transform, 1, 0, 0, 1, 0, 0);
}

[slarosa]

@sakitam-fdd thank you so much for the exhaustive explanation.