Render filter as icons. #10

Author: dabreegster

web/public/filters/bus_gate.svg

@@ -85,6 +85,12 @@
         // @ts-ignore ErrorEvent isn't exported
         console.log(e.detail.error);
       }}
+      images={[
+        { id: "walk_cycle_only", url: "/filters/walk_cycle_only_icon.gif" },
+        { id: "no_entry", url: "/filters/no_entry_icon.gif" },
+        { id: "bus_gate", url: "/filters/bus_gate_icon.gif" },
+        { id: "school_street", url: "/filters/school_street_icon.gif" },
+      ]}
     >
       <div bind:this={mapDiv} />
       {#if $mode.mode == "title"}

web/public/filters/bus_gate_icon.gif

@@ -1,16 +1,17 @@
 <script lang="ts">
-  import { CircleLayer, GeoJSON } from "svelte-maplibre";
+  import { GeoJSON, SymbolLayer } from "svelte-maplibre";
   import { app, mutationCounter } from "./stores";
 
   // TODO Runes would make this so nicer. The > 0 part is a hack...
   $: gj = $mutationCounter > 0 ? JSON.parse($app!.renderModalFilters()) : null;
 </script>
 
 <GeoJSON data={gj}>
-  <CircleLayer
-    paint={{
-      "circle-radius": 15,
-      "circle-color": "black",
+  <SymbolLayer
+    layout={{
+      "icon-image": ["get", "filter_kind"],
+      "icon-allow-overlap": true,
+      "icon-size": 0.1,
     }}
   />
 </GeoJSON>

web/public/filters/no_entry.svg

@@ -4,7 +4,7 @@
   import { showBasemap } from "./stores";
 
   export let gjInput: FeatureCollection;
-  // When disabled, can't click lines or circles, no slots, no hoverCursor
+  // When disabled, can't click lines or filters, no slots, no hoverCursor
   export let interactive = true;
   export let onClickLine = (f: Feature) => {};
 

web/public/filters/no_entry_icon.gif

@@ -40,7 +40,11 @@
               style="width: 100%"
               disabled={filterType == name}
               on:click={() => (filterType = name)}
-              ><img src={`/filters/${name}.svg`} alt={label} />{label}</button
+              ><img
+                src={`/filters/${name}_icon.gif`}
+                width="80"
+                alt={label}
+              /><br/>{label}</button
             >
           </div>
         {/each}

web/public/filters/school_street.svg

@@ -7,7 +7,7 @@
   } from "geojson";
   import type { MapMouseEvent } from "maplibre-gl";
   import { onDestroy } from "svelte";
-  import { CircleLayer, GeoJSON, Popup } from "svelte-maplibre";
+  import { GeoJSON, Popup, SymbolLayer } from "svelte-maplibre";
   import { notNull } from "../common";
   import ManageSavefiles from "../ManageSavefiles.svelte";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
@@ -65,10 +65,8 @@
 
   function deleteFilter(e) {
     let f = e.detail.features[0];
-    if (f.properties!.kind == "modal_filter") {
-      $app!.deleteModalFilter(f.properties!.road);
-      $mutationCounter++;
-    }
+    $app!.deleteModalFilter(f.properties!.road);
+    $mutationCounter++;
   }
 
   function onKeyDown(e: KeyboardEvent) {
@@ -222,15 +220,16 @@
       </div>
     </RenderNeighbourhood>
     <GeoJSON data={modalFilterGj} generateId>
-      <CircleLayer
-        paint={{
-          "circle-radius": 15,
-          "circle-color": "black",
+      <SymbolLayer
+        layout={{
+          "icon-image": ["get", "filter_kind"],
+          "icon-allow-overlap": true,
+          "icon-size": 0.1,
         }}
         on:click={deleteFilter}
       >
         <Popup openOn="hover">Click to delete</Popup>
-      </CircleLayer>
+      </SymbolLayer>
     </GeoJSON>
     {#if addingMultipleFilters}
       <FreehandLine map={notNull($map)} on:done={gotFreehandLine} />