Add real-time position to map

lib/www/client/source/src/views/Map.vue

@@ -20,6 +20,7 @@
 
 <script>
 import L from 'leaflet'
+import 'leaflet-realtime'
 import { mapActions, mapGetters } from 'vuex';
 import ftstamp from '@/lib/FormatTimestamp'
 import zoomFitIcon from '@/assets/zoom-fit-best.svg'
@@ -65,6 +66,11 @@ const layers = {
         fillOpacity: 0.8
       });
     },
+    style (feature) {
+      return {
+        opacity: 0.5
+      }
+    },
     onEachFeature (feature, layer) {
       const popup = feature.geometry.type == "Point"
         ? `Preplot<br/>Point <b>${feature.properties.line} / ${feature.properties.point}</b>`
@@ -128,9 +134,86 @@ const layers = {
 //        : `Final sequence ${feature.properties.sequence}<br/>Line <b>${feature.properties.line}</b><br/>${feature.properties.num_points} points<br/>From ${feature.properties.ts0}<br/>until ${feature.properties.ts0}`;
       layer.bindTooltip(popup, {sticky: true});
     }
+  }),
+
+  "Real-time": L.realtime({
+    url: '/api/navdata/gis/point?limit=1',
+    type: 'json'
+  }, {
+    interval: 6 * 1000,
+    getFeatureId (feature) {
+      return feature.properties.vesselName || feature.properties.vesselId;
+    },
+    pointToLayer (point, latlng) {
+      return L.circle(latlng, {
+        radius: 30,
+        color: "magenta",
+        stroke: false,
+        fillOpacity: 0.8
+      });
+    },
+    style (feature) {
+      return {
+        color: "magenta",
+        opacity: 0.5
+      }
+    },
+    onEachFeature (feature, layer) {
+      layer.bindPopup(function () {
+        return makeRealTimePopup(feature.properties);
+      });
+    }
+  }),
+
+  "Real-time (trail)": L.realtime({
+    url: '/api/navdata/gis/line?limit=10000',
+    type: 'json'
+  }, {
+    interval: 60 * 1000,
+    style (feature) {
+      return {
+        color: "magenta",
+        opacity: 0.5
+      }
+    }
   })
 };
 
+
+layers["Real-time"].on('update', function (e) {
+  console.log("update", Object.keys(e.features));
+  Object.keys(e.features).forEach( (id) => {
+    console.log("Updated", id, this);
+    const feature = e.features[id];
+    this.getLayer(id).bindPopup(makeRealTimePopup(feature.properties));
+  });
+}, this);
+
+function makeRealTimePopup(p) {
+  const online = p._online
+    ? `
+      <table>
+        <tr><td><b>Line name:</b></td><td>${p.lineName}</td></tr>
+        <tr><td><b>Sequence:</b></td><td>${p._sequence}</td></tr>
+        <tr><td><b>Line:</b></td><td>${p._line}</td></tr>
+        <tr><td><b>Shot:</b></td><td>${p._point}</td></tr>
+        <tr><td><b>Crossline:</b></td><td>${p.crossline || "???"} m</td></tr>
+        <tr><td><b>Inline:</b></td><td>${p.inline || "???"} m</td></tr>
+      </table>
+    `
+    : "";
+  const popup = `
+    Position as of ${p.tstamp}<br/><hr/>
+    ${online}
+    <table>
+      <tr><td><b>Speed:</b></td><td>${p.speed ? p.speed*3.6/1.852 : "???"} kt</td></tr>
+      <tr><td><b>CMG:</b></td><td>${p.cmg || "???"}°</td></tr>
+      <tr><td><b>Water depth:</b></td><td>${p.waterDepth || "???"} m</td></tr>
+    </table>
+  `
+  return popup;
+}
+
 export default {
   name: "Map",