diff --git a/package-lock.json b/package-lock.json
index d86d2007..5b1b8376 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@deck.gl/core": "^9.1.14",
         "@deck.gl/extensions": "^9.1.14",
         "@deck.gl/layers": "^9.1.14",
+        "@deck.gl/mapbox": "^9.1.14",
         "@deck.gl/react": "^9.1.14",
         "@geoarrow/deck.gl-layers": "^0.3.1",
         "@nextui-org/react": "^2.4.8",
@@ -1398,6 +1399,19 @@
         "@math.gl/core": "4.1.0"
       }
     },
+    "node_modules/@deck.gl/mapbox": {
+      "version": "9.1.14",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mapbox/-/mapbox-9.1.14.tgz",
+      "integrity": "sha512-l3c5NFwKjIOeVWMtqK5LR8MA4grRe7tpLctkovNIo+owPBoW+q7gAWBJ1hGFmE1sxVFhoqZx70FqBAT9Mqn1ow==",
+      "dependencies": {
+        "@luma.gl/constants": "~9.1.9",
+        "@math.gl/web-mercator": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "^9.1.0",
+        "@luma.gl/core": "~9.1.9"
+      }
+    },
     "node_modules/@deck.gl/mesh-layers": {
       "version": "9.1.14",
       "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-9.1.14.tgz",
diff --git a/package.json b/package.json
index 82f5c2cf..5b81614c 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@deck.gl/extensions": "^9.1.14",
     "@deck.gl/layers": "^9.1.14",
     "@deck.gl/react": "^9.1.14",
+    "@deck.gl/mapbox": "^9.1.14",
     "@geoarrow/deck.gl-layers": "^0.3.1",
     "@babel/runtime": "^7.28.4",
     "@nextui-org/react": "^2.4.8",
diff --git a/src/index.tsx b/src/index.tsx
index 5d5a0f0b..37dad647 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,8 +2,12 @@ import * as React from "react";
 import { useEffect, useCallback, useState } 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";
+import Map, {
+  useControl,
+  FullscreenControl,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl/maplibre";
 import { MapViewState, PickingInfo, type Layer } from "@deck.gl/core";
 import { BaseLayerModel, initializeLayer } from "./model/index.js";
 import type { WidgetModel } from "@jupyter-widgets/base";
@@ -13,6 +17,10 @@ import { v4 as uuidv4 } from "uuid";
 import { Message } from "./types.js";
 import { flyTo } from "./actions/fly-to.js";
 import { useViewStateDebounced } from "./state";
+import {
+  MapboxOverlay as DeckOverlay,
+  MapboxOverlayProps,
+} from "@deck.gl/mapbox";
 
 import { MachineContext, MachineProvider } from "./xstate";
 import * as selectors from "./xstate/selectors";
@@ -38,6 +46,13 @@ const DEFAULT_INITIAL_VIEW_STATE = {
 const DEFAULT_MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
 
+function DeckGLOverlay(props: MapboxOverlayProps) {
+  const overlay = useControl(() => new DeckOverlay(props));
+
+  overlay.setProps(props);
+  return null;
+}
+
 async function getChildModelState(
   childModels: WidgetModel[],
   childLayerIds: string[],
@@ -237,8 +252,9 @@ function App() {
           />
         )}
         <div className="bg-red-800 h-full w-full relative">
-          <DeckGL
-            style={{ width: "100%", height: "100%" }}
+          <Map
+            reuseMaps
+            id={`map-${mapId}`}
             initialViewState={
               ["longitude", "latitude", "zoom"].every((key) =>
                 Object.keys(initialViewState).includes(key),
@@ -246,48 +262,55 @@ function App() {
                 ? initialViewState
                 : DEFAULT_INITIAL_VIEW_STATE
             }
-            controller={true}
-            layers={
-              bboxSelectPolygonLayer
-                ? layers.concat(bboxSelectPolygonLayer)
-                : layers
-            }
-            getTooltip={(showTooltip && getTooltip) || undefined}
-            getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
-            pickingRadius={pickingRadius}
-            onClick={onMapClickHandler}
-            onHover={onMapHoverHandler}
-            useDevicePixels={
-              isDefined(useDevicePixels) ? useDevicePixels : true
-            }
-            // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
-            _typedArrayManagerProps={{
-              overAlloc: 1,
-              poolSize: 0,
+            mapStyle={mapStyle || DEFAULT_MAP_STYLE}
+            attributionControl={{
+              customAttribution,
             }}
-            onViewStateChange={(event) => {
-              const { viewState } = event;
-
-              // This condition is necessary to confirm that the viewState is
-              // of type MapViewState.
-              if ("latitude" in viewState) {
-                const { longitude, latitude, zoom, pitch, bearing } = viewState;
-                setViewState({
-                  longitude,
-                  latitude,
-                  zoom,
-                  pitch,
-                  bearing,
-                });
-              }
-            }}
-            parameters={parameters || {}}
           >
-            <Map
-              mapStyle={mapStyle || DEFAULT_MAP_STYLE}
-              customAttribution={customAttribution}
-            ></Map>
-          </DeckGL>
+            <FullscreenControl position="top-left" />
+            <NavigationControl position="top-left" />
+            <ScaleControl position="bottom-left" />
+            <DeckGLOverlay
+              // interleaved
+              style={{ width: "100%", height: "100%" }}
+              layers={
+                bboxSelectPolygonLayer
+                  ? layers.concat(bboxSelectPolygonLayer)
+                  : layers
+              }
+              getTooltip={(showTooltip && getTooltip) || undefined}
+              getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
+              pickingRadius={pickingRadius}
+              onClick={onMapClickHandler}
+              onHover={onMapHoverHandler}
+              useDevicePixels={
+                isDefined(useDevicePixels) ? useDevicePixels : true
+              }
+              // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
+              _typedArrayManagerProps={{
+                overAlloc: 1,
+                poolSize: 0,
+              }}
+              onViewStateChange={(event) => {
+                const { viewState } = event;
+
+                // This condition is necessary to confirm that the viewState is
+                // of type MapViewState.
+                if ("latitude" in viewState) {
+                  const { longitude, latitude, zoom, pitch, bearing } =
+                    viewState;
+                  setViewState({
+                    longitude,
+                    latitude,
+                    zoom,
+                    pitch,
+                    bearing,
+                  });
+                }
+              }}
+              parameters={parameters || {}}
+            />
+          </Map>
         </div>
       </div>
     </div>