GeoArrowScatterplotLayer throws 'c.vector is undefined'

tim-salabim commented 1 month ago

As alluded to on Mastodon, I am still having issues with getting GeoArrowScatterplotLayer to work. A reproducible example is below. This seems a very similar issue to what @jaredlander reported here, in fact, I've modified his example in the reprex below. This uses some .arrow data hosted on a CORS enabled public bucket on AWS S3.

<head>
    <meta charset='UTF-8' />
    <title>GeoArrowScatterplotLayer issue</title>
    <script src="https://cdn.jsdelivr.net/npm/apache-arrow@16.1.0/Arrow.es2015.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.14/dist/dist.dev.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@geoarrow/deck.gl-layers@0.3.0-beta.16/dist/dist.umd.min.js"></script>
    <style>
        map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }

        body {
            font-family: Helvetica, Arial, sans-serif;
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        #holder {
            border-color: red;
            border-width: 1px;
            border-style: solid;
            position: relative;
            height: 600px;
            width: 95%;
        }
    </style>
</head>

<body>
    <div id="holder"></div>
    <script type="module">
        const geoarrowLayers = window['@geoarrow/deck']['gl-layers'];

        const GEOARROW_POINT_DATA = "https://geoarrow-test.s3.eu-central-1.amazonaws.com/test1_layer.arrow";

        const arrow_table = await Arrow.tableFromIPC(fetch(GEOARROW_POINT_DATA));

        const INITIAL_VIEW_STATE = {
            latitude: 40.72875,
            longitude: 14.00005,
            zoom: 10,
            bearing: 0,
            pitch: 0
        };

        const mainMap = new deck.DeckGL({
            initialViewState: INITIAL_VIEW_STATE,
            id: 'mainMap',
            controller: true,
            container: "holder",
            layers: [
                new geoarrowLayers.GeoArrowScatterplotLayer({
                    id: 'scatter',
                    data: arrow_table,
                    pickable: true,
                    getFillColor: [80, 0, 200],
                    getPosition: d => d.getChild('geometry'),
                    getRadius: 300,
                })
            ]
        });
    </script>
</body>

</html>

This is the error in the console

Any ideas as to what might cause this?

kylebarron commented 1 month ago

As a general note, I'd suggest testing with the PathLayer before testing with the TripsLayer. The TripsLayer is more complex.

This is probably due to the Arrow name not correctly getting found. We found recently that the name of arrow-js on the page has to be Arrow with a capital A. This was recently fixed in this repo in https://github.com/geoarrow/deck.gl-layers/pull/122 but hasn't been released yet

tim-salabim commented 1 month ago

Thanks for the clarification. I saw that PR but assumed it was already released. I'll wait until then.

As a general note, I'd suggest testing with the PathLayer before testing with the TripsLayer. The TripsLayer is more complex.

This example is using ScatterplotLayer. Am I missing something?

kylebarron commented 1 month ago

Huh... When I copied your code into an HTML file and ran it on localhost, the error traceback has trips-layer in it, which made me confused. Maybe the sourcemaps are incorrect?

tim-salabim commented 1 month ago

Strange, if I serve it in firefox via localhost I get

In Chromium I get the same as you

kylebarron commented 1 month ago

Yeah must be an issue with the source maps...

kylebarron commented 1 month ago

I published @geoarrow/deck.gl-layers@0.3.0-beta.17 with the latest main

tim-salabim commented 1 month ago

Unfortunately, I am still getting the same error...

kylebarron commented 1 month ago

I'm not a JS expert, and personally I always use React with a bundler. Based on the previous issue in https://github.com/geoarrow/deck.gl-layers/issues/109, it seemed like people were able to get something working directly from a CDN.

I don't have a lot of spare time right now, so I'm not able to try and dig in and debug this.

jaredlander commented 1 month ago

Maybe @joemarlo can help write CI/CD pipelines for that?

tim-salabim commented 1 week ago

I'm not a JS expert, and personally I always use React with a bundler. Based on the previous issue in https://github.com/geoarrow/deck.gl-layers/issues/109, it seemed like people were able to get something working directly from a CDN.

@jaredlander did you ever get this working? If so, how?

jaredlander commented 1 week ago

I didn't think we looked at it yet, but I'll remind my folks to take a look.

tim-salabim commented 1 week ago

Thanks!

joemarlo commented 1 week ago

This does look similar to #109. I don't think we ever got it working straight from a CDN. We cloned the branches, ran npm run build on them, and copied over the static files to the project we were working on. Specifically:

npm run build deck.gl-layers/tree/kyle/bundling-fix branch
npm run build geoarrow-js/tree/kyle/fix-bundling branch
Source both of these new local umd.js files in the head of the example's index.html

Not a clue how to get this on a CDN. Do you have to submit to CDNs or do they just scan and pull the repos' main branch?

It looks like the fix for deck.gl-layers has been merged but not the geoarrow-js fix. So perhaps that is the issue?

kylebarron commented 1 week ago

I merged the geoarrow-js pr. If you need me to create a patch release I can

joemarlo commented 1 week ago

Thanks, @kylebarron. I think a release is necessary. Do you submit it to npm? I did a little poking around and the CDNs apparently just pull the latest version from there.

kylebarron commented 1 week ago

I published 0.3.1 https://github.com/geoarrow/geoarrow-js/releases/tag/v0.3.1

tim-salabim commented 1 week ago

Thanks everyone! When using the latest versions, we get rid of the JS errors, but we get a webgl warning (this is in Firefox):

WebGL warning: drawArraysInstanced: Instance fetch requires 100, but attribs only supply 0.

<!DOCTYPE html>

<head>
    <meta charset='UTF-8' />
    <title>GeoArrowScatterplotLayer issue</title>
    <script src="https://cdn.jsdelivr.net/npm/apache-arrow@16.1.0/Arrow.es2015.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.20/dist/dist.dev.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@geoarrow/geoarrow-js@0.3.1/dist/geoarrow.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@geoarrow/deck.gl-layers@0.3.0-beta.17/dist/dist.umd.min.js"></script>
    <style>
        map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }

        body {
            font-family: Helvetica, Arial, sans-serif;
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        #holder {
            border-color: red;
            border-width: 1px;
            border-style: solid;
            position: relative;
            height: 600px;
            width: 95%;
        }
    </style>
</head>

<body>
    <div id="holder"></div>
    <script type="module">
        const geoarrowLayers = window['@geoarrow/deck']['gl-layers'];

        const GEOARROW_POINT_DATA = "https://geoarrow-test.s3.eu-central-1.amazonaws.com/test1_layer.arrow";

        const arrow_table = await Arrow.tableFromIPC(fetch(GEOARROW_POINT_DATA));

        const INITIAL_VIEW_STATE = {
            latitude: 40.72875,
            longitude: 14.00005,
            zoom: 10,
            bearing: 0,
            pitch: 0
        };

        const mainMap = new deck.DeckGL({
            initialViewState: INITIAL_VIEW_STATE,
            id: 'mainMap',
            controller: true,
            container: "holder",
            layers: [
                new geoarrowLayers.GeoArrowScatterplotLayer({
                    id: 'scatter',
                    data: arrow_table,
                    pickable: true,
                    getFillColor: [80, 0, 200],
                    getPosition: arrow_table.getChild('geometry'),
                    getRadius: 30,
                    radiusMinPixels: 3
                })
            ]
        });
    </script>
</body>

</html>

kylebarron commented 1 week ago

WebGL warning: drawArraysInstanced: Instance fetch requires 100, but attribs only supply 0.

That could be a bug in deck.gl v9

geoarrow / deck.gl-layers

GeoArrowScatterplotLayer throws 'c.vector is undefined' #126