From 8474b02f36722b38bebd4812ee0958f663865661 Mon Sep 17 00:00:00 2001
From: Kyle Barron <kylebarron2@gmail.com>
Date: Sun, 24 Mar 2024 19:20:14 -0400
Subject: [PATCH] Use MapboxOverlay

---
 package-lock.json | 13 +++++++++++
 package.json      |  1 +
 src/index.tsx     | 55 ++++++++++++++++++++++++++++++++---------------
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf6d4b9a..6c9cd9f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@deck.gl/core": "^8.9.35",
         "@deck.gl/extensions": "^8.9.35",
         "@deck.gl/layers": "^8.9.35",
+        "@deck.gl/mapbox": "^8.9.35",
         "@deck.gl/react": "^8.9.35",
         "@geoarrow/deck.gl-layers": "^0.3.0-beta.15",
         "apache-arrow": "^15.0.1",
@@ -196,6 +197,18 @@
         "@luma.gl/core": "^8.0.0"
       }
     },
+    "node_modules/@deck.gl/mapbox": {
+      "version": "8.9.35",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mapbox/-/mapbox-8.9.35.tgz",
+      "integrity": "sha512-3GKbYkB6OF+65Al/F2g0DlGhiQAPnA7/l/9Tl9cFSaaLBUfw2zT/U0kgZe3/4ZyfwQMzmoW6D3Ybb/FB4FKlmg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "@types/mapbox-gl": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "^8.0.0"
+      }
+    },
     "node_modules/@deck.gl/mesh-layers": {
       "version": "8.9.32",
       "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.9.32.tgz",
diff --git a/package.json b/package.json
index 3b94b4ae..e758bfb6 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@deck.gl/core": "^8.9.35",
     "@deck.gl/extensions": "^8.9.35",
     "@deck.gl/layers": "^8.9.35",
+    "@deck.gl/mapbox": "^8.9.35",
     "@deck.gl/react": "^8.9.35",
     "@geoarrow/deck.gl-layers": "^0.3.0-beta.15",
     "apache-arrow": "^15.0.1",
diff --git a/src/index.tsx b/src/index.tsx
index 113e0e4a..c1e84384 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,8 +2,13 @@ import * as React from "react";
 import { useState, useEffect } from "react";
 import { createRender, useModelState, useModel } from "@anywidget/react";
 import type { Initialize, Render } from "@anywidget/types";
-import Map from "react-map-gl/maplibre";
-import DeckGL from "@deck.gl/react/typed";
+import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox/typed";
+import Map, {
+  FullscreenControl,
+  NavigationControl,
+  ScaleControl,
+  useControl,
+} from "react-map-gl/maplibre";
 import { MapViewState, type Layer } from "@deck.gl/core/typed";
 import { BaseLayerModel, initializeLayer } from "./model/index.js";
 import type { WidgetModel } from "@jupyter-widgets/base";
@@ -14,6 +19,8 @@ import { v4 as uuidv4 } from "uuid";
 import { Message } from "./types.js";
 import { flyTo } from "./actions/fly-to.js";
 
+import "maplibre-gl/dist/maplibre-gl.css";
+
 await initParquetWasm();
 
 const DEFAULT_INITIAL_VIEW_STATE = {
@@ -27,6 +34,16 @@ const DEFAULT_INITIAL_VIEW_STATE = {
 const DEFAULT_MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
 
+function DeckGLOverlay(
+  props: MapboxOverlayProps & {
+    interleaved?: boolean;
+  },
+) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
 async function getChildModelState(
   childModels: WidgetModel[],
   childLayerIds: string[],
@@ -146,7 +163,7 @@ function App() {
 
   return (
     <div id={`map-${mapId}`} style={{ height: mapHeight || "100%" }}>
-      <DeckGL
+      <Map
         initialViewState={
           ["longitude", "latitude", "zoom"].every((key) =>
             Object.keys(initialViewState).includes(key),
@@ -154,21 +171,25 @@ function App() {
             ? initialViewState
             : DEFAULT_INITIAL_VIEW_STATE
         }
-        controller={true}
-        layers={layers}
-        // @ts-expect-error
-        getTooltip={showTooltip && getTooltip}
-        pickingRadius={pickingRadius}
-        useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
-        // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
-        _typedArrayManagerProps={{
-          overAlloc: 1,
-          poolSize: 0,
-        }}
-        parameters={parameters || {}}
+        mapStyle={mapStyle || DEFAULT_MAP_STYLE}
       >
-        <Map mapStyle={mapStyle || DEFAULT_MAP_STYLE} />
-      </DeckGL>
+        <DeckGLOverlay
+          layers={layers}
+          // @ts-expect-error
+          getTooltip={showTooltip && getTooltip}
+          pickingRadius={pickingRadius}
+          useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
+          // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
+          _typedArrayManagerProps={{
+            overAlloc: 1,
+            poolSize: 0,
+          }}
+          parameters={parameters || {}}
+        />
+        <NavigationControl />
+        <ScaleControl />
+        <FullscreenControl />
+      </Map>
     </div>
   );
 }