Create route icons and components to place these icons.

2026-02-05 01:52:18 +00:00
parent d38afeb922
commit e977d01315
15 changed files with 683 additions and 86 deletions
--- a/src/lib/components/RouteRow.svelte
+++ 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>
--- a/src/lib/components/mapIcons/BaseTrack.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Bridge.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Crossing.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Crossover.svelte
+++ 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>
--- a/src/lib/components/mapIcons/ElectrificationChange.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Junction.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Loop.svelte
+++ 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>
--- a/src/lib/components/mapIcons/SignallerChange.svelte
+++ 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>
--- a/src/lib/components/mapIcons/Station.svelte
+++ 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>
--- a/src/lib/mapRegistry.ts
+++ 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,
+}
--- a/src/lib/railStyles.ts
+++ 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'];
--- 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>
--- a/src/routes/map/[slug]/+page.svelte
+++ b/src/routes/map/[slug]/+page.svelte
--- 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