Create route icons and components to place these icons.

src/lib/components/RouteRow.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { components } from '$lib/mapRegistry';
+
+    export let feature: any; // Raw Object
+    export let activeElec: string; // Active Electrification Type
+    export let reversed: boolean = false;
+
+    $: Icon = components[feature.type] || components.default;
+</script>
+
+<div class="row-container">
+    <div class="mileage-col">
+        <span class="miles">{feature.miles + "m" || "" }</span>
+        <span class="chains">{feature.chains + "ch" || "" }</span>
+    </div>
+
+    <div class="icon-col">
+        <svelte:component
+          this={Icon}
+          {feature}
+          {activeElec}
+          {reversed}
+        />
+    </div>
+
+    <div class="label-col">
+        {#if feature.name}
+          <div class="feature-name">{feature.name}</div>
+        {/if}
+        {#if feature.description}
+          <div class="feature-desc">{feature.description}</div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .row-container {
+        display: grid;
+        grid-template-columns: 80px 64px 1fr;
+        height: 64px;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+    }
+
+    .mileage-col {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        padding-right: 12px;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 0.85rem;
+        color: #54748b;
+    }
+
+    .miles {
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .chains {
+        font-size: 0.7rem;
+    }
+
+    .icon-col {
+        width: 64px;
+        height: 64px;
+        overflow: visible;
+    }
+
+    .label-col {
+        padding-left: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .feature-name {
+        font-weight: 700;
+        color: #1e293b;
+        font-size: 1rem;
+        text-transform: capitalize;
+    }
+
+    .feature-desc {
+        font-size: 0.75rem;
+        color: #94a3b8;
+        font-style: italic;
+    }
+</style>

src/lib/components/mapIcons/BaseTrack.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { getElecColour, type ElecType } from '$lib/railStyles';
+
+    export let activeElec: ElecType = 'none';
+    export let height: number = 64;
+    const width = 6;
+
+    $: colour = getElecColour(activeElec);
+</script>
+
+<line x1="32" y1="0" x2="32" y2={height}
+    stroke={colour}
+    stroke-width={width}
+    stroke-linecap="butt" />
+
+<style>
+    svg{
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+</style>

src/lib/components/mapIcons/Bridge.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        position: 'over' | 'under';
+        category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
+        roadName?: string;
+    }
+
+    export let activeElec: string;
+
+    const bridgeStyles = {
+        rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000'},
+        footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
+        aroad:      { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
+        minorRoad:  { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
+        motorway:   { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
+        waterway:   { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
+        pipeline:   { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
+    }
+
+    $: s = bridgeStyles[feature.category] || styles.minorRoad;
+    $: isOver = feature.position === 'over';
+
+    $: topY = 32 - (s.width / 2);
+    $: bottomY = 32 + (s.width /2);
+
+    $: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
+    $: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
+
+    $: bodyPath = `M 0 ${topY} L 64 ${topY} L 64 ${bottomY} L 0 ${bottomY} Z`;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="bridge">
+  {#if !isOver}
+    <path d={bodyPath} fill={s.color} />
+    <path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
+    <path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
+    <BaseTrack elec={activeElec} height={64} />
+  {:else}
+    <BaseTrack elec={activeElec} height={64} />
+    
+    <path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
+    
+    <g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
+        <path d={`M 0 ${topY} L 64 ${topY}`} />
+        <path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
+        <path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY-6}`} />
+        <path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY-6}`} />
+        <path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY+6}`} />
+        <path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY+6}`} />
+    </g>
+
+    {#if feature.roadName}
+      <text 
+        x="32" y="32" 
+        text-anchor="middle" 
+        dominant-baseline="central"
+        fill={s.text}
+        font-family="sans-serif"
+        font-weight="bold"
+        font-size={s.width > 20 ? "10" : "8"}
+        style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
+      >
+        {feature.roadName}
+      </text>
+    {/if}
+  {/if}
+</svg>
+
+<style>
+  svg { display: block; overflow: visible; }
+  text { user-select: none; }
+</style>

src/lib/components/mapIcons/Crossing.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        kind: 'uwc' | 'ahb' | 'mcb' | 'cctv' | 'tmo' | 'foot';
+    };
+
+    export let activeElec: any;
+
+    $: type = feature.kind.toLowerCase();
+    $: isFoot = type === 'foot';
+    $: filterCategory = isFoot ? 'foot' : (type === 'uwc' ? 'uwc' : 'level-crossing');
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}>
+    <BaseTrack {activeElec} height={64} />
+
+    {#if type === 'foot'}
+        <line x1="12" y1="32" x2="52" y2="32" stroke="#475569" stroke-width="2" stroke-dasharray="4 2" />
+
+    {:else if type === 'uwc'}
+        <g stroke="#1e293b" stroke-width="3">
+            <line x1="12" y1="26" x2="26" y2="26" /> 
+            <line x1="38" y1="38" x2="52" y2="38" />
+        </g>
+        <text x="50" y="32" class="label-right">UWC</text>
+
+    {:else}
+        <rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />
+        
+        <circle cx="25" cy="29" r="3.5" fill="#ef4444" /> <circle cx="39" cy="29" r="3.5" fill="#ef4444" /> <circle cx="32" cy="37" r="3.5" fill="#ffcc00" /> <text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
+    {/if}
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+    .label-right {
+        text-anchor: start; /* Align to the left of the start point */
+        dominant-baseline: central;
+        font-family: sans-serif;
+        font-weight: bold;
+        font-size: 9px;
+        fill: #1e293b;
+    }
+</style>

src/lib/components/mapIcons/Crossover.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { getElecColour } from '$lib/railStyles';
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let activeElec: any;
+    export let features: any;
+
+    $: branchColour = getElecColour(features?.elecBranch || activeElec);
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="crossover">
+    <g stroke={branchColour} stroke-width="3" stroke-linecap="round">
+        <line x1="16" y1="44" x2="48" y2="12" />
+        <line x1="16" y1="52" x2="48" y2="20" />
+    </g>
+
+    <BaseTrack elec={activeElec} height={64} />
+</svg>

src/lib/components/mapIcons/ElectrificationChange.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { getElecColour } from '$lib/railStyles';
+
+    export let feature: {
+        from: {
+            elec: string;
+            eco?: string;
+        },
+        to: {
+            elec: string;
+            eco?: string;
+        }
+    }
+
+    $: fromColour = getElecColour(feature.from.elec);
+    $: toColour = getElecColour(feature.to.elec);
+    $: showFromEco = !!feature.from.eco;
+    $: showToEco = !!feature.to.eco;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
+    <line x1="32" y1="0" x2="32" y2="32" stroke={fromColour} stroke-width="6" />
+    <line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />
+
+    {#if showFromEco || showToEco}
+        <line x1="32" y1="32" x2="800" y2="32" 
+              stroke="#ef4444" stroke-width="2" stroke-dasharray="6 3" />
+
+        <g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
+            {#if showFromEco}
+                <text x="75" y="24" fill="#b91c1c" style="text-transform: uppercase;">
+                    ECO: {feature.from.eco}
+                </text>
+            {/if}
+            
+            {#if showToEco}
+                <text x="75" y="48" fill="#b91c1c" style="text-transform: uppercase;">
+                    ECO: {feature.to.eco}
+                </text>
+            {/if}
+        </g>
+    {/if}
+
+    <rect x="24" y="30" width="16" height="4" fill="white" stroke="#b91c1c" stroke-width="1.5" />
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+</style>

src/lib/components/mapIcons/Junction.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import {getElecColour} from '$lib/railStyles';
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        direction: 'up' | 'down';
+        diverges: 'left' | 'right';
+        elecBranch?: string;
+    };
+    export let activeElec: any;
+    export let reversed: boolean = false;
+
+    $: isUp = feature.direction === 'up';
+    $: visualUp = reversed ? !isUp : isUp;
+    
+    $: isRight = feature.diverges === 'right';
+
+    $: yStart = visualUp ? 64 : 0;
+    $: yEnd = visualUp ? 0 : 64;
+    $: xEnd = isRight ? 64 : 0;
+
+    $: branchColour = getElecColour(feature.elecBranch || activeElec);
+    $: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="junction">
+    <path
+        d={branchPath}
+        fill="none"
+        stroke={branchColour}
+        stroke-width="5"
+        strone-linecap="round"
+    />
+    <BaseTrack {activeElec} height={64} />
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+</style>

src/lib/components/mapIcons/Loop.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { getElecColour } from '$lib/railStyles';
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        side: 'left' | 'right' | 'both';
+        elecLoop?: string;
+    };
+
+    export let reversed: boolean = false;
+    export let activeElec: any;
+
+    $: loopColour = getElecColour(feature.elecLoop || activeElec);
+
+    const leftPath = `M 32 0 Q 8 32 32 64`;
+    const rightPath = `M 32 0 Q 56 32 32 64`;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
+    <g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
+        {#if feature.side === 'left' || feature.side === 'both'}
+            <path d={leftPath} />
+        {/if}
+        
+        {#if feature.side === 'right' || feature.side === 'both'}
+            <path d={rightPath} />
+        {/if}
+    </g>
+
+    <BaseTrack {activeElec} height={64} />
+
+</svg>

src/lib/components/mapIcons/SignallerChange.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        from: string;
+        to: string;
+    };
+
+    export let activeElec: any;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
+    <BaseTrack {activeElec} height={64} />
+
+    <line x1="-500" y1="32" x2="800" y2="32" 
+          stroke="#6366f1" stroke-width="2" stroke-dasharray="8 4" />
+
+    <g font-family="sans-serif" font-weight="800" font-size="11">
+        <text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
+            {feature.from}
+        </text>
+        <text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
+            {feature.to}
+        </text>
+    </g>
+</svg>

src/lib/components/mapIcons/Station.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+    import { type ElecType } from '$lib/railStyles';
+
+    export let feature;
+    export let activeElec: ElecType;
+
+    $: isTerminus = feature.terminus;
+</script>
+
+<svg viewBox="0 0 64 64" class="station">
+    {#if !isTerminus}
+        <BaseTrack {activeElec} height={64} />
+        <circle cx="32" cy="32" r="12" fill="white" />
+        <circle cx="32" cy="32" r="12" fill="none" stroke="#000000" stroke-width="3" />
+    {:else}
+        <rect
+          x="8" y="12"
+          width="50" height="50"
+          rx="8"
+          fill="white"
+          stroke="black"
+          stroke-width="3"
+        />
+    {/if}
+</svg>

src/lib/mapRegistry.ts

@@ -0,0 +1,23 @@
+import Station from '$lib/components/mapIcons/Station.svelte';
+import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+import Junction from '$lib/components/mapIcons/Junction.svelte';
+import Bridge from '$lib/components/mapIcons/Bridge.svelte';
+import Crossover from '$lib/components/mapIcons/Crossover.svelte';
+import Crossing from '$lib/components/mapIcons/Crossing.svelte';
+import Loop from '$lib/components/mapIcons/Loop.svelte';
+import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte';
+import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte';
+
+
+export const components = {
+    station: Station,
+    junction: Junction,
+    crossovers: BaseTrack,
+    siteof: BaseTrack,
+    bridge: Bridge,
+    crossover: Crossover,
+    crossing: Crossing,
+    loop: Loop,
+    signallerChange: SignallerChange,
+    electrificationChange: ElectrificationChange,
+}

src/lib/railStyles.ts

@@ -0,0 +1,11 @@
+export type ElecType = 'none' | '25kvac' | '750vdc' | '650vdc' | '1500vdc';
+
+export const elecColours: Record<ElecType, string> = {
+    'none': '#344415',
+    '25kvac': '#ed4444',
+    '750vdc': '#3b82f6',
+    '650vdc': '#eab308',
+    '1500vdc': '#f97316',
+};
+
+export const getElecColour = (type?: ElecType) => elecColours[type ?? 'none'];