Let the user add a fixed image to the map and move/scale/rotate it. No

saving or nice controls yet.

src/lib/draw/Toolbox.svelte

@@ -52,6 +52,9 @@
       Split route
     </SecondaryButton>
   {/if}
+  <SecondaryButton on:click={() => mode.set({ mode: "new-image" })}>
+    New image
+  </SecondaryButton>
   <SecondaryButton on:click={() => mode.set({ mode: "streetview" })}>
     <img src={streetViewIcon} alt="StreetView" />
     StreetView

src/lib/draw/image/ImageLayer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // TODO This should just be part of InterventionLayer? treat it like a
+  // feature? could even base64 encode the bytes to embed it, at risk of
+  // blowing up local storage?
+  import { map } from "stores";
+  import { Marker } from "svelte-maplibre";
+  import imgUrl from "../../../../assets/warning.svg?url";
+  import { opacity, rotate, scale } from "./stores";
+
+  let lngLat = $map.getCenter().toArray();
+
+  $: style = `transform: rotate(${$rotate}deg); opacity: ${$opacity / 100.0}`;
+</script>
+
+<Marker bind:lngLat draggable>
+  <img src={imgUrl} alt="Georeferenced image" width={$scale * 50} {style} />
+</Marker>

src/lib/draw/image/ImageMode.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { SecondaryButton } from "lib/govuk";
+  import { mode } from "stores";
+  import { opacity, rotate, scale } from "./stores";
+</script>
+
+<SecondaryButton on:click={() => mode.set({ mode: "list" })}>
+  Cancel
+</SecondaryButton>
+
+<div>
+  <label>
+    Scale
+    <input type="number" min="0.1" step="0.1" bind:value={$scale} />
+  </label>
+</div>
+<div>
+  <label>
+    Rotation (degrees)
+    <input type="number" bind:value={$rotate} />
+  </label>
+</div>
+
+<div>
+  <label>
+    <input type="range" min="0" max="100" bind:value={$opacity} />
+    Opacity
+  </label>
+</div>

src/lib/draw/image/stores.ts

@@ -0,0 +1,7 @@
+import { writable, type Writable } from "svelte/store";
+
+// Use this to share between two components, nested under the sidebar and map
+
+export const scale: Writable<number> = writable(1.0);
+export const rotate: Writable<number> = writable(0.0);
+export const opacity: Writable<number> = writable(100);

src/lib/sidebar/LeftSidebar.svelte

@@ -5,6 +5,7 @@
   import { onDestroy } from "svelte";
   import type { Schema } from "types";
   import EditGeometryMode from "../draw/EditGeometryMode.svelte";
+  import ImageMode from "../draw/image/ImageMode.svelte";
   import { PointTool } from "../draw/point/point_tool";
   import PointMode from "../draw/point/PointMode.svelte";
   import { PolygonTool } from "../draw/polygon/polygon_tool";
@@ -78,6 +79,9 @@ toolbox, but that gets created and destroyed frequently. -->
       to cancel
     </li>
   </ul>
+{:else if $mode.mode == "new-image"}
+  <h2>New image</h2>
+  <ImageMode />
 {:else if $mode.mode == "streetview"}
   <h2>StreetView</h2>
   <StreetViewMode />

src/pages/SketchSchemes.svelte

@@ -12,6 +12,7 @@
     MapLibreMap,
     ZoomOutMap,
   } from "lib/common";
+  import ImageLayer from "lib/draw/image/ImageLayer.svelte";
   import InterventionLayer from "lib/draw/InterventionLayer.svelte";
   import SplitRouteMode from "lib/draw/route/SplitRouteMode.svelte";
   import Toolbox from "lib/draw/Toolbox.svelte";
@@ -115,6 +116,8 @@
         <Toolbox {schema} />
       {:else if $mode.mode == "split-route"}
         <SplitRouteMode />
+      {:else if $mode.mode == "new-image"}
+        <ImageLayer />
       {/if}
     </MapLibreMap>
   </div>

src/types.ts

@@ -146,4 +146,5 @@ export type Mode =
   | { mode: "new-snapped-polygon" }
   | { mode: "new-route" }
   | { mode: "split-route" }
+  | { mode: "new-image" }
   | { mode: "streetview" };