Merge pull request #30 from developmentseed/add/scale-area

Display scale and area

Author: vgeorge

web-vite/package.json

@@ -10,6 +10,8 @@
     "deploy": "vite build && surge dist https://osm-tardis.surge.sh"
   },
   "dependencies": {
+    "@turf/area": "^6.5.0",
+    "@turf/bbox-polygon": "^6.5.0",
     "flatgeobuf": "^3.26.2",
     "lodash.get": "^4.4.2",
     "maplibre-gl": "^3.3.1",

web-vite/src/app/index.tsx

@@ -10,15 +10,15 @@ import { CartoSlider } from "./cartoslider";
 export function App() {
   const [appState, dispatchAppState] = useAppReducer();
 
-  const { mapStatus, timestamps, currentTimestamp } = appState;
+  const { mapStatus, timestamps, currentTimestamp, formattedArea } = appState;
 
   const isLoading = mapStatus === MapStatus.LOADING;
 
   return (
     <Layout>
       <Header />
       <Panel>
-        <PanelInputs />
+        <PanelInputs formattedArea={formattedArea} />
         <Stats
           stats={appState.stats}
           currentTimestamp={appState.currentTimestamp}

web-vite/src/app/inputs.tsx

@@ -1,12 +1,17 @@
-export function PanelInputs() {
+interface PanelInputsProps {
+  formattedArea: string;
+}
+
+export function PanelInputs(props: PanelInputsProps) {
+  const { formattedArea } = props;
 
   return (
     <article>
       <section>
         <h3>Area of Interest (AOI)</h3>
         <small>Zoom and pan the map to set the AOI for stats </small>
         <p>
-          Currently selected: <strong>{2333}m&sup2;</strong>
+          Currently selected: <strong>{formattedArea || "-"} km&sup2;</strong>
         </p>
       </section>
       <section>

web-vite/src/app/map/index.tsx

@@ -68,6 +68,11 @@ export function Map(props: MapProps) {
       maxZoom: 18,
       minZoom: 0,
     });
+    let scale = new MapLibreGL.ScaleControl({
+      maxWidth: 160,
+      unit: 'metric'
+    });
+    map.addControl(scale);
 
     map.on("load", () => {
       map.addSource("data", {

web-vite/src/app/reducer/index.ts

@@ -1,6 +1,8 @@
 import { useReducerAsync } from "use-reducer-async";
 import logReducer from "./log.ts";
 import { calculateStats, getFgbData } from "../map/utils.ts";
+import tArea from "@turf/area";
+import tBboxPolygon from "@turf/bbox-polygon";
 
 export enum MapStatus {
   IDLE = "IDLE",
@@ -92,8 +94,18 @@ function appReducer(state: AppState, action: AppAction) {
         currentTimestamp
       );
       const stats = calculateStats(currentTimestampGeojson);
+
+      const bounds = state.map.getBounds().toArray();
+      const [[minX, minY], [maxX, maxY]] = bounds;
+      const poly = tBboxPolygon([minX, minY, maxX, maxY]);
+      const area = tArea(poly);
+      const formattedArea = new Intl.NumberFormat().format(
+        (area / 1e6).toFixed(2)
+      );
+
       return {
         ...state,
+        formattedArea,
         stats,
         geojson,
         timestamps,

web-vite/yarn.lock

@@ -504,6 +504,33 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@turf/area@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/area/-/area-6.5.0.tgz#1d0d7aee01d8a4a3d4c91663ed35cc615f36ad56"
+  integrity sha512-xCZdiuojokLbQ+29qR6qoMD89hv+JAgWjLrwSEWL+3JV8IXKeNFl6XkEJz9HGkVpnXvQKJoRz4/liT+8ZZ5Jyg==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+    "@turf/meta" "^6.5.0"
+
+"@turf/bbox-polygon@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/bbox-polygon/-/bbox-polygon-6.5.0.tgz#f18128b012eedfa860a521d8f2b3779cc0801032"
+  integrity sha512-+/r0NyL1lOG3zKZmmf6L8ommU07HliP4dgYToMoTxqzsWzyLjaj/OzgQ8rBmv703WJX+aS6yCmLuIhYqyufyuw==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
+"@turf/helpers@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
+  integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==
+
+"@turf/meta@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-6.5.0.tgz#b725c3653c9f432133eaa04d3421f7e51e0418ca"
+  integrity sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
 "@types/geojson@*", "@types/geojson@^7946.0.10":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"