Provide authorisation details to Deck.gl layers.

Those layers that call API endpoints directly no longer need to
rely on cookies as they use the JWT token directly via the
`Authorization` header.

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

@@ -121,6 +121,21 @@ export default {
       };
     },
 
+    loadOptions (options = {}) {
+      return {
+        loadOptions: {
+          fetch: {
+            method: 'GET',
+            headers: {
+              'Authorization': `Bearer ${this.$store.getters.jwt}`,
+            }
+          },
+          ...options
+        },
+      };
+
+    },
+
 
     osmLayer (options = {}) {
       return new TileLayer({
@@ -243,7 +258,8 @@ export default {
     vesselTrackPointsLayer (options = {}) {
       return new ScatterplotLayer({
         id: 'navp',
-        data: `/api/navdata?limit=10000`,
+        data: `/api/navdata?limit=100`,
+        ...this.loadOptions(),
         getPosition: (d) => ([d.longitude, d.latitude]),
         getRadius: d => (d.speed),
         radiusScale: 1,
@@ -269,6 +285,7 @@ export default {
       return new LineLayer({ // TODO Change to TrackLayer
         id: 'navl',
         data: `/api/navdata?v=${Date.now()}`, // NOTE Not too sure about this
+        ...this.loadOptions(),
         lineWidthMinPixels: 2,
         getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
         getSourcePosition: (obj, i) => i.index < i.data?.length ? [i.data[i.index]?.longitude, i.data[i.index]?.latitude] : null,
@@ -308,6 +325,7 @@ export default {
       return new DougalEventsLayer({
         id: 'log',
         data: `/api/project/${this.$route.params.project}/event?mime=application/geo%2Bjson`,
+        ...this.loadOptions(),
         lineWidthMinPixels: 2,
         getPosition: d => d.geometry.coordinates,
         jitter: 0.00015,
@@ -332,6 +350,7 @@ export default {
       return new GeoJsonLayer({
         id: 'psll',
         data: `/api/project/${this.$route.params.project}/gis/preplot/line?class=V&v=${this.lineTStamp?.valueOf()}`,
+        ...this.loadOptions(),
         lineWidthMinPixels: 1,
         getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
         getLineWidth: 1,
@@ -347,6 +366,7 @@ export default {
       return new GeoJsonLayer({
         id: 'ppll',
         data: `/api/project/${this.$route.params.project}/gis/preplot/line?v=${this.lineTStamp?.valueOf()}`,
+        ...this.loadOptions(),
         lineWidthMinPixels: 1,
         getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
         getLineWidth: 1,
@@ -393,6 +413,7 @@ export default {
       return new GeoJsonLayer({
         id: 'seqrl',
         data: `/api/project/${this.$route.params.project}/gis/raw/line?v=${this.sequenceTStamp?.valueOf()}`,
+        ...this.loadOptions(),
         lineWidthMinPixels: 1,
         getLineColor: (d) => d.properties.ntbp ? [0xe6, 0x51, 0x00, 200] : [0xff, 0x98, 0x00, 200],
         getLineWidth: 1,
@@ -408,6 +429,7 @@ export default {
       return new GeoJsonLayer({
         id: 'seqfl',
         data: `/api/project/${this.$route.params.project}/gis/final/line?v=${this.sequenceTStamp?.valueOf()}`,
+        ...this.loadOptions(),
         lineWidthMinPixels: 1,
         getLineColor: (d) => d.properties.pending ? [0xa7, 0xff, 0xab, 200] : [0x00, 0x96, 0x88, 200],
         getLineWidth: 1,
@@ -424,12 +446,15 @@ export default {
         id: 'pslp',
         data: `/api/project/${this.$route.params.project}/line/sail?v=${this.lineTStamp?.valueOf()}`, // API endpoint returning binary data
         loaders: [DougalBinaryLoader],
-        loadOptions: {
+        ...this.loadOptions({
           fetch: {
             method: 'GET',
-            headers: { Accept: 'application/vnd.aaltronav.dougal+octet-stream' }
+            headers: {
+              Authorization: `Bearer ${this.$store.getters.jwt}`,
+              Accept: 'application/vnd.aaltronav.dougal+octet-stream'
+            }
           }
-        },
+        }),
         getRadius: 2,
         getFillColor: (d, {data, index}) => data.attributes.value2.value[index] ? [240, 248, 255, 200] : [85, 170, 255, 200],
         //getFillColor: [0, 120, 220, 200],
@@ -443,12 +468,15 @@ export default {
         id: 'pplp',
         data: `/api/project/${this.$route.params.project}/line/source?v=${this.lineTStamp?.valueOf()}`, // API endpoint returning binary data
         loaders: [DougalBinaryLoader],
-        loadOptions: {
+        ...this.loadOptions({
           fetch: {
             method: 'GET',
-            headers: { Accept: 'application/vnd.aaltronav.dougal+octet-stream' }
+            headers: {
+              Authorization: `Bearer ${this.$store.getters.jwt}`,
+              Accept: 'application/vnd.aaltronav.dougal+octet-stream'
+            }
           }
-        },
+        }),
         getRadius: 2,
         getFillColor: (d, {data, index}) => data.attributes.value2.value[index] ? [240, 248, 255, 200] : [85, 170, 255, 200],
         //getFillColor: [0, 120, 220, 200],