Make uncertainty circles update dynamically

kort7/app.js

@@ -146,6 +146,55 @@ function getPresenceState(lat, lon, uncertaintyM) {
   };
 }
 
+function ensureUncertaintyCircle(v) {
+  if (v.uncertaintyCircle || v.current.uncertaintyM <= 0) {
+    return;
+  }
+
+  v.uncertaintyCircle = L.circle([v.displayLat, v.displayLon], {
+    radius: v.current.uncertaintyM,
+    color: v.color,
+    weight: 2,
+    dashArray: "6,6",
+    opacity: 0.7,
+    fillColor: v.color,
+    fillOpacity: 0.08,
+    interactive: false
+  }).addTo(map);
+}
+
+function syncUncertaintyCircle(v) {
+  if (v.current.uncertaintyM > 0) {
+    ensureUncertaintyCircle(v);
+  }
+
+  if (!v.uncertaintyCircle) {
+    return;
+  }
+
+  if (v.current.uncertaintyM <= 0) {
+    if (map.hasLayer(v.uncertaintyCircle)) {
+      map.removeLayer(v.uncertaintyCircle);
+    }
+    return;
+  }
+
+  if (!map.hasLayer(v.uncertaintyCircle)) {
+    v.uncertaintyCircle.addTo(map);
+  }
+
+  v.uncertaintyCircle.setLatLng([v.displayLat, v.displayLon]);
+  v.uncertaintyCircle.setRadius(v.current.uncertaintyM);
+
+  if (v.presenceState === "inside") {
+    v.uncertaintyCircle.setStyle({ opacity: 0.7, fillOpacity: 0.08 });
+  } else if (v.presenceState === "possible") {
+    v.uncertaintyCircle.setStyle({ opacity: 0.35, fillOpacity: 0.03 });
+  } else {
+    v.uncertaintyCircle.setStyle({ opacity: 0.15, fillOpacity: 0.01 });
+  }
+}
+
 const vehicleEvents = buildVehicleBuckets(VEHICLE_EVENTS);
 const vehicleNames = Object.keys(vehicleEvents);
 
@@ -174,7 +223,8 @@ for (const name of vehicleNames) {
       dashArray: "6,6",
       opacity: 0.7,
       fillColor: color,
-      fillOpacity: 0.08
+      fillOpacity: 0.08,
+      interactive: false
     }).addTo(map);
   }
 
@@ -232,11 +282,7 @@ function resetDemo() {
     v.trail.setLatLngs([[first.lat, first.lon]]);
     v.trail.setStyle({ opacity: 0.85 });
 
-    if (v.uncertaintyCircle) {
+    syncUncertaintyCircle(v);
-      v.uncertaintyCircle.setLatLng([first.lat, first.lon]);
-      v.uncertaintyCircle.setRadius(first.uncertaintyM);
-      v.uncertaintyCircle.setStyle({ opacity: 0.7, fillOpacity: 0.08 });
-    }
 
     if (!map.hasLayer(v.marker)) {
       v.marker.addTo(map);
@@ -314,18 +360,7 @@ function updateVehicleDisplay(v) {
 
   v.marker.setPopupContent(popupHtml(v.name, v));
 
-  if (v.uncertaintyCircle) {
+  syncUncertaintyCircle(v);
-    v.uncertaintyCircle.setLatLng([lat, lon]);
-    v.uncertaintyCircle.setRadius(v.current.uncertaintyM);
-
-    if (presence.code === "inside") {
-      v.uncertaintyCircle.setStyle({ opacity: 0.7, fillOpacity: 0.08 });
-    } else if (presence.code === "possible") {
-      v.uncertaintyCircle.setStyle({ opacity: 0.35, fillOpacity: 0.03 });
-    } else {
-      v.uncertaintyCircle.setStyle({ opacity: 0.15, fillOpacity: 0.01 });
-    }
-  }
 }
 
 function updateAlerts() {