Complete map display page

src/lib/components/mapIcons/Bridge.svelte

@@ -19,7 +19,7 @@
         pipeline:   { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
     }
 
-    $: s = bridgeStyles[feature.category] || styles.minorRoad;
+    $: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
     $: isOver = feature.position === 'over';
 
     $: topY = 32 - (s.width / 2);
@@ -36,9 +36,9 @@
     <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} />
+    <BaseTrack {activeElec} height={64} />
   {:else}
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
     
     <path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
     

src/lib/components/mapIcons/Crossover.svelte

@@ -14,5 +14,5 @@
         <line x1="16" y1="52" x2="48" y2="20" />
     </g>
 
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
 </svg>

src/lib/components/mapIcons/Junction.svelte

@@ -16,8 +16,8 @@
     $: isRight = feature.diverges === 'right';
 
     $: yStart = visualUp ? 64 : 0;
-    $: yEnd = visualUp ? 0 : 64;
-    $: xEnd = isRight ? 64 : 0;
+    $: yEnd = visualUp ? 8 : 56;
+    $: xEnd = isRight ? 56 : 8;
 
     $: branchColour = getElecColour(feature.elecBranch || activeElec);
     $: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;

src/lib/components/mapIcons/Loop.svelte

@@ -3,7 +3,7 @@
     import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
 
     export let feature: {
-        side: 'left' | 'right' | 'both';
+        position: 'left' | 'right' | 'both';
         elecLoop?: string;
     };
 
@@ -12,17 +12,22 @@
 
     $: loopColour = getElecColour(feature.elecLoop || activeElec);
 
+    $: effectivePosition = (() => {
+        if (!reversed || feature.position === 'both') return feature.position;
+        return feature.position === 'left' ? 'right' : 'left';
+    })();
+
     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'}
+        {#if effectivePosition === 'left' || feature.position === 'both'}
             <path d={leftPath} />
         {/if}
         
-        {#if feature.side === 'right' || feature.side === 'both'}
+        {#if effectivePosition === 'right' || feature.position === 'both'}
             <path d={rightPath} />
         {/if}
     </g>

src/lib/components/mapIcons/SiteOf.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let activeElec: string;
+    export let feature: any;
+    export let reversed: boolean;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
+    <BaseTrack {activeElec} height={64} />
+</svg>