Use a modern lib to draw freehand polygons for import

Urban-Analytics-Technology-Platform · Mar 17, 2024 · c37a31d · c37a31d
1 parent 6e4f0f6
commit c37a31d
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 155 deletions.
diff --git a/viewer/package-lock.json b/viewer/package-lock.json
diff --git a/viewer/package.json b/viewer/package.json
@@ -27,9 +27,9 @@
     "vite-plugin-wasm-pack": "0.1.11"
   },
   "dependencies": {
-    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "chart.js": "^4.4.2",
     "chartjs-plugin-dragdata": "^2.2.5",
+    "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
     "pmtiles": "^3.0.4",
     "svelte-maplibre": "^0.8.1"
   }

diff --git a/viewer/src/EdgeCostApp.svelte b/viewer/src/EdgeCostApp.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { PolygonToolLayer } from "maplibre-draw-polygon";
   import type { FeatureCollection } from "geojson";
   import initLts from "lts";
   import type {
@@ -314,6 +315,7 @@
           </Popup>
         </LineLayer>
       </GeoJSON>
+      <PolygonToolLayer />
     </MapLibre>
   </div>
 </Layout>

diff --git a/viewer/src/InteractiveApp.svelte b/viewer/src/InteractiveApp.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { PolygonToolLayer } from "maplibre-draw-polygon";
   import type { FeatureCollection } from "geojson";
   import initLts from "lts";
   import type { Map as MapType } from "maplibre-gl";
@@ -157,6 +158,7 @@
       <GeoJSON data={gj}>
         <Layers {controls} />
       </GeoJSON>
+      <PolygonToolLayer />
     </MapLibre>
   </div>
 </Layout>