58 lines
1.4 KiB
Svelte
58 lines
1.4 KiB
Svelte
<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>
|