Create route icons and components to place these icons.

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>