AIS, ADSB, and Range

client/src/components/MapView.vue

@@ -115,7 +115,13 @@ function tickPercent(index: number) {
 }
 
 function toggleAT() {
-	atActive.value ? airTraffic.hide() : airTraffic.show()
+	if(atActive.value) {
+		aisLayer.hide()
+		airTraffic.hide()
+	} else {
+		aisLayer.show()
+		airTraffic.show()
+	}
 	atActive.value = !atActive.value
 }
 

client/src/services/ais.ts

@@ -23,10 +23,26 @@ const SHIP_COLORS: Record<string, string> = {
 
 function buildBoatIcon(boat: any): string {
 	const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown']
-	const heading = boat.heading ?? boat.course ?? 0
+
+	if (boat.type === 'Base Station') {
+		return `data:image/svg+xml,${encodeURIComponent(`
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                <polygon points="16,2 30,16 16,30 2,16" fill="${color}" stroke="#000" stroke-width="1.5"/>
+                <circle cx="16" cy="9" r="1.8" fill="#000"/>
+                <line x1="16" y1="9" x2="16" y2="23" stroke="#000" stroke-width="1.8"/>
+                <line x1="11" y1="12" x2="21" y2="12" stroke="#000" stroke-width="1.8"/>
+                <path d="M9,18 Q16,26 23,18" fill="none" stroke="#000" stroke-width="1.5"/>
+            </svg>
+        `)}`
+	}
+
 	return `data:image/svg+xml,${encodeURIComponent(`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
             <polygon points="12,0 24,28 12,22 0,28" fill="${color}" stroke="#000" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="1.5" fill="#000"/>
+            <line x1="12" y1="12" x2="12" y2="22" stroke="#000" stroke-width="1.5"/>
+            <line x1="8" y1="14" x2="16" y2="14" stroke="#000" stroke-width="1.5"/>
+            <path d="M7,17 Q12,24 17,17" fill="none" stroke="#000" stroke-width="1.3"/>
         </svg>
     `)}`
 }

client/src/services/range.ts

@@ -24,7 +24,7 @@ export class RangeLayer {
 
 		const feature = new Feature({ geometry: new Polygon([coords]) })
 		feature.setStyle(new Style({
-			stroke: new Stroke({ color: '#00ffcc', width: 1.5 })
+			stroke: new Stroke({ color: 'rgb(0 171 138 / 0.53)', width: 1.5 })
 		}))
 
 		const source = new VectorSource({ features: [feature] })