Map downloads now work (#12)

* Make the download button and wire it up to a method handler.

* Fix issue where Mapbox layer was being used instead of maplibre.

* Fix #10 by adding a download button that honors the current bbox and downloads everything.

---------

Co-authored-by: Benjamin Clark <clarkben@meta.com>

site/package.json

@@ -10,10 +10,10 @@
     "aws_deploy": "python3 scripts/deploy.py",
     "preview": "vite preview"
   },
-  "dependencies": {
+  "dependencies": {    
     "@geoarrow/geoarrow-wasm": "~0.2.0-beta.3",
     "apache-arrow": "^15.0.2",
-    "maplibre-gl": "^4.1.0",
+    "maplibre-gl": "^4.1.3",
     "pmtiles": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

site/src/App.jsx

@@ -2,14 +2,14 @@ import './App.css';
 import Header from './Header';
 import Footer from './Footer';
 import Map from './Map';
-
+import {MapProvider} from 'react-map-gl/maplibre';
 function App() {
   return (
-    <>
+    <MapProvider>
       <Header />
       <Map/>
       <Footer />
-    </>
+    </MapProvider>
   );
 }
 

site/src/DownloadButton.jsx

@@ -0,0 +1,73 @@
+import { useMap } from "react-map-gl/maplibre";
+import { useEffect } from "react";
+import { DownloadCatalog } from "./DownloadCatalog.js"
+import { ParquetDataset, set_panic_hook, writeGeoParquet } from "@geoarrow/geoarrow-wasm/esm/index.js"
+
+function DownloadButton() {
+  const { myMap } = useMap();
+
+  useEffect(() => {
+    if (myMap) {
+      myMap.getBounds();
+    }
+  }, [myMap])
+
+
+  const handleDownloadClick = async () => {
+
+    //Get current map dimensions and convert to bbox
+    const bounds = myMap.getBounds();
+    let bbox = [
+      bounds.getWest(),  //minx
+      bounds.getSouth(), //miny
+      bounds.getEast(),  //maxx
+      bounds.getNorth()  //maxy
+    ];
+
+    console.log(bounds);
+
+    //Send those to the download engine
+    const minxPath = ["bbox", "minx"];
+    const minyPath = ["bbox", "miny"];
+    const maxxPath = ["bbox", "maxx"];
+    const maxyPath = ["bbox", "maxy"];
+
+    const readOptions = {
+      bbox: bbox,
+      bboxPaths: {
+        minxPath,
+        minyPath,
+        maxxPath,
+        maxyPath,
+      },
+    };
+
+    let parquetDataset = await new ParquetDataset(DownloadCatalog);
+    const wasmTable = await parquetDataset.read(readOptions);
+
+    set_panic_hook();
+    //Create a blob
+    const binaryDataForDownload = writeGeoParquet(wasmTable);
+
+
+    let blerb = new Blob([binaryDataForDownload], {
+      type: "application/octet-stream"
+    });
+
+    //Download the blob
+    window.open(URL.createObjectURL(blerb));
+  };
+
+  return (
+    <>
+      <button id="downloadButton" onClick={handleDownloadClick}>
+        Download Visible
+      </button>
+    </>
+  );
+}
+
+// DownloadButton.propTypes = {
+//   onClick: PropTypes.func.isRequired
+// }
+export default DownloadButton;