add map

package.json

@@ -20,6 +20,7 @@
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "deck.gl": "^9.1.1",
+    "hyparquet": "^1.8.4",
     "maplibre-gl": "^5.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/App2.tsx

@@ -0,0 +1,84 @@
+import { scaleLinear } from 'd3-scale';
+import { interpolateViridis } from 'd3-scale-chromatic';
+import { DeckGL, GridCellLayer } from 'deck.gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import Map from 'react-map-gl/maplibre';
+
+import { asyncBufferFromUrl, parquetRead } from 'hyparquet';
+import { useState } from 'react';
+
+let data: any
+await parquetRead({
+  file: await asyncBufferFromUrl({ url: "./f.parquet" }),
+  onComplete: d => data = d
+})
+
+const grid = data.map(d => {
+  return {
+    id: d[0],
+    x: d[1],
+    y: d[2],
+  }
+})
+
+const colorScale = scaleLinear<string, string>().domain([0, 10]).range([interpolateViridis(0), interpolateViridis(1)]);
+
+function App2() {
+  const [clickedSquare, setClickedSquare] = useState(null);
+
+  const clickedData = clickedSquare && data.find(d => d[0] === clickedSquare.object.id);
+  const clickedGrid = clickedSquare && clickedData[3].map((element: any, i: number) => {
+    return {
+      ...grid.find(d => d.id === element),
+      value: clickedData[4][i]
+    }
+  })
+
+
+  const layers = [
+    new GridCellLayer({
+      id: 'deckgl-grid',
+      //@ts-ignore
+      data: grid,
+      getPosition: d => [d.x, d.y],
+      getFillColor: [100, 100, 100, 100],
+      //@ts-ignore
+      cellSize: 505,
+      extruded: false,
+      pickable: true,
+      autoHighlight: true,
+      highlightColor: [0, 255, 0],
+      onClick: info => setClickedSquare(info)
+    }),
+    new GridCellLayer({
+      id: 'clicked-grid',
+      //@ts-ignore
+      data: clickedGrid,
+      getPosition: d => [d.x, d.y],
+      //@ts-ignore
+      getFillColor: d => colorScale(Number(d.value)).slice(4, -1).split(", ").map(Number),
+      cellSize: 505,
+      extruded: false
+    }),
+  ];
+
+  return (
+    <>
+      <DeckGL
+        initialViewState={{
+          longitude: 37.028,
+          latitude: 55.778,
+          zoom: 7
+        }}
+        controller
+        layers={layers}
+        getCursor={() => "crosshair"}
+      >
+        <Map mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" hash={true} />
+      </DeckGL>
+    </>
+
+  );
+}
+
+export default App2

src/main.tsx

@@ -3,14 +3,19 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import App2 from './App2.tsx'
 import './index.css'
 
 const queryClient = new QueryClient()
 
+const currentUrl = new URL(window.location.href)
+
+console.log(currentUrl.searchParams.get('page'))
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      {currentUrl.searchParams.get('page') == '2' ? <App2 /> : <App />}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </StrictMode>,

yarn.lock

@@ -2933,6 +2933,11 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hyparquet@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/hyparquet/-/hyparquet-1.8.4.tgz#073504baed10d10a8a6b44094765a5e29c57a89d"
+  integrity sha512-D/7xIqcapCBAjloymZEPKFXU7w88GcJ5ApjwoOV9DoGSg/t529Z9TdO3zBdMuv/OBehgMdy5vhybtjLplKSa+w==
+
 iconv-lite@0.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"