Start experimenting with drawing arrows for JAT check. #23

src/lib/map/MapLibreMap.svelte

@@ -4,17 +4,21 @@
 
  // TODO Is it worth trying to preserve the map while navigating to other pages?
  export let map: Map | null = null;
+
+ let style = "hybrid";
+ //let style = "uk-openzoomstack-light";
 </script>
 
 <MapLibre
- style={`https://api.maptiler.com/maps/uk-openzoomstack-light/style.json?key=${import.meta.env.VITE_MAPTILER_API_KEY}`}
+ style={`https://api.maptiler.com/maps/${style}/style.json?key=${import.meta.env.VITE_MAPTILER_API_KEY}`}
  standardControls
  on:error={(e) => {
  // @ts-expect-error Not exported
  console.log(e.detail.error);
  }}
  let:map
  bind:map
+ bounds={[-5.96, 49.89, 2.31, 55.94]}
 >
  <Geocoder {map} />
  <slot />

src/routes/route_check/+page.svelte

@@ -66,7 +66,7 @@
  </li>
  {/if}
 
- <li>JAT Check</li>
+ <li><a href="{base}/route_check/jat_check">JAT Check</a></li>
 
  <li>
  <a href="{base}/route_check/results_summary">Results Summary</a>

src/routes/route_check/jat_check/+page.svelte

@@ -1 +1,95 @@
-TODO
+<script lang="ts">
+ import { pairs } from "$lib";
+ import { backgroundAndFontCombinations } from "$lib/colors";
+ import type { FeatureCollection, Position } from "geojson";
+ import { Radio } from "govuk-svelte";
+ import { onMount, onDestroy } from "svelte";
+ import { DraggablePin } from "$lib/map";
+ import { MapLibreMap } from "$lib/map";
+ import { GeoJSON, LineLayer } from "svelte-maplibre";
+ import type { MapMouseEvent, LngLat, Map } from "maplibre-gl";
+
+ let map: Map;
+
+ interface Arrow {
+ point1: Position;
+ point2: Position;
+ kind: "vehicle-straight" | "vehicle-turn" | "pedestrian";
+ color: "green" | "amber" | "red" | "critical";
+ }
+ let arrows: Arrow[] = [];
+ let currentKind: "vehicle-straight" | "vehicle-turn" | "pedestrian" =
+ "vehicle-straight";
+ let currentColor: "green" | "amber" | "red" | "critical" = "green";
+
+ function onMapClick(e: MapMouseEvent) {
+ arrows = [
+ ...arrows,
+ {
+ point1: e.lngLat.toArray(),
+ // TODO offset a bit
+ point2: e.lngLat.toArray(),
+ kind: currentKind,
+ color: currentColor,
+ },
+ ];
+ }
+
+ // TODO Wait for loaded
+ onMount(() => {
+ map.on("click", onMapClick);
+ });
+ onDestroy(() => {
+ map.off("click", onMapClick);
+ });
+
+ // TODO Arrows will have to be an extra symbol at endpoints. Or... just generate a polygon.
+ function toGj(arrows: Arrow[]): FeatureCollection {
+ return {
+ type: "FeatureCollection",
+ features: arrows.map((arrow) => {
+ return {
+ type: "Feature",
+ properties: {
+ kind: arrow.kind,
+ color: backgroundAndFontCombinations[arrow.color].background,
+ },
+ geometry: {
+ type: "LineString",
+ coordinates: [arrow.point1, arrow.point2],
+ },
+ };
+ }),
+ };
+ }
+</script>
+
+<Radio
+ legend="Kind"
+ choices={pairs(["vehicle-straight", "vehicle-turn", "pedestrian"])}
+ inlineSmall
+ bind:value={currentKind}
+/>
+<Radio
+ legend="Color"
+ choices={pairs(["green", "amber", "red", "critical"])}
+ inlineSmall
+ bind:value={currentColor}
+/>
+
+<div style="position: relative; width: 100%; height: 600px;">
+ <MapLibreMap bind:map>
+ {#each arrows as arrow}
+ <DraggablePin {map} bind:position={arrow.point1} />
+ <DraggablePin {map} bind:position={arrow.point2} />
+ {/each}
+ <GeoJSON data={toGj(arrows)}>
+ <LineLayer
+ paint={{
+ "line-width": 6,
+ "line-color": ["get", "color"],
+ }}
+ />
+ </GeoJSON>
+ </MapLibreMap>
+</div>