From e977d013159ed73f6a4fd3cd99e5d55cb5baca8e Mon Sep 17 00:00:00 2001
From: Fred Boniface <fjla@fredboniface.co.uk>
Date: Thu, 5 Feb 2026 01:52:18 +0000
Subject: [PATCH] Create route icons and components to place these icons.

---
 src/lib/components/RouteRow.svelte            |  90 ++++++++
 src/lib/components/mapIcons/BaseTrack.svelte  |  22 ++
 src/lib/components/mapIcons/Bridge.svelte     |  74 +++++++
 src/lib/components/mapIcons/Crossing.svelte   |  45 ++++
 src/lib/components/mapIcons/Crossover.svelte  |  18 ++
 .../mapIcons/ElectrificationChange.svelte     |  49 +++++
 src/lib/components/mapIcons/Junction.svelte   |  39 ++++
 src/lib/components/mapIcons/Loop.svelte       |  32 +++
 .../mapIcons/SignallerChange.svelte           |  26 +++
 src/lib/components/mapIcons/Station.svelte    |  26 +++
 src/lib/mapRegistry.ts                        |  23 ++
 src/lib/railStyles.ts                         |  11 +
 src/routes/+page.svelte                       | 112 ++++++++++
 src/routes/map/[slug]/+page.svelte            |   0
 static/maps/0001.yaml                         | 202 ++++++++++--------
 15 files changed, 683 insertions(+), 86 deletions(-)
 create mode 100644 src/lib/components/RouteRow.svelte
 create mode 100644 src/lib/components/mapIcons/BaseTrack.svelte
 create mode 100644 src/lib/components/mapIcons/Bridge.svelte
 create mode 100644 src/lib/components/mapIcons/Crossing.svelte
 create mode 100644 src/lib/components/mapIcons/Crossover.svelte
 create mode 100644 src/lib/components/mapIcons/ElectrificationChange.svelte
 create mode 100644 src/lib/components/mapIcons/Junction.svelte
 create mode 100644 src/lib/components/mapIcons/Loop.svelte
 create mode 100644 src/lib/components/mapIcons/SignallerChange.svelte
 create mode 100644 src/lib/components/mapIcons/Station.svelte
 create mode 100644 src/lib/mapRegistry.ts
 create mode 100644 src/lib/railStyles.ts
 create mode 100644 src/routes/map/[slug]/+page.svelte

diff --git a/src/lib/components/RouteRow.svelte b/src/lib/components/RouteRow.svelte
new file mode 100644
index 0000000..ee2c863
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/BaseTrack.svelte b/src/lib/components/mapIcons/BaseTrack.svelte
new file mode 100644
index 0000000..67b4e70
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Bridge.svelte b/src/lib/components/mapIcons/Bridge.svelte
new file mode 100644
index 0000000..025e13b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Crossing.svelte b/src/lib/components/mapIcons/Crossing.svelte
new file mode 100644
index 0000000..9212cd8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Crossover.svelte b/src/lib/components/mapIcons/Crossover.svelte
new file mode 100644
index 0000000..5c52bdb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/ElectrificationChange.svelte b/src/lib/components/mapIcons/ElectrificationChange.svelte
new file mode 100644
index 0000000..7956b22
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Junction.svelte b/src/lib/components/mapIcons/Junction.svelte
new file mode 100644
index 0000000..3f785e1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Loop.svelte b/src/lib/components/mapIcons/Loop.svelte
new file mode 100644
index 0000000..3c35380
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/SignallerChange.svelte b/src/lib/components/mapIcons/SignallerChange.svelte
new file mode 100644
index 0000000..ce9a968
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/mapIcons/Station.svelte b/src/lib/components/mapIcons/Station.svelte
new file mode 100644
index 0000000..1e6115d
--- /dev/null
+++ b/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>
diff --git a/src/lib/mapRegistry.ts b/src/lib/mapRegistry.ts
new file mode 100644
index 0000000..fef5131
--- /dev/null
+++ b/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,
+}
\ No newline at end of file
diff --git a/src/lib/railStyles.ts b/src/lib/railStyles.ts
new file mode 100644
index 0000000..30f02dc
--- /dev/null
+++ b/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'];
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..acb0af1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,114 @@
+<script lang="ts">
+    import RouteRow from '$lib/components/RouteRow.svelte';
+
+
+    const dummyFeatures = [
+        {
+            type: 'station',
+            miles: 0,
+            chains: 0,
+            name: 'Testington',
+            description: 'Terminus',
+            terminus: true,
+            elec: '25kvac',
+        },
+        {
+            type: 'station',
+            miles: 0,
+            chains: 76,
+            name: 'Closeby',
+            description: 'Temporarily closed',
+            elec: '25kvac',
+        },
+        {
+            type: 'junction',
+            name: 'Test Junction',
+            diverges: 'right',
+            direction: 'down',
+            elec: '25kvac',
+            elecBranch: 'none',
+            miles: 1,
+            chains: 13,
+        },
+        {
+            type: 'bridge',
+            position: 'over',
+            category: 'pipeline',
+            name: 'Waterway Bridge',
+            roadName: "TfL (LU)",
+            miles: 1,
+            chains: 41,
+        },
+        {
+            type: 'crossover',
+            name: 'Dolphin junction',
+            miles: 1,
+            chains: 42,
+        },
+        {
+            type: 'junction',
+            name: 'Test Junction South',
+            description: "To: Banbury West Junction & Birmingham",
+            diverges: 'left',
+            direction: 'down',
+            elec: '25kvac',
+            elecBranch: '650vdc',
+            miles: 1,
+            chains: 42,
+        },
+        {
+            type: 'electrificationChange',
+            from: {
+              elec: '25kvac',
+              eco: 'Didcot',
+            },
+            to: {
+                elec: 'none',
+            },
+        },
+        {
+            type: 'crossing',
+            kind: 'ahb',
+            elec: '25kvac',
+            name: 'Swindon Lane',
+            description: 'Controlled by TVSC (Level Crossing WS)'
+        },
+        {
+            type: 'loop',
+            side: 'both',
+            elec: '25kvac',
+            elecLoop: 'none',
+        },
+        {
+            type: 'signallerChange',
+            from: 'TVSC - Didcot WS (SB)',
+            to: 'TVSC - Swindon WS (SN)',
+            elec: '25kvac',
+        },
+        {
+            type: 'station',
+            miles: 4,
+            chains: 13,
+            name: 'Powerless',
+            description: "Doesn't exist",
+            elec: '750vdc',
+        }
+    ]
+</script>
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
+<div class="map-container">
+    {#each dummyFeatures as feature}
+      <RouteRow {feature} activeElec={feature.elec} />
+    {/each}
+</div>
+
+<style>
+    .map-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+        font-family: sans-serif;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/map/[slug]/+page.svelte b/src/routes/map/[slug]/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/static/maps/0001.yaml b/static/maps/0001.yaml
index 23273a7..ee38c3a 100644
--- a/static/maps/0001.yaml
+++ b/static/maps/0001.yaml
@@ -1,27 +1,35 @@
-routeName: Paddington - Bristol Temple Meads
+routeName: Paddington - Reading
 routeId: 0001
 signallerStart: TVSC Paddington WS
 # signallerEnd: TVSC Temple Meads WS
 signallerEnd: TVSC Reading WS
-ecoStart: Didcot (TVSC)
-ecoEnd:
+elecStart:
+  elec: 25kvac
+  eco: Didcot (TVSC)
+elecEnd:
+  elec: 25kvac
+  eco: Didcot (TVSC)
 routeDetail:
 - type: station
   name: Paddington
+  isTerminus: true
   miles: 0
   chains: 5
 
 - type: bridge
   name: Westbourne
+  description: Westbourne Avenue?
   position: over
-  category: road
+  category: aroad
+  roadName: A412
   miles: 0
   chains: 33
 
 - type: bridge
   name: Ranelagh Bridge
+  description: Ranelegh Lane?
   position: over
-  category: road
+  category: minorRoad
   miles: 0
   chains: 42
 
@@ -32,7 +40,7 @@ routeDetail:
   chains: 46
 
 - type: crossovers
-  name: Royal Oak Carriage Loop A&B diverge
+  description: Royal Oak Carriage Loop A&B diverge
   miles: 0
   chains: 47
 
@@ -45,7 +53,6 @@ routeDetail:
 
 - type: crossovers
   name: Subway Junction
-  description: Crossrail Lines
   miles: 0
   chains: 61
 
@@ -57,19 +64,21 @@ routeDetail:
   chains: 68
 
 - type: crossovers
-  name: Royal Oak Carriage Loop A&B diverge
+  description: Royal Oak Carriage Loop A&B diverge
 
 - type: bridge
-  name: A4027 Great Western Road
+  name: Great Western Road
   position: over
-  category: road
+  category: aroad
+  roadName: A4027
   miles: 1
   chains: 14
 
 - type: bridge
-  name: A40(M) Westway
+  name: Westway
   position: over
-  category: road
+  category: motorway
+  roadName: A40(M)
   miles: 1
   chains: 18
 
@@ -77,7 +86,7 @@ routeDetail:
   name: Westbourne Park Junction
   diverges: left
   direction: up
-  destination: Crossrail Core
+  description: to Crossrail Core Operating Section
   miles: 1
   chains: 21
 
@@ -89,14 +98,14 @@ routeDetail:
 - type: bridge
   name: Godbourne Road
   position: over
-  category: road
+  category: minorRoad
   miles: 1
   chains: 38
 
 - type: bridge
   name: Ladbroke Grove
   position: over
-  category: road
+  category: minorRoad
   miles: 1
   chains: 64
 
@@ -109,7 +118,7 @@ routeDetail:
   chains: 73
 
 - type: junction
-  name: Kensal Green
+  name: Kensal Green South Junction
   diverges: right
   direction: down
   destination: Crossrail Depot & North Pole Depot
@@ -119,7 +128,7 @@ routeDetail:
 - type: bridge
   name: Scrubs Lane
   position: over
-  category: road
+  category: minorRoad
   miles: 2
   chains: 54
 
@@ -149,7 +158,7 @@ routeDetail:
 - type: bridge
   name: Old Oak Common Lane
   position: under
-  category: road
+  category: minorRoad
   miles: 3
   chains: 40
 
@@ -176,9 +185,10 @@ routeDetail:
   chains: 56
 
 - type: bridge
-  name: A40 Western Avenue
+  name: Western Avenue
   position: over
-  category: road
+  category: aroad
+  roadName: A40
   miles: 3
   chains: 78
 
@@ -195,9 +205,10 @@ routeDetail:
   chains: 7
 
 - type: bridge
-  name: A4000 Horn Lane
+  name: Horn Lane
   position: over
-  category: road
+  category: aroad
+  roadName: A4000
   miles: 4
   chains: 16
 
@@ -209,7 +220,7 @@ routeDetail:
 - type: bridge
   name: Noel Road
   position: over
-  category: road
+  category: minorRoad
   miles: 4
   chains: 72
 
@@ -227,9 +238,10 @@ routeDetail:
   chains: 13
 
 - type: bridge
-  name: A406 Hanger Lane
+  name: Hanger Lane
   position: over
-  category: road
+  category: aroad
+  roadName: A406
   miles: 5
   chains: 24
 
@@ -241,7 +253,7 @@ routeDetail:
 - type: bridge
   name: The Broadway
   position: over
-  category: road
+  category: minorRoad
   miles: 5
   chains: 61
 
@@ -258,21 +270,22 @@ routeDetail:
 - type: bridge
   name: Longfield Avenue
   position: over
-  category: road
+  category: minorRoad
   miles: 6
   chains: 3
 
 - type: bridge
   name: St Leonards Road
   position: over
-  category: road
+  category: minorRoad
   miles: 6
   chains: 23 
 
 - type: bridge
-  name: B452 Drayton Green Road
+  name: Drayton Green Road
   position: over
-  category: road
+  category: minorRoad
+  roadName: B452
   miles: 6
   chains: 42
 
@@ -311,7 +324,8 @@ routeDetail:
 
 - type: bridge
   name: Hanwell Viaduct
-  category: river
+  position: under
+  category: waterway
   crosses: River Brent
   miles: 7
   chains: 6
@@ -329,15 +343,16 @@ routeDetail:
 
 - type: bridge
   name: Iron Bridge
-  crosses: A4020 Uxbridge Road
+  crosses: Uxbridge Road
   position: under
-  category: road
+  category: aroad
+  roadName: A4020
   miles: 8
   chains: 4
 
 - type: loop
   position: left
-  name: Hanwell Up & Dn Goods Loop
+  name: Hanwell Up & Dn Goods Loops
   miles: 8
   chains: 20
 
@@ -355,9 +370,10 @@ routeDetail:
   chains: 6
 
 - type: bridge
-  name: A3005 South Road
+  name: South Road
   position: over
-  category: road
+  category: aroad
+  roadName: A3005
   miles: 9
   chains: 10
 
@@ -376,7 +392,7 @@ routeDetail:
 - type: bridge
   name: Minster Dock Brent Road
   position: under
-  category: road
+  category: minorRoad
   miles: 10
   chains: 6
 
@@ -395,9 +411,10 @@ routeDetail:
   chains: 29
 
 - type: bridge
-  name: A312 Hayes By-Pass
+  name: Hayes By-Pass
   position: over
-  category: road
+  category: aroad
+  roadName: A312
   miles: 10
   chains: 31
 
@@ -415,7 +432,7 @@ routeDetail:
 - type: bridge
   name: Station Road
   position: over
-  category: road
+  category: minorRoad
   miles: 10
   chains: 77
 
@@ -428,9 +445,10 @@ routeDetail:
   destination: Heathrow Airport
 
 - type: bridge
-  name: A437 New Dawley Road
+  name: New Dawley Road
   position: over
-  category: road
+  category: aroad
+  roadName: A437
   miles: 11
   chains: 28
 
@@ -440,9 +458,10 @@ routeDetail:
   chains: 9
 
 - type: bridge
-  name: A408 Stockley Road
+  name: Stockley Road
   position: over
-  category: road
+  category: aroad
+  roadName: A408
   miles: 12
   chains: 22
 
@@ -467,7 +486,7 @@ routeDetail:
   name: West Drayton Junction
   diverges: left
   direction: down
-  destination: Coinbrook Freight (For Heathrow)
+  destination: Colnbrook Freight (For Heathrow)
   miles: 13
   chains: 31
 
@@ -493,7 +512,7 @@ routeDetail:
 - type: bridge
   name: Water Works
   position: under
-  category: road
+  category: minorRoad
   miles: 14
   chains: 6
 
@@ -505,9 +524,10 @@ routeDetail:
   chains: 10
 
 - type: bridge
-  name: M25 Motorway
+  # name: M25 Motorway
   position: over
-  category: road
+  category: motorway
+  roadName: M25
   miles: 14
   chains: 41
 
@@ -518,7 +538,7 @@ routeDetail:
 - type: bridge
   name: Thorney Lane South
   position: over
-  category: road
+  category: minorRoad
   miles: 14
   chains: 50
   
@@ -534,7 +554,7 @@ routeDetail:
 - type: bridge
   name: Market Lane
   position: under
-  category: road
+  category: minorRoad
   miles: 15
   chains: 56
 
@@ -559,9 +579,10 @@ routeDetail:
   chains: 18
 
 - type: bridge
-  name: B470 Station Road
+  name: Station Road
   position: under
-  category: road
+  roadName: B470
+  category: minorRoad
   miles: 16
   chains: 23
 
@@ -575,14 +596,14 @@ routeDetail:
 - type: bridge
   name: St Mary's Road
   position: over
-  category: road
+  category: minorRoad
   miles: 16
   chains: 68
 
 - type: bridge
   name: Middlegreen Road
   position: over
-  category: road
+  category: minorRoad
   miles: 17
   chains: 18
 
@@ -592,16 +613,17 @@ routeDetail:
   chains: 20
 
 - type: bridge
-  name: A412 Uxbridge Road
+  name: Uxbridge Road
   position: over
-  category: road
+  category: aroad
+  roadName: A412
   miles: 17
   chains: 64
 
 - type: bridge
   name: Wexham Road
   position: over
-  category: road
+  category: minorRoad
   miles: 18
   chains: 5
 
@@ -613,7 +635,7 @@ routeDetail:
 - type: bridge
   name: William Street
   position: over
-  category: road
+  category: minorRoad
   miles: 18
   chains: 42
 
@@ -628,7 +650,7 @@ routeDetail:
 - type: bridge
   name: Stoke Poges Lane
   position: over
-  category: road
+  category: minorRoad
   miles: 18
   chains: 69
 
@@ -644,37 +666,38 @@ routeDetail:
   chains: 2
 
 - type: bridge
-  name: A355 Farnham Road
+  name: Farnham Road
   position: over
-  category: road
+  category: aroad
+  roadName: A355
   miles: 19
   chains: 36
 
 - type: bridge
   name: Leigh Road
   position: over
-  category: road
+  category: minorRoad
   miles: 19
   chains: 74
 
 - type: bridge
   name: Dover Road
   position: over
-  category: road
+  category: minorRoad
   miles: 20
   chains: 28
 
 - type: bridge
   name: Burnham Lane
   position: under
-  category: road
+  category: minorRoad
   miles: 20
   chains: 55
 
 - type: bridge
   name: Station Road
   position: under
-  category: road
+  category: minorRoad
   miles: 20
   chains: 71
 
@@ -686,28 +709,28 @@ routeDetail:
 - type: bridge
   name: Huntercombe Lane North
   position: under
-  category: road
+  category: minorRoad
   miles: 21
   chains: 41
 
 - type: bridge
   name: Lent Rise Road
   position: under
-  category: road
+  category: minorRoad
   miles: 21
   chains: 67
 
 - type: bridge
   name: Taplow Road
   position: under
-  category: road
+  category: minorRoad
   miles: 22
   chains: 1
 
 - type: bridge
   name: Hitcham Road
   position: under
-  category: road
+  category: minorRoad
   miles: 22
   chains: 14
 
@@ -717,16 +740,17 @@ routeDetail:
   chains: 39
 
 - type: bridge
-  name: A4 Bath Road
+  name: Bath Road
   position: under
-  category: road
+  category: aroad
+  roadName: A4
   miles: 22
   chains: 63
 
 - type: bridge
   name: Clears Road
   position: under
-  category: road
+  category: minorRoad
   miles: 22
   chains: 74
 
@@ -745,9 +769,10 @@ routeDetail:
   chains: 27
 
 - type: bridge
-  name: B3023 Oldfield Road
+  name: Oldfield Road
   position: under
-  category: road
+  category: minorRoad
+  roadName: B3023
   miles: 23
   chains: 54
 
@@ -766,14 +791,15 @@ routeDetail:
 - type: bridge
   name: Forlease Road
   position: under
-  category: road
+  category: minorRoad
   miles: 23
   chains: 68
 
 - type: bridge
-  name: A308 King Street
+  name: King Street
   position: under
-  category: road
+  category: aroad
+  roadName: A308
   miles: 24
   chains: 15
 
@@ -801,14 +827,15 @@ routeDetail:
 - type: bridge
   name: Norden Road
   position: under
-  category: road
+  category: minorRoad
   miles: 25
   chains: 10
 
 - type: bridge
-  name: A404(M) Motorway
+  # name: A404(M) Motorway
   position: over
-  category: road
+  category: motorway
+  roadName: A404(M)
   miles: 25
   chains: 44
 
@@ -918,9 +945,10 @@ routeDetail:
   chains: 68
 
 - type: bridge
-  name: A321 Waltham Road
+  name: Waltham Road
   position: over
-  category: road
+  category: aroad
+  roadName: A321
   miles: 30
   chains: 74
 
@@ -1000,9 +1028,10 @@ routeDetail:
   chains: 29
 
 - type: bridge
-  name: A4 Bath Road
+  name: Bath Road
   position: over
-  category: road
+  category: aroad
+  roadName: A4
   miles: 33
   chains: 47
 
@@ -1027,9 +1056,10 @@ routeDetail:
   chains: 48
 
 - type: bridge
-  name: A329(M) Broken Brow
+  name: Broken Brow
   position: under
-  category: road
+  category: motorway
+  roadName: A329(M)
   miles: 34
   chains: 50