Varioous web tweaks to make things easier to see/use

a-b-street · Dec 11, 2023 · b38a6fa · b38a6fa
1 parent 3b88d29
commit b38a6fa
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -21,7 +21,9 @@
   let route_b = null;
   let route_gj = null;
   let route_err = "";
+  let opacity = 100;
   let showSeverances = true;
+  let showBasemap = false;
 
   onMount(async () => {
     await init();
@@ -116,12 +118,20 @@
         ["Severance", "orange"],
       ]}
     />
-
-    {#if mode == "route"}
+    <div>
       <label>
         <input type="checkbox" bind:checked={showSeverances} />
         Show severances
       </label>
+    </div>
+    <div>
+      <label>
+        Network opacity:
+        <input type="range" min="0" max="100" bind:value={opacity} />
+      </label>
+    </div>
+
+    {#if mode == "route"}
       {#if route_err}
         <p>{route_err}</p>
       {/if}
@@ -131,24 +141,33 @@
     {:else if mode == "score"}
       <SequentialLegend {colorScale} {limits} />
     {/if}
+
+    <hr />
+
+    <label>
+      <input type="checkbox" bind:checked={showBasemap} />
+      Show basemap
+    </label>
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
     <MapLibre
-      style={{
-        version: 8,
-        sources: {},
-        layers: [],
-      }}
+      style={showBasemap
+        ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
+        : {
+            version: 8,
+            sources: {},
+            layers: [],
+          }}
       standardControls
       hash
       bind:map
     >
       {#if model}
         {#if mode == "route"}
-          <NetworkLayer {model} {showSeverances} />
-          <RouteLayer bind:route_a bind:route_b {route_gj} />
+          <NetworkLayer {model} {showSeverances} {opacity} />
+          <RouteLayer bind:route_a bind:route_b {route_gj} {map} />
         {:else if mode == "score"}
-          <ScoreLayer {model} />
+          <ScoreLayer {model} {showSeverances} {opacity} />
         {/if}
       {/if}
     </MapLibre>

diff --git a/web/src/NetworkLayer.svelte b/web/src/NetworkLayer.svelte
@@ -5,6 +5,7 @@
   export let model;
   // TODO Use filter expressions?
   export let showSeverances: boolean;
+  export let opacity: number;
 </script>
 
 <GeoJSON data={JSON.parse(model.render())}>
@@ -25,13 +26,13 @@
         "yellow"
       ),
       "line-opacity": showSeverances
-        ? 1.0
+        ? opacity / 100
         : constructMatchExpression(
             ["get", "kind"],
             {
               Severance: 0.0,
             },
-            1.0
+            opacity / 100.0
           ),
     }}
     on:click={(e) => window.open(e.detail.features[0].properties.way, "_blank")}

diff --git a/web/src/RouteLayer.svelte b/web/src/RouteLayer.svelte
@@ -1,9 +1,22 @@
 <script lang="ts">
+  import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Marker } from "svelte-maplibre";
 
   export let route_a;
   export let route_b;
   export let route_gj;
+  export let map;
+
+  onMount(() => {
+    map?.on("contextmenu", onRightClick);
+  });
+  onDestroy(() => {
+    map?.off("contextmenu", onRightClick);
+  });
+  function onRightClick(e) {
+    // Move the first marker, for convenience
+    route_a = e.lngLat;
+  }
 </script>
 
 {#if route_a}

diff --git a/web/src/ScoreLayer.svelte b/web/src/ScoreLayer.svelte
@@ -5,6 +5,8 @@
   import RouteLayer from "./RouteLayer.svelte";
 
   export let model;
+  export let showSeverances: boolean;
+  export let opacity: number;
 
   let route_gj = null;
 
@@ -40,14 +42,23 @@
         },
         "yellow"
       ),
+      "line-opacity": showSeverances
+        ? opacity / 100.0
+        : constructMatchExpression(
+            ["get", "kind"],
+            {
+              Severance: 0.0,
+            },
+            opacity / 100.0
+          ),
     }}
   />
 </GeoJSON>
 <GeoJSON data={JSON.parse(model.makeHeatmap())}>
   <LineLayer
     id="scores"
     paint={{
-      "line-width": 2,
+      "line-width": 8,
       "line-color": makeColorRamp(["get", "score"], limits, colorScale),
     }}
     on:click={showRoute}