From 7de1ee7fa7c47a0f6c7fcdea3934fa955f6dceb7 Mon Sep 17 00:00:00 2001
From: Chris Gervang <chris@gervang.com>
Date: Tue, 27 Feb 2024 15:37:13 -0800
Subject: [PATCH 1/5] chore(examples) Use MapboxOverlay in safegraph example

Signed-off-by: Chris Gervang <chris@gervang.com>
---
 examples/website/safegraph/app.js       | 37 +++++++++++++++----------
 examples/website/safegraph/package.json |  2 +-
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/examples/website/safegraph/app.js b/examples/website/safegraph/app.js
index 4a3511123e3..b2e0739fa5e 100644
--- a/examples/website/safegraph/app.js
+++ b/examples/website/safegraph/app.js
@@ -1,5 +1,5 @@
 import mapboxgl from 'mapbox-gl';
-import {MapboxLayer} from '@deck.gl/mapbox';
+import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox';
 import {ArcLayer} from '@deck.gl/layers';
 import {H3HexagonLayer} from '@deck.gl/geo-layers';
 import {scaleLog} from 'd3-scale';
@@ -32,6 +32,10 @@ export function renderToDOM(container, data) {
     pitch: 60
   });
 
+  const deckOverlay = new DeckOverlay({
+    interleaved: true
+  })
+
   map.addControl(new mapboxgl.NavigationControl(), 'top-left');
 
   map.on('load', () => {
@@ -48,26 +52,27 @@ export function renderToDOM(container, data) {
       }
     });
 
-    renderLayers(map, data);
+    renderLayers(map, deckOverlay, data);
   });
 
+  map.addControl(deckOverlay)
+
   return {
-    update: newData => renderLayers(map, newData),
+    update: newData => renderLayers(map, deckOverlay, newData),
     remove: () => {
       map.remove();
     }
   };
 }
 
-function renderLayers(map, data) {
+function renderLayers(map, deckOverlay, data) {
   if (!data) {
     return;
   }
   let selectedPOICentroid;
 
-  const arcLayer = new MapboxLayer({
+  const arcLayer = new ArcLayer({
     id: 'deckgl-connections',
-    type: ArcLayer,
     data: [],
     getSourcePosition: d => selectedPOICentroid,
     getTargetPosition: d => [d.home_lng, d.home_lat],
@@ -79,14 +84,18 @@ function renderLayers(map, data) {
   const selectPOI = hex => {
     const [lat, lng] = cellToLatLng(hex);
     selectedPOICentroid = [lng, lat];
-    arcLayer.setProps({
-      data: data.filter(d => d.hex === hex)
-    });
+    deckOverlay.setProps({ 
+      layers: [
+        poiLayer, // TODO: This was written with an imperative pattern, which won't work for MapboxOverlay. poiLayer needs to be defined.
+        arcLayer.clone({
+          data: data.filter(d => d.hex === hex)
+        })
+      ]
+    })
   };
 
-  const poiLayer = new MapboxLayer({
+  const poiLayer = new H3HexagonLayer({
     id: 'deckgl-pois',
-    type: H3HexagonLayer,
     data: aggregateHexes(data),
     opacity: 0.4,
     pickable: true,
@@ -95,11 +104,11 @@ function renderLayers(map, data) {
     getHexagon: d => d.hex,
     getFillColor: d => colorScale(d.count),
     extruded: false,
-    stroked: false
+    stroked: false,
+    beforeId: getFirstLabelLayerId(map.getStyle())
   });
 
-  map.addLayer(poiLayer, getFirstLabelLayerId(map.getStyle()));
-  map.addLayer(arcLayer);
+  deckOverlay.setProps({ layers: [poiLayer, arcLayer]})
 
   selectPOI('8a283082aa17fff');
 }
diff --git a/examples/website/safegraph/package.json b/examples/website/safegraph/package.json
index 7a542b50a74..001ccfb5335 100644
--- a/examples/website/safegraph/package.json
+++ b/examples/website/safegraph/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@loaders.gl/csv": "^4.1.0",
     "d3-scale": "^2.0.0",
-    "deck.gl": "^9.0.0-alpha",
+    "deck.gl": "^9.0.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

From 5e2b626f518f8d7c5d7d2bb1e727455fe61f5628 Mon Sep 17 00:00:00 2001
From: Chris Gervang <chris@gervang.com>
Date: Thu, 29 Feb 2024 15:25:58 -0800
Subject: [PATCH 2/5] restore arc layer

Signed-off-by: Chris Gervang <chris@gervang.com>
---
 examples/website/safegraph/app.js       | 26 ++++++-------------------
 examples/website/safegraph/package.json |  2 +-
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/examples/website/safegraph/app.js b/examples/website/safegraph/app.js
index b2e0739fa5e..3003beb5914 100644
--- a/examples/website/safegraph/app.js
+++ b/examples/website/safegraph/app.js
@@ -52,7 +52,7 @@ export function renderToDOM(container, data) {
       }
     });
 
-    renderLayers(map, deckOverlay, data);
+    renderLayers(map, deckOverlay, data, '8a283082aa17fff');
   });
 
   map.addControl(deckOverlay)
@@ -65,15 +65,16 @@ export function renderToDOM(container, data) {
   };
 }
 
-function renderLayers(map, deckOverlay, data) {
+function renderLayers(map, deckOverlay, data, selectedPOI) {
   if (!data) {
     return;
   }
-  let selectedPOICentroid;
+  const [lat, lng] = cellToLatLng(selectedPOI);
+  let selectedPOICentroid = [lng, lat];
 
   const arcLayer = new ArcLayer({
     id: 'deckgl-connections',
-    data: [],
+    data: data.filter(d => d.hex === selectedPOI),
     getSourcePosition: d => selectedPOICentroid,
     getTargetPosition: d => [d.home_lng, d.home_lat],
     getSourceColor: [255, 0, 128],
@@ -81,26 +82,13 @@ function renderLayers(map, deckOverlay, data) {
     getWidth: d => Math.max(2, d.count / 15)
   });
 
-  const selectPOI = hex => {
-    const [lat, lng] = cellToLatLng(hex);
-    selectedPOICentroid = [lng, lat];
-    deckOverlay.setProps({ 
-      layers: [
-        poiLayer, // TODO: This was written with an imperative pattern, which won't work for MapboxOverlay. poiLayer needs to be defined.
-        arcLayer.clone({
-          data: data.filter(d => d.hex === hex)
-        })
-      ]
-    })
-  };
-
   const poiLayer = new H3HexagonLayer({
     id: 'deckgl-pois',
     data: aggregateHexes(data),
     opacity: 0.4,
     pickable: true,
     autoHighlight: true,
-    onClick: ({object}) => object && selectPOI(object.hex),
+    onClick: ({object}) => object && renderLayers(map, deckOverlay, data, object.hex),
     getHexagon: d => d.hex,
     getFillColor: d => colorScale(d.count),
     extruded: false,
@@ -109,8 +97,6 @@ function renderLayers(map, deckOverlay, data) {
   });
 
   deckOverlay.setProps({ layers: [poiLayer, arcLayer]})
-
-  selectPOI('8a283082aa17fff');
 }
 
 function aggregateHexes(data) {
diff --git a/examples/website/safegraph/package.json b/examples/website/safegraph/package.json
index 001ccfb5335..2a60e7fcd73 100644
--- a/examples/website/safegraph/package.json
+++ b/examples/website/safegraph/package.json
@@ -12,7 +12,7 @@
     "@loaders.gl/csv": "^4.1.0",
     "d3-scale": "^2.0.0",
     "deck.gl": "^9.0.0-beta",
-    "mapbox-gl": "^2.0.0"
+    "mapbox-gl": "^3.0.0"
   },
   "devDependencies": {
     "typescript": "^4.6.0",

From a83529f3bc26700d7a71f66a4672dbc9f9737c4d Mon Sep 17 00:00:00 2001
From: Chris Gervang <chris@gervang.com>
Date: Thu, 29 Feb 2024 16:17:21 -0800
Subject: [PATCH 3/5] mapbox css

Signed-off-by: Chris Gervang <chris@gervang.com>
---
 examples/website/safegraph/app.js     | 3 ++-
 examples/website/safegraph/index.html | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/website/safegraph/app.js b/examples/website/safegraph/app.js
index 3003beb5914..531d243af2a 100644
--- a/examples/website/safegraph/app.js
+++ b/examples/website/safegraph/app.js
@@ -1,4 +1,5 @@
 import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
 import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox';
 import {ArcLayer} from '@deck.gl/layers';
 import {H3HexagonLayer} from '@deck.gl/geo-layers';
@@ -96,7 +97,7 @@ function renderLayers(map, deckOverlay, data, selectedPOI) {
     beforeId: getFirstLabelLayerId(map.getStyle())
   });
 
-  deckOverlay.setProps({ layers: [poiLayer, arcLayer]})
+  deckOverlay.setProps({ layers: [poiLayer, arcLayer] })
 }
 
 function aggregateHexes(data) {
diff --git a/examples/website/safegraph/index.html b/examples/website/safegraph/index.html
index 535927f05fd..1e2429880a0 100644
--- a/examples/website/safegraph/index.html
+++ b/examples/website/safegraph/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>mapbox-custom-layer-example</title>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
     <style>
       body {
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

From a660894280961a07a9878804a828b8a55938c586 Mon Sep 17 00:00:00 2001
From: Chris Gervang <chris@gervang.com>
Date: Fri, 1 Mar 2024 16:25:27 -0800
Subject: [PATCH 4/5] rename safegraph folder to mapbox

Signed-off-by: Chris Gervang <chris@gervang.com>
---
 examples/website/{safegraph => mapbox}/README.md      | 0
 examples/website/{safegraph => mapbox}/app.js         | 0
 examples/website/{safegraph => mapbox}/index.html     | 0
 examples/website/{safegraph => mapbox}/package.json   | 0
 examples/website/{safegraph => mapbox}/vite.config.js | 0
 website/src/examples/mapbox.js                        | 4 ++--
 6 files changed, 2 insertions(+), 2 deletions(-)
 rename examples/website/{safegraph => mapbox}/README.md (100%)
 rename examples/website/{safegraph => mapbox}/app.js (100%)
 rename examples/website/{safegraph => mapbox}/index.html (100%)
 rename examples/website/{safegraph => mapbox}/package.json (100%)
 rename examples/website/{safegraph => mapbox}/vite.config.js (100%)

diff --git a/examples/website/safegraph/README.md b/examples/website/mapbox/README.md
similarity index 100%
rename from examples/website/safegraph/README.md
rename to examples/website/mapbox/README.md
diff --git a/examples/website/safegraph/app.js b/examples/website/mapbox/app.js
similarity index 100%
rename from examples/website/safegraph/app.js
rename to examples/website/mapbox/app.js
diff --git a/examples/website/safegraph/index.html b/examples/website/mapbox/index.html
similarity index 100%
rename from examples/website/safegraph/index.html
rename to examples/website/mapbox/index.html
diff --git a/examples/website/safegraph/package.json b/examples/website/mapbox/package.json
similarity index 100%
rename from examples/website/safegraph/package.json
rename to examples/website/mapbox/package.json
diff --git a/examples/website/safegraph/vite.config.js b/examples/website/mapbox/vite.config.js
similarity index 100%
rename from examples/website/safegraph/vite.config.js
rename to examples/website/mapbox/vite.config.js
diff --git a/website/src/examples/mapbox.js b/website/src/examples/mapbox.js
index a05d9e226f8..2cdf2e18139 100644
--- a/website/src/examples/mapbox.js
+++ b/website/src/examples/mapbox.js
@@ -1,13 +1,13 @@
 import React, {Component, createRef} from 'react';
 import {DATA_URI, GITHUB_TREE} from '../constants/defaults';
-import {renderToDOM} from 'website-examples/safegraph/app';
+import {renderToDOM} from 'website-examples/mapbox/app';
 
 import {makeExample} from '../components';
 
 class MapboxDemo extends Component {
   static title = 'Who Is Visiting San Francisco?';
 
-  static code = `${GITHUB_TREE}/examples/website/safegraph`;
+  static code = `${GITHUB_TREE}/examples/website/mapbox`;
 
   static data = {
     url: `${DATA_URI}/safegraph.txt`,

From 2b0bf393b9ce54ef4ad9f839266cf1cc67133359 Mon Sep 17 00:00:00 2001
From: Chris Gervang <chris@gervang.com>
Date: Tue, 5 Mar 2024 21:18:04 -0800
Subject: [PATCH 5/5] chore(examples) use react in mapbox website example

Signed-off-by: Chris Gervang <chris@gervang.com>
---
 examples/website/mapbox/app.js       | 131 -----------------------
 examples/website/mapbox/app.jsx      | 150 +++++++++++++++++++++++++++
 examples/website/mapbox/index.html   |   4 +-
 examples/website/mapbox/package.json |   5 +-
 4 files changed, 156 insertions(+), 134 deletions(-)
 delete mode 100644 examples/website/mapbox/app.js
 create mode 100644 examples/website/mapbox/app.jsx

diff --git a/examples/website/mapbox/app.js b/examples/website/mapbox/app.js
deleted file mode 100644
index 531d243af2a..00000000000
--- a/examples/website/mapbox/app.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox';
-import {ArcLayer} from '@deck.gl/layers';
-import {H3HexagonLayer} from '@deck.gl/geo-layers';
-import {scaleLog} from 'd3-scale';
-import {cellToLatLng} from 'h3-js';
-
-import {load} from '@loaders.gl/core';
-import {CSVLoader} from '@loaders.gl/csv';
-
-// Set your mapbox token here
-mapboxgl.accessToken = process.env.MapboxAccessToken; // eslint-disable-line
-
-const colorScale = scaleLog()
-  .domain([10, 100, 1000, 10000])
-  .range([
-    [255, 255, 178],
-    [254, 204, 92],
-    [253, 141, 60],
-    [227, 26, 28]
-  ]);
-
-export function renderToDOM(container, data) {
-  const map = new mapboxgl.Map({
-    container,
-    useWebGL2: true,
-    style: 'mapbox://styles/mapbox/light-v9',
-    antialias: true,
-    center: [-122.4034, 37.7845],
-    zoom: 15.5,
-    bearing: 20,
-    pitch: 60
-  });
-
-  const deckOverlay = new DeckOverlay({
-    interleaved: true
-  })
-
-  map.addControl(new mapboxgl.NavigationControl(), 'top-left');
-
-  map.on('load', () => {
-    map.addLayer({
-      id: '3d-buildings',
-      source: 'composite',
-      'source-layer': 'building',
-      filter: ['==', 'extrude', 'true'],
-      type: 'fill-extrusion',
-      minzoom: 14,
-      paint: {
-        'fill-extrusion-color': '#ccc',
-        'fill-extrusion-height': ['get', 'height']
-      }
-    });
-
-    renderLayers(map, deckOverlay, data, '8a283082aa17fff');
-  });
-
-  map.addControl(deckOverlay)
-
-  return {
-    update: newData => renderLayers(map, deckOverlay, newData),
-    remove: () => {
-      map.remove();
-    }
-  };
-}
-
-function renderLayers(map, deckOverlay, data, selectedPOI) {
-  if (!data) {
-    return;
-  }
-  const [lat, lng] = cellToLatLng(selectedPOI);
-  let selectedPOICentroid = [lng, lat];
-
-  const arcLayer = new ArcLayer({
-    id: 'deckgl-connections',
-    data: data.filter(d => d.hex === selectedPOI),
-    getSourcePosition: d => selectedPOICentroid,
-    getTargetPosition: d => [d.home_lng, d.home_lat],
-    getSourceColor: [255, 0, 128],
-    getTargetColor: [0, 200, 255],
-    getWidth: d => Math.max(2, d.count / 15)
-  });
-
-  const poiLayer = new H3HexagonLayer({
-    id: 'deckgl-pois',
-    data: aggregateHexes(data),
-    opacity: 0.4,
-    pickable: true,
-    autoHighlight: true,
-    onClick: ({object}) => object && renderLayers(map, deckOverlay, data, object.hex),
-    getHexagon: d => d.hex,
-    getFillColor: d => colorScale(d.count),
-    extruded: false,
-    stroked: false,
-    beforeId: getFirstLabelLayerId(map.getStyle())
-  });
-
-  deckOverlay.setProps({ layers: [poiLayer, arcLayer] })
-}
-
-function aggregateHexes(data) {
-  const result = {};
-  for (const object of data) {
-    if (!result[object.hex]) {
-      result[object.hex] = {hex: object.hex, count: 0};
-    }
-    result[object.hex].count += object.count;
-  }
-  return Object.values(result);
-}
-
-function getFirstLabelLayerId(style) {
-  const layers = style.layers;
-  // Find the index of the first symbol (i.e. label) layer in the map style
-  for (let i = 0; i < layers.length; i++) {
-    if (layers[i].type === 'symbol') {
-      return layers[i].id;
-    }
-  }
-  return undefined;
-}
-
-export async function loadAndRender(container) {
-  const data = await load(
-    'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/safegraph/sf-pois.csv',
-    CSVLoader
-  );
-  renderToDOM(container, data.data);
-}
diff --git a/examples/website/mapbox/app.jsx b/examples/website/mapbox/app.jsx
new file mode 100644
index 00000000000..e4556f5c2e3
--- /dev/null
+++ b/examples/website/mapbox/app.jsx
@@ -0,0 +1,150 @@
+import React, {useCallback, useState, useRef, useMemo} from 'react';
+import {createRoot} from 'react-dom/client';
+import {MapboxOverlay} from '@deck.gl/mapbox';
+import {ArcLayer} from '@deck.gl/layers';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
+import {scaleLog} from 'd3-scale';
+import {cellToLatLng} from 'h3-js';
+import {load} from '@loaders.gl/core';
+import {CSVLoader} from '@loaders.gl/csv';
+import {Map, NavigationControl, useControl, Layer} from 'react-map-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const DATA_URL =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/safegraph/sf-pois.csv';
+
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+const colorScale = scaleLog()
+  .domain([10, 100, 1000, 10000])
+  .range([
+    [255, 255, 178],
+    [254, 204, 92],
+    [253, 141, 60],
+    [227, 26, 28]
+  ]);
+
+const buildings3DLayer = {
+  id: '3d-buildings',
+  source: 'composite',
+  'source-layer': 'building',
+  filter: ['==', 'extrude', 'true'],
+  type: 'fill-extrusion',
+  minzoom: 14,
+  paint: {
+    'fill-extrusion-color': '#ccc',
+    'fill-extrusion-height': ['get', 'height']
+  }
+};
+
+function DeckGLOverlay(props) {
+  const overlay = useControl(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
+export default function App({data}) {
+  const [selectedPOI, setSelectedPOI] = useState('8a283082aa17fff');
+  const [firstLabelLayerId, setFirstLabelLayerId] = useState();
+  const mapRef = useRef();
+
+  const onMapLoad = useCallback(() => {
+    setFirstLabelLayerId(getFirstLabelLayerId(mapRef.current.getStyle()));
+  }, []);
+
+  const selectedPOICentroid = useMemo(() => {
+    const [lat, lng] = cellToLatLng(selectedPOI);
+    return [lng, lat];
+  }, [selectedPOI]);
+
+  const arcs = useMemo(() => filterArcs(data, selectedPOI), [data, selectedPOI]);
+
+  const hexes = useMemo(() => aggregateHexes(data), [data]);
+
+  const arcLayer = new ArcLayer({
+    id: 'deckgl-connections',
+    data: arcs,
+    getSourcePosition: d => selectedPOICentroid,
+    getTargetPosition: d => [d.home_lng, d.home_lat],
+    getSourceColor: [255, 0, 128],
+    getTargetColor: [0, 200, 255],
+    getWidth: d => Math.max(2, d.count / 15)
+  });
+
+  const poiLayer = new H3HexagonLayer({
+    id: 'deckgl-pois',
+    data: hexes,
+    opacity: 0.4,
+    pickable: true,
+    autoHighlight: true,
+    onClick: ({object}) => object && setSelectedPOI(object.hex),
+    getHexagon: d => d.hex,
+    getFillColor: d => colorScale(d.count),
+    extruded: false,
+    stroked: false,
+    beforeId: firstLabelLayerId
+  });
+
+  return (
+    <Map
+      ref={mapRef}
+      mapboxAccessToken={MAPBOX_TOKEN}
+      mapStyle="mapbox://styles/mapbox/light-v9"
+      antialias={true}
+      initialViewState={{
+        longitude: -122.4034,
+        latitude: 37.7845,
+        zoom: 15.5,
+        bearing: 20,
+        pitch: 60
+      }}
+      onLoad={onMapLoad}
+    >
+      <DeckGLOverlay interleaved={true} layers={[poiLayer, arcLayer]} />
+      <NavigationControl />
+      <Layer {...buildings3DLayer} />
+    </Map>
+  );
+}
+
+function filterArcs(data, selectedPOI) {
+  if (!data) {
+    return null;
+  }
+  return data.filter(d => d.hex === selectedPOI);
+}
+
+function aggregateHexes(data) {
+  if (!data) {
+    return null;
+  }
+  const result = {};
+  for (const object of data) {
+    if (!result[object.hex]) {
+      result[object.hex] = {hex: object.hex, count: 0};
+    }
+    result[object.hex].count += object.count;
+  }
+  return Object.values(result);
+}
+
+function getFirstLabelLayerId(style) {
+  const layers = style.layers;
+  // Find the index of the first symbol (i.e. label) layer in the map style
+  for (let i = 0; i < layers.length; i++) {
+    if (layers[i].type === 'symbol') {
+      return layers[i].id;
+    }
+  }
+  return undefined;
+}
+
+export function renderToDOM(container) {
+  const root = createRoot(container);
+  root.render(<App />);
+
+  load(DATA_URL, CSVLoader).then(data => {
+    root.render(<App data={data.data} />);
+  });
+}
diff --git a/examples/website/mapbox/index.html b/examples/website/mapbox/index.html
index 1e2429880a0..54527a0ace0 100644
--- a/examples/website/mapbox/index.html
+++ b/examples/website/mapbox/index.html
@@ -22,7 +22,7 @@
     <div id="app"></div>
   </body>
   <script type="module">
-    import {loadAndRender} from './app.js';
-    loadAndRender(document.getElementById('app'));
+    import {renderToDOM} from './app.jsx';
+    renderToDOM(document.getElementById('app'));
   </script>
 </html>
diff --git a/examples/website/mapbox/package.json b/examples/website/mapbox/package.json
index 2a60e7fcd73..55a9b6ece2c 100644
--- a/examples/website/mapbox/package.json
+++ b/examples/website/mapbox/package.json
@@ -12,7 +12,10 @@
     "@loaders.gl/csv": "^4.1.0",
     "d3-scale": "^2.0.0",
     "deck.gl": "^9.0.0-beta",
-    "mapbox-gl": "^3.0.0"
+    "mapbox-gl": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-map-gl": "^7.0.0"
   },
   "devDependencies": {
     "typescript": "^4.6.0",