move map into components and make polylines dynamic

frontend/src/lib/Leaflet.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher, setContext } from 'svelte';
+  import L from 'leaflet?client';
+  import 'leaflet/dist/leaflet.css';
+  export let height = '100%';
+  export let width = '100%';
+	
+	// Must set either bounds, or view and zoom.
+  export let bounds = undefined;
+	export let view = undefined;
+	export let zoom = undefined;
+  let mapProp = undefined;
+  export { mapProp as map };
+
+	export const invalidateSize = () => map?.invalidateSize();
+  
+	const dispatch = createEventDispatcher();
+
+	let map;
+  $: mapProp = map;
+	
+  export const getMap = () => map;
+  setContext('layerGroup', getMap);
+  setContext('layer', getMap);
+  setContext('map', getMap);
+	
+  function createLeaflet(node) {
+    map = L.map(node).on('zoom', (e) => dispatch('zoom', e));
+		if(bounds) {
+      map.fitBounds(bounds)
+		} else {
+			map.setView(view, zoom);
+		}
+
+      
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+      attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: 'abcd',
+      maxZoom: 20,
+      minZoom: 0
+    }).addTo(map);
+		
+    return {
+      destroy() {
+        map.remove();
+        map = undefined;
+      },
+    };
+  }
+	
+	$: if(map) {
+		if(bounds) {
+      map.fitBounds(bounds)
+		} else {
+			map.setView(view, zoom);
+		}
+	}
+</script> 
+
+<style>
+  :global(.leaflet-control-container) {
+    position: static;
+  }
+</style>
+
+<div style="height:{height};width:{width}" use:createLeaflet>
+  {#if map}
+    <slot {map} />
+  {/if}
+</div>

frontend/src/lib/Polyline.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import L from 'leaflet?client';
+  import {createEventDispatcher, getContext, setContext, onDestroy} from 'svelte';
+
+  export let latLngs;
+  export let options;
+
+  const dispatch = createEventDispatcher();
+  
+	// let layerPane = pane || getContext('pane');
+  // @ts-ignore
+  let layerGroup: L.LayerGroup = getContext('layerGroup')();
+
+  export let line: L.Polyline = new L.Polyline(latLngs, options)
+    .on('click', (e) => dispatch('click', e))
+    .on('mouseover', (e) => dispatch('mouseover', e))
+    .on('mouseout', (e) => dispatch('mouseout', e))
+    .addTo(layerGroup);
+
+  setContext('layer', () => line);
+
+  onDestroy(() => {
+    line.remove();
+    line = undefined;
+  });
+
+  $: line.setStyle(options);
+
+  $: {
+    line.setLatLngs(latLngs);
+    line.redraw();
+  }
+</script>
+
+<slot />

frontend/src/routes/+page.svelte

@@ -5,26 +5,22 @@
   import 'leaflet/dist/leaflet.css';
 
   import { decode } from '@googlemaps/polyline-codec';
+	import Leaflet from '$lib/Leaflet.svelte';
+	import Polyline from '$lib/Polyline.svelte';
 
   let map;
-  let mapContainer;
+  // let mapContainer;
 
   let tripPlanPlaceholder = '';
   
-  onMount(() => {
-    const initialView = new L.LatLng(53.71,-2.24);
-    map = L.map(mapContainer, {preferCanvas: false}).setView(initialView, 10);
-    let layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
-      attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
-      subdomains: 'abcd',
-      maxZoom: 20,
-      minZoom: 0
-    });
-    layer.addTo(map);
-
-    return map.remove;
-  });
-
+  const initialView = [53.71,-2.24];
+  function resizeMap() {
+	  if(map) { map.invalidateSize(); }
+  }
+	
+	function resetMapView() {
+		map.setView(initialView, 10);
+	}
 
   // generate a path-dependent if we have VITE_API_URL defined (dev mode) or nor
   const apiUrl = (path: string) => `${import.meta.env.VITE_API_URL || ''}${path}`;
@@ -49,10 +45,10 @@
   };
 
   let tripPlan;
+  $: mapLines = [];
 
   const getPlan = async () => {
     tripPlanPlaceholder = 'getting trip plan...';
-    let now = new Date();
     const res = await fetch(otpBase+'/routers/default/plan?'+ new URLSearchParams({
       fromPlace: from,
       toPlace: to,
@@ -76,27 +72,17 @@
     let legs = tripPlan.plan.itineraries[0].legs;
     legs.map((leg, i) => {
       if (leg.legGeometry.points) {
-        let mode = leg.mode;
-        let lineStyle = {
-          color: mode=='WALK' ? 'grey' : '#00839E',
-          dashArray: mode=='WALK' ? '.1 11' : null,
-          weight: 5,
-        };
-        let haloLineStyle = {
-          color: '#ffffff',
-          dashArray: mode=='WALK' ? '.1 11' : null,
-          weight: 6,
-        };
-
-        let haloLine: L.Polyline = new L.Polyline(decode(leg.legGeometry.points), haloLineStyle).addTo(map);
-        let line: L.Polyline = new L.Polyline(decode(leg.legGeometry.points), lineStyle).addTo(map);
-        if (i == 0) {
-          map.fitBounds(line.getBounds());
+        let line = {
+          id: i,
+          latLngs: decode(leg.legGeometry.points),
+          mode: leg.mode,
         }
+        mapLines = [...mapLines, line];
       }
     });
   }
 </script>
+<svelte:window on:resize={resizeMap} />
 
 <p><i>plan a journey...</i></p>
 <p>from: <input bind:value={from} label="from"/></p>
@@ -119,4 +105,19 @@
 {:else}
   <p>{tripPlanPlaceholder}</p>
 {/if}
-<div id="map" bind:this={mapContainer} style="height:600px;width:100%;"/>
+<div style="height:600px;width:100%;">
+  <Leaflet bind:map view={initialView} zoom={10}>
+    {#each mapLines as line}
+      <Polyline latLngs={line.latLngs} options={{
+        color: '#ffffff',
+        dashArray: line.mode=='WALK' ? '.1 11' : null,
+        weight: 6,
+      }}/>
+      <Polyline latLngs={line.latLngs} options={{
+        color: line.mode=='WALK' ? 'grey' : '#00839e',
+        dashArray: line.mode=='WALK' ? '.1 11' : null,
+        weight: 5,
+      }}/>
+    {/each}
+  </Leaflet>
+</div>