Layers Fail When Loading from CDN #109
Comments
|
|
I guarantee I know less than you, but I don't see that file listed at the CDN https://cdn.jsdelivr.net/npm/@geoarrow/deck.gl-layers@0.3.0-beta.14/dist/. So I'm guessing somehow it didn't make it in there. |
|
It's listed as a dependency though, shouldn't it be bundled automatically? Line 82 in 36b179a |
|
In fairness, I could be completely misreading that site. I just checked the minified file that is served (https://cdn.jsdelivr.net/npm/@geoarrow/geoarrow-js@0.3.0/dist/geoarrow.umd.min.js) and I think the function is in there. If it's not in there, that's one problem. If it is in there, then why doesn't it work in the HTML? |
|
Potentially a rollup bundling issue/misconfiguration? Probably the first place I'd check |
|
I don't even know where to begin with that. I'll ask some JS friends. |
|
I just cloned and built it locally. I'm seeing unresolved dependencies for GeoArrow and a few other modules. I'm not an expert here either but I did try (with no luck) adding resolve() to the Here are the unresolved dependencies warnings: |
|
Hmm. I suppose I never hit the downstream effects of these errors, since the only place I've used deck.gl-layers so far is in Looking at the link at https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency, apparently rollup does not bundle external code by default??? What an annoying default. So it turns out with your I tried to use Thoughts? I figure deck.gl is good to keep as an external but maybe the rest should be bundled? |
|
Right -- I thought sourcing GeoArrow within the I did also go down the route of including GeoArrow and threads within external properties and globals for the umd output (within My naive take is to include them as external but I'm just not sure if it will still play nice if there is some sort of namespace error/issue. |
It's probably this?
When you add geoarrow-js to the |
What issues did you have with UMD and bundling? |
|
The namespace idea is more of hunch than anything concrete. When adding geoarrow-js to Bear with me re: the bundling issues:
Thanks for helping sort this out. It's a real headache. |
|
A couple more items I tried with
|
I would guess that we need to change the geoarrow-js bundling to expose it on the window as |
|
That makes sense to me, I think? I'm definitely happy to test any changes if needed. |
|
Presumably this line needs to be changed in geoarrow-js. If you build that and then change the build config here to expect the name |
|
Still no luck. Here are the steps I took and the error message below:
I'm a bit out of my element so rather than bang my head against it I'll try later this week when I have time to take a deeper dive and understand what these changes actually do. |
|
I took a quick look at this. One error is probably that geoarrow-js itself wasn't including node dependencies in the bundle. You can try from this PR geoarrow/geoarrow-js#26. Another issue seems to be I think traceback in your error might be fixed by the first PR. Let me know if you get a chance to test that |
|
Excellent, that PR fixed the TypeError. Now I'm getting a slightly different variation of the original error: This makes me think its missing a class or import statement somewhere. |
|
Hmm. That's coming from this line deck.gl-layers/src/validate.ts Line 14 in 4bc976e First, are you sure you have If so, I believe the issue could be in the use of Maybe a better way to handle this would be to use duck typing to determine what's an arrow vector? As it is, in geoarrow-js I switched to using duck typing. E.g. the Maybe try switching that line in |
|
Found this thread after running into similar issues. After switching the above line and this one: Line 162 in 4bc976e I was able to get Jared's example working. |
|
Thanks! What did you use instead of that line? |
|
For the check I used: which led to needing a type assertion on the line below: Seems a bit dirty. I'm no js expert but I'd wager there's almost certainly a better way to handle it. |
|
Thanks @kylebarron and @atmorling. I've successfully been able to get @jaredlander's example working by taking these steps:
|
Clearly I can't decide on consistent branch naming 😄. |
|
After building based on @joemarlo's instructions on those branches, it looks like it is working by sourcing the right files. Thanks everyone! |
|
I've been playing around some more with Geoarrow layers and ran into a similar issue when trying to create a GeoArrowPolygonLayer. The error in this case is Which is hitting this line It seems like an issue with the arrow object but I don't quite understand why it doesn't break when we hit I've <html>
<head>
<meta charset='UTF-8' />
<title>Poly Test</title>
<script type="importmap">
{"imports": {"parquet-wasm": "https://unpkg.com/parquet-wasm@0.6.0-beta.2/esm/parquet_wasm.js"}}
</script>
<script src="https://cdn.jsdelivr.net/npm/apache-arrow@15.0.0/Arrow.es2015.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@8.9.34/dist/dist.dev.min.js"></script>
<script src='http://localhost/geoarrow.umd.js'></script>
<script src='http://localhost/dist.umd.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 {
position: relative;
height: 600px;
width: 95%;
}
</style>
</head>
<body>
<div id="holder"></div>
<script type="module">
import initSync, {readParquet} from 'parquet-wasm';
const geoarrowLayers = window['@geoarrow/deck']['gl-layers'];
async function loadData() {
await initSync();
const resp = await fetch("http://localhost/nepal.parquet");
const arrayBuffer = await resp.arrayBuffer();
const wasmTable = readParquet(new Uint8Array(arrayBuffer));
const jsTable = Arrow.tableFromIPC(wasmTable.intoIPCStream());
return jsTable;
}
const polys = await loadData();
const INITIAL_VIEW_STATE = {
latitude: 27.42,
longitude: 85.19,
zoom: 5,
bearing: 0,
pitch: 0
};
const mainMap = new deck.DeckGL({
initialViewState: INITIAL_VIEW_STATE,
id: 'mainMap',
controller: true,
container: "holder",
layers: [
new deck.TileLayer({
data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
renderSubLayers: props => {
const {
bbox: {west, south, east, north}
} = props.tile;
return new deck.BitmapLayer(props, {
data: null,
image: props.data,
bounds: [west, south, east, north]
});
}
}),
/* this works
new geoarrowLayers.GeoArrowSolidPolygonLayer({
id: 'polys',
data: polys,
getFillColor: [80, 0, 200]
})*/
new geoarrowLayers.GeoArrowPolygonLayer({
id: 'polys',
data: polys,
filled: true,
stroked: true,
getFillColor: [80, 0, 200],
getLineColor: [255, 255, 255],
getLineWidth: 10
})
]
});
</script>
</body>
</html> |
|
I've been pretty packed with other projects recently. I'd like to get #111 merged and tested. It sounds like it works for you?
Hmm.. it's weird that it's failing on the constructor. I was originally thinking it might have to do with postMessaging the data back and forth, where it was losing a prototype after being sent back from the worker. But if it's the top-level |
|
Happy if you want to merge #111 and close this. I'll look more into my issue this week and will raise a separate issue if I find anything. |
|
Feel free to make new issues for any new bugs! |
I'm getting the same error for |
|
if you could track it down to an unminified line of code that would be helpful |
|
I spent some time yesterday trying to figure out where the issue lies. Since I'm a complete novice when it comes to bundling, the approach was a little bit 'blind man shoots from the hip', but here's where it led:
As I was writing all that, I realised that TL;DR I guess that's the change? Update |
|
Wow that's an annoying error. Thanks for digging into it! Would you be able to submit that one line fix as a PR? |
Loving the abilities that geoarrow gives us and I'm trying to use it as much as possible. I managed to use Geoarrow layers with a deck.gl map when importing the packages in the JS code. But when trying to load the JS packages from CDNs, I get this error.
Here is the code when loading from CDNs. I suspect the error may be caused by
const geoarrowLayers = window['@geoarrow/deck']['gl-layers'];andnew geoarrowLayers.GeoArrowScatterplotLayer({...}), but I'm far from certain.I tried to make it as self-contained as possible, the only thing you'll need to change is the URL for the data files, since my server is not setup for CORS. For instance, download the files at
https://jaredlander.com/data/hood_centers.arrowandhttps://jaredlander.com/data/hood_polys.geojsonthen put them somewhere accessible to your code and edit the corresponding lines.The
GeoJsonLayerlayer is just there to help make sure things are working and can be removed for debugging purposes.When I use import statements in the JS code, as below, everything works. I'm not sure if my code above had an error or if there is an issue with the CDN.
The text was updated successfully, but these errors were encountered: