Implement planned lines layer

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

@@ -3,7 +3,7 @@
 // https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
 
 import { Deck, WebMercatorViewport, FlyToInterpolator, CompositeLayer } from '@deck.gl/core';
-import { GeoJsonLayer, LineLayer, BitmapLayer, ScatterplotLayer, ColumnLayer, IconLayer } from '@deck.gl/layers';
+import { GeoJsonLayer, LineLayer, PathLayer, BitmapLayer, ScatterplotLayer, ColumnLayer, IconLayer } from '@deck.gl/layers';
 import {HeatmapLayer} from '@deck.gl/aggregation-layers';
 import { TileLayer, MVTLayer } from '@deck.gl/geo-layers';
 
@@ -325,21 +325,34 @@ export default {
     },
 
     plannedLinesLinesLayer (options = {}) {
-      return new LineLayer({
-        id: 'plan',
-        data: `/api/project/${this.$route.params.project}/plan`,
-        widthMinPixels: 2,
-        widthUnits: "pixels",
-        getSourcePosition: d => d.geometry.coordinates[0],
-        getTargetPosition: d => d.geometry.coordinates[1],
-        getLineWidth: 8,
+      return new PathLayer({
+        id: 'planl',
+        data: [...this.plannedSequences], // Create new array to trigger Deck.gl update
+        dataTransform: (sequences) => {
+          // Raise the data 10 m above ground so that it's visible over heatmaps, etc.
+          return sequences.map( seq => ({
+            ...seq,
+            geometry: {
+              ...seq.geometry,
+              coordinates: seq.geometry.coordinates.map( pos => [...pos, 10] )
+            }
+          }))
+        },
+        getPath: d => d.geometry.coordinates,
+        //getSourcePosition: d => d.geometry.coordinates[0],
+        //getTargetPosition: d => d.geometry.coordinates[1],
+        widthUnits: "meters",
+        widthMinPixels: 4,
+        getWidth: 25,
+        //getLineWidth: 10,
         getColor: (d) => {
-          const k = d.azimuth/360*255;
+          const k = (d?.azimuth??0)/360*255;
           return [ k, 128, k, 200 ];
         },
+        stroked: true,
         pickable: true,
         ...options
-      })
+      });
     },
 
     rawSequencesLinesLayer (options = {}) {

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

@@ -22,7 +22,7 @@ export default {
         return this.preplotPointsTooltip(args);
       } else if (args?.layer?.id == "ppll" || args?.layer?.id == "psll") {
         return this.preplotLinesTooltip(args);
-      } else if (args?.layer?.id == "plan") {
+      } else if (args?.layer?.id == "planl") {
         return this.plannedLinesTooltip(args);
       } else if (args?.layer?.id == "seqrl" || args?.layer?.id == "seqfl") {
         return this.sequenceLinesTooltip(args);
@@ -173,13 +173,13 @@ export default {
         let html = `Planned sequence <b>${p.sequence}</b></br>\n` +
           `Line <b>${p.line}</b> – ${p.name}</br>\n` +
           `${p.num_points} Points</br>\n` +
-          `${p.length} m ${p.azimuth.toFixed(2)}°</br>\n` +
+          `${p.length.toFixed(0)} m ${p.azimuth.toFixed(2)}°</br>\n` +
           `${duration} @ ${speed.toFixed(1)} kt</br>\n` +
           `<b>${p.fsp}</b> @ ${(new Date(p.ts0))?.toISOString()}</br>\n` +
           `<b>${p.lsp}</b> @ ${(new Date(p.ts1))?.toISOString()}`;
 
           if (p.remarks) {
-            html += `</br>\n<hr/>${p.remarks}`;
+            html += `</br>\n<hr/>${this.$root.markdown(p.remarks)}`;
           }
 
         return {html, style: this.tooltipDefaultStyle};