Fix map points for beacon and POI

src/components/BeaconController.vue

@@ -1,5 +1,5 @@
 <template>
-  <p v-if="beacon.location">
+  <p v-if="beacon.name">
     <button
       id="toggleBeacon"
       class="beacon-button"
@@ -8,7 +8,7 @@
     >
       {{ beacon.enabled ? '⏸' : '▶' }}
     </button>
-    <span id="currentBeacon">{{ beacon.location.name }}</span>
+    <span id="currentBeacon">{{ beacon.name }}</span>
     <button
       class="beacon-button"
       id="clearBeacon"

src/components/CalloutList.vue

@@ -38,11 +38,11 @@ const props = defineProps<CalloutListProps>();
 
 const startBeacon = (e: MouseEvent) => {
   let target = e.target as HTMLButtonElement;
-  beacon.set({
-    name: target.getAttribute("data-name")!,
-    latitude: +target.getAttribute('data-latitude')!,
-    longitude: +target.getAttribute('data-longitude')!
-  });
+  beacon.set(
+    target.getAttribute("data-name")!,
+    +target.getAttribute('data-latitude')!,
+    +target.getAttribute('data-longitude')!
+  );
   beacon.enable();
 };
 </script>

src/composables/layer.ts

@@ -8,9 +8,10 @@ interface MapOptions {
   iconSize: [number, number],
 }
 export interface MappablePoint {
-  latitude: number;
-  longitude: number;
-  heading?: number;
+  latitude: number | null;
+  longitude: number | null;
+  heading?: number | null;
+  enabled?: boolean;
 }
 
 // Create a custom divIcon with rotation
@@ -60,7 +61,12 @@ export function useReactiveMapLayer(map: Ref, reactivePoint: MappablePoint, opti
       reactivePoint.enabled ? startPulse() : pausePulse();
     }
 
-    if ('heading' in reactivePoint && reactivePoint.heading !== undefined) {
+    if (
+      reactivePoint.latitude &&
+      reactivePoint.longitude &&
+      'heading' in reactivePoint &&
+      reactivePoint.heading !== undefined
+    ) {
       // Also render a directional arrow showing inferred compass heading
       var arrowMarker = L.marker([reactivePoint.latitude, reactivePoint.longitude], {
         icon: arrowIcon,

src/state/beacon.test.ts

@@ -4,11 +4,7 @@ import { myLocation } from '../state/location';
 
 describe("beacon", () => {
   it("should calculate on/off course", () => {
-    beacon.set({
-      name: "Washington Monument",
-      latitude: 38.889444,
-      longitude: -77.035278,
-    });
+    beacon.set("Washington Monument", 38.889444, -77.035278);
     beacon.enable();
 
     // US Capitol (due east of monument)
@@ -27,21 +23,14 @@ describe("beacon", () => {
   });
 
   it("should recognize nearby threshold", () => {
-    beacon.set({
-      name: "Washington Monument",
-      latitude: 38.889444,
-      longitude: -77.035278,
-    });
+    beacon.set("Washington Monument", 38.889444, -77.035278);
     beacon.enable();
 
     // US Capitol (due east of monument)
     myLocation.setLocation(38.889722, -77.008889);
     expect(isNearby.value).to.be.false;
 
-    myLocation.setLocation(
-      beacon.location!.latitude,
-      beacon.location!.longitude
-    );
+    myLocation.setLocation(beacon.latitude!, beacon.longitude!);
     expect(isNearby.value).to.be.true;
     //FIXME Beacon should be auto-disabled when we're nearME
     //expect(beacon.enabled).to.be.false;

src/state/beacon.ts

@@ -3,37 +3,42 @@
 import { point } from '@turf/turf';
 import { computed, reactive, watch } from 'vue';
 import { distanceTo, normalizedRelativePositionTo } from '../state/location';
+import { MappablePoint } from '../composables/layer';
 
 const onCourseAngle = 30; // degrees +/- Y axis
 const foundProximityMeters = 10; // proximity to auto-stop beacon
 
-interface BeaconLocation {
-  name: string;
-  latitude: number;
-  longitude: number;
-}
-
-interface BeaconState {
-  location: BeaconLocation | null;
+interface BeaconState extends MappablePoint {
+  name: string | null;
+  latitude: number | null;
+  longitude: number | null;
   lastAnnouncedDistance: number | null;
   enabled: boolean;
 
-  set: (location: BeaconLocation) => void;
+  set: (name: string, latitude: number, longitude: number) => void;
   clear: () => void;
   enable: () => void;
   disable: () => void;
 }
 export const beacon = reactive<BeaconState>({
-  location: null,
+  name: null,
+  latitude: null,
+  longitude: null,
   lastAnnouncedDistance: null,
   enabled: false,
 
-  set(location: BeaconLocation) {
-    this.location = location;
+  set(name: string, latitude: number, longitude: number) {
+    this.name = name;
+    this.longitude = longitude;
+    this.latitude = latitude;
     this.lastAnnouncedDistance = null;
   },
 
-  clear() { this.location = null; },
+  clear() {
+    this.name = null;
+    this.longitude = null;
+    this.latitude = null;
+  },
 
   enable() {
     this.enabled = true;
@@ -46,8 +51,8 @@ export const beacon = reactive<BeaconState>({
 
 // Turf.js point of the beacon's location
 const sourceLocation = computed(() => {
-  if (beacon.location) {
-    return point([beacon.location.longitude, beacon.location.latitude]);
+  if (beacon.longitude && beacon.latitude) {
+    return point([beacon.longitude, beacon.latitude]);
   }
 });
 

src/state/location.ts

@@ -4,8 +4,9 @@
 import { Feature, Point } from 'geojson';
 import { distance, point } from '@turf/turf';
 import { computed, reactive } from 'vue';
+import { MappablePoint } from '../composables/layer';
 
-interface MyLocation {
+interface MyLocation extends MappablePoint {
   latitude: number | null;
   longitude: number | null;
   heading: number | null;

src/views/DetailView.vue

@@ -20,7 +20,7 @@
 
   <MapDisplay
     :location="myLocation"
-    :beacon="beacon.location"
+    :beacon="beacon"
     :pointOfInterest="pointOfInterest"
     :follow="false"
   />
@@ -29,6 +29,7 @@
 <script setup lang="ts">
 import MapDisplay from '../components/MapDisplay.vue';
 import SubpageTopbar from '../components/SubpageTopbar.vue';
+import { MappablePoint } from '../composables/layer';
 import { beacon } from '../state/beacon';
 import { myLocation, distanceTo } from '../state/location'
 import { point } from '@turf/helpers';
@@ -42,7 +43,7 @@ interface DetailProps {
 const props = defineProps<DetailProps>();
 
 const fullUrl = ref<string>('');
-const pointOfInterest = reactive({
+const pointOfInterest: MappablePoint = reactive({
   latitude: props.lat,
   longitude: props.lon,
 });
@@ -80,11 +81,7 @@ const toggleBeacon = () => {
   if (beacon.enabled) {
     beacon.disable();
   } else {
-    beacon.set({
-      name: props.name,
-      latitude: props.lat,
-      longitude: props.lon
-    });
+    beacon.set(props.name, props.lat, props.lon);
     beacon.enable();
   }
 }

src/views/MainView.vue

@@ -18,7 +18,7 @@
   <main>
     <MapDisplay
       :location="myLocation"
-      :beacon="beacon.location"
+      :beacon="beacon"
     />
     <CalloutList :callouts="recentCallouts" />
   </main>