Support deck.gl v9 (#112)

* Support deck.gl v9

* working point demo

* bump to deckgl V9 (#124)

* fix arrow bundle

* v9 bump

* bump to latest and update luma resolutions to match

* revert version change

* update lockfile

---------

Co-authored-by: Kyle Barron <[email protected]>

---------

Co-authored-by: atmorling <[email protected]>

Author: kylebarron

examples/linestring/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -57,7 +57,7 @@ function Root() {
         getColor: [255, 0, 0],
         widthMinPixels: 1,
         pickable: true,
-      })
+      }),
     );
 
   return (

examples/linestring/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@geoarrow/deck.gl-layers": "../../",
     "apache-arrow": ">=14",
-    "deck.gl": "^8.9.23",
+    "deck.gl": "^9.0.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^5.3.0"

examples/multilinestring/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl/typed";
+import DeckGL, { Layer } from "deck.gl";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 

examples/multilinestring/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "apache-arrow": ">=14",
-    "deck.gl": "^8.9.23",
+    "deck.gl": "^9.0.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^5.3.0"

examples/multipoint/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl/typed";
+import DeckGL, { Layer } from "deck.gl";
 import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -29,7 +29,7 @@ function Root() {
     if (info.object) {
       // eslint-disable-next-line
       alert(
-        `${info.object.properties.name} (${info.object.properties.abbrev})`
+        `${info.object.properties.name} (${info.object.properties.abbrev})`,
       );
     }
   };
@@ -65,7 +65,7 @@ function Root() {
         radiusMinPixels: 4,
         getPointRadius: 10,
         pointRadiusMinPixels: 0.8,
-      })
+      }),
     );
 
   return (

examples/multipoint/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "apache-arrow": ">=14",
-    "deck.gl": "^8.9.23",
+    "deck.gl": "^9.0.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^5.3.0"

examples/multipolygon/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -58,7 +58,7 @@ function Root() {
         getFillColor: table.getChild("pop_colors")!,
         pickable: true,
         autoHighlight: true,
-      })
+      }),
     );
 
   return (

examples/multipolygon/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@geoarrow/deck.gl-layers": "../../",
     "apache-arrow": ">=14",
-    "deck.gl": "^8.9.23",
+    "deck.gl": "^9.0.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^5.3.0"

examples/point/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -56,11 +56,11 @@ function Root() {
         data: table,
         // Pre-computed colors in the original table
         getFillColor: table.getChild("colors")!,
-        opacity: 0.01,
+        opacity: 0.1,
         getRadius: ({ index, data }) => {
           const recordBatch = data.data;
           const row = recordBatch.get(index)!;
-          return row["avg_d_kbps"] / 10;
+          return row["avg_d_kbps"] / 50;
         },
         radiusMinPixels: 0.1,
         pickable: true,

examples/point/package.json

@@ -8,8 +8,10 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@loaders.gl/compression": "^4.1.4",
+    "@loaders.gl/crypto": "^4.1.4",
     "apache-arrow": ">=14",
-    "deck.gl": "^8.9.23",
+    "deck.gl": "^9.0.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^5.3.0"