Add a streetview plugin

(It's clunky; clicks to the other layers are not intercepted)

web/src/common/StreetView.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { MapMouseEvent } from "maplibre-gl";
+  import { onDestroy } from "svelte";
+  import { map } from "./store";
+
+  export let enabled = false;
+  let source = "google";
+
+  function on() {
+    $map!.on("click", onClick);
+    $map!.getCanvas().style.cursor = "zoom-in";
+  }
+  function off() {
+    $map!.off("click", onClick);
+    $map!.getCanvas().style.cursor = "auto";
+  }
+  onDestroy(off);
+
+  $: if (enabled) {
+    on();
+  } else {
+    off();
+  }
+
+  function onClick(e: MapMouseEvent) {
+    let lon = e.lngLat.lng;
+    let lat = e.lngLat.lat;
+    if (source == "google") {
+      window.open(
+        `http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0`,
+        "_blank",
+      );
+    } else if (source == "bing") {
+      window.open(
+        `https://www.bing.com/maps?cp=${lat}~${lon}&style=x`,
+        "_blank",
+      );
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (enabled && e.key == "Escape") {
+      enabled = false;
+    }
+  }
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<label>
+  <input type="checkbox" bind:checked={enabled} />
+  StreetView
+</label>
+{#if enabled}
+  <div style="background: grey">
+    <label>
+      <input type="radio" bind:group={source} value="google" />
+      Google StreetView
+    </label>
+    <label>
+      <input type="radio" bind:group={source} value="bing" />
+      Bing Streetside
+    </label>
+  </div>
+{/if}

web/src/common/index.ts

@@ -2,5 +2,6 @@ export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Map } from "./Map.svelte";
+export { default as StreetView } from "./StreetView.svelte";
 export { default as ThemePicker } from "./ThemePicker.svelte";
 export * from "./store";

web/src/lane-editor/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { GeoJSON, FillLayer, type LayerClickInfo } from "svelte-maplibre";
   import { emptyGeojson, layerId } from "../common/utils";
-  import { network } from "../common";
+  import { network, StreetView } from "../common";
   import init from "osm2streets-js";
   import { onMount } from "svelte";
   import AppSwitcher from "../AppSwitcher.svelte";
@@ -68,6 +68,8 @@
         <li>Don't edit a way that's partly clipped</li>
       </ul>
     </div>
+
+    <StreetView />
   </div>
   <div slot="main">
     <Map>

web/src/street-explorer/App.svelte

@@ -3,7 +3,14 @@
   import init from "osm2streets-js";
   import { onMount } from "svelte";
   import AppSwitcher from "../AppSwitcher.svelte";
-  import { ThemePicker, BasemapPicker, Geocoder, Layout, Map } from "../common";
+  import {
+    StreetView,
+    ThemePicker,
+    BasemapPicker,
+    Geocoder,
+    Layout,
+    Map,
+  } from "../common";
   import ImportControls from "../common/import/ImportControls.svelte";
   import RenderBoundary from "../common/layers/RenderBoundary.svelte";
   import RenderIntersectionMarkings from "../common/layers/RenderIntersectionMarkings.svelte";
@@ -86,6 +93,7 @@
 
         <BasemapPicker />
         <ThemePicker />
+        <StreetView />
       </div>
       <Geocoder />
     </Map>