diff --git a/lib/www/client/source/package.json b/lib/www/client/source/package.json
index 93b333c..daa2c6c 100644
--- a/lib/www/client/source/package.json
+++ b/lib/www/client/source/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@deck.gl/aggregation-layers": "^9.1.13",
     "@deck.gl/geo-layers": "^9.1.13",
+    "@dougal/binary": "file:../../../modules/@dougal/binary",
     "@dougal/concurrency": "file:../../../modules/@dougal/concurrency",
     "@dougal/organisations": "file:../../../modules/@dougal/organisations",
     "@dougal/user": "file:../../../modules/@dougal/user",
diff --git a/lib/www/client/source/src/views/Map.vue b/lib/www/client/source/src/views/Map.vue
index bdc6dec..1e03b12 100644
--- a/lib/www/client/source/src/views/Map.vue
+++ b/lib/www/client/source/src/views/Map.vue
@@ -19,8 +19,8 @@
           <input id="lyr-sea" type="checkbox" value="sea" v-model="layerSelection"/>
           <label for="lyr-sea">OpenSeaMap</label>
 
-          <input id="lyr-nau" type="checkbox" value="nau" v-model="layerSelection"/>
-          <label for="lyr-nau" title="Scan of Norway's nautical charts">Nautical charts (NO)</label>
+          <input id="lyr-nau" type="checkbox" value="nau" v-model="layerSelection" disabled/>
+          <label for="lyr-nau" title="Scan of Norway's nautical charts – CURRENTLY UNAVAILABLE" disabled>Nautical charts (NO)</label>
         </form>
 
         <hr class="my-2"/>
@@ -35,7 +35,7 @@
           <label><!-- No heatmap available --></label>
 
           <span>Sail lines</span>
-          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="pslp" v-model="layerSelection"/></label>
+          <label title="Show points" disabled><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="pslp" v-model="layerSelection"/></label>
           <label title="Show lines" disabled><v-icon small left class="mx-0">mdi-vector-line</v-icon> <input type="checkbox" value="psll" v-model="layerSelection"/></label>
           <label><!-- No heatmap available --></label>
 
@@ -330,26 +330,15 @@
 
 <script>
 
+import MapLayersMixin from './MapLayersMixin';
+import MapTooltipsMixin from './MapTooltipsMixin';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import ftstamp from '@/lib/FormatTimestamp'
 import zoomFitIcon from '@/assets/zoom-fit-best.svg'
-import { markdown, markdownInline } from '@/lib/markdown';
 
-import { Deck, WebMercatorViewport, FlyToInterpolator, CompositeLayer } from '@deck.gl/core';
-import { GeoJsonLayer, LineLayer, BitmapLayer, ScatterplotLayer, IconLayer } from '@deck.gl/layers';
-import {HeatmapLayer} from '@deck.gl/aggregation-layers';
-import { TileLayer, MVTLayer } from '@deck.gl/geo-layers';
-import * as d3a from 'd3-array';
+import { Deck, FlyToInterpolator } from '@deck.gl/core';
+import { IconLayer } from '@deck.gl/layers';
+import { DougalBinaryBundle, DougalBinaryChunkSequential, DougalBinaryChunkInterleaved } from '@dougal/binary';
 
-//import { json } from 'd3-fetch';
-
-import { SequenceDataLayer } from '@/lib/deck.gl';
-import { unbundle, unpack, toJSON, isLittleEndian } from '@/lib/binary';
-
-// Important info about performance:
-// https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
-
-const endianness = isLittleEndian();
 let deck;
 
 /* Decoded SVG:
@@ -363,6 +352,11 @@ const hashMarkerIconURL = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d
 export default {
   name: "Map",
 
+  mixins: [
+    MapLayersMixin,
+    MapTooltipsMixin
+  ],
+
   components: {
 
   },
@@ -415,6 +409,89 @@ export default {
 
   computed: {
 
+    sequenceData () {
+      return this.sequenceDataElements?.map( el => el.data );
+    },
+
+    sequenceBinaryData () {
+      return this.sequenceDataElements?.sort( (a, b) => a-b )?.map( ({data}) => {
+
+        const bundle = DougalBinaryBundle.clone(data);
+
+        // Total point count
+        const totalCount = bundle.chunks().reduce( (acc, cur) => acc += cur.jCount, 0 );
+
+        // There is an implicit assumption that all chunks in a bundle
+        // have the same ΔelemCount, elemCount, and udv.
+        const ΔelemCount = bundle.chunks()[0].ΔelemCount;
+        const elemCount = bundle.chunks()[0].elemCount;
+        const udv = bundle.chunks()[0].udv;
+
+        const ΣelemCount = ΔelemCount + elemCount + 2;
+
+        const values = new Array(ΣelemCount);
+        values[0] = new Uint16Array(totalCount); // i values
+        values[1] = new Uint32Array(totalCount); // j values
+
+        const positions = new Float32Array(totalCount*2);
+
+        console.log(`totalCount = ${totalCount}, ΔelemCount = ${ΔelemCount}, elemCount = ${elemCount}, ΣelemCount = ${ΣelemCount}`);
+
+        let offset = 0;
+        for (const chunk of bundle.chunks()) {
+          let k = 0;
+
+          console.log(`offset = ${offset}, k = ${k}, jCount = ${chunk.jCount}`);
+          // Populate the positions, which are assumed to always be at indices 0, 1
+
+          const λarray = chunk.elem(0);
+          const φarray = chunk.elem(1);
+
+          // Interleave lons and lats
+          for (let i = 0; i < λarray.length; i++) {
+            positions[offset*2 + i*2] =   λarray[i];
+            positions[offset*2 + i*2+1] = φarray[i]
+          }
+
+
+          // Populate the i values
+          //console.log(`values[${k}]: ${values[k] ? "✔" : "✘"}`);
+          values[k++].set((new Uint16Array(chunk.jCount)).fill(chunk.i), offset);
+
+          // Populate the j values
+          //console.log(`values[${k}]: ${values[k] ? "✔" : "✘"}`);
+          values[k++].set(Uint32Array.from({length: chunk.jCount}, (_, i) => chunk.j0 + i * chunk.Δj), offset);
+
+
+          // Populate values with each of Δelem first followed by elem
+
+          for (let j = 0; j < ΔelemCount; j++) {
+            const buffer = chunk.Δelem(j);
+            //console.log(`values[${k}]: ${values[k] ? "✔" : "✘"}`);
+            //console.log(`values[${k}] ← ΔelemCount(${j}) ${buffer.constructor.name}`);
+            if (!values[k]) values[k] = new buffer.constructor(totalCount);
+            values[k++].set(buffer, offset);
+          }
+
+          // Start at 2 as 0, 1 are assumed to be λ, φ
+          for (let j = 2; j < elemCount; j++) {
+            const buffer = chunk.elem(j);
+            //console.log(`values[${k}]: ${values[k] ? "✔" : "✘"}`);
+            //console.log(`values[${k}] ← elemCount(${j}) ${buffer.constructor.name}`);
+            if (!values[k]) values[k] = new buffer.constructor(totalCount);
+            values[k++].set(buffer, offset);
+          }
+
+          offset += chunk.jCount;
+
+          if (offset > totalCount) throw new Error('Overflow condition: offset > totalCount');
+        }
+
+        return { positions, values, udv };
+      });
+    },
+
+    /*
     sequenceDataPreplots () {
       return {
         tstamp: this.sequenceDataTStamp,
@@ -443,7 +520,9 @@ export default {
         sequences: this.sequenceDataElements.filter(fn)
       };
     },
+    */
 
+    /*
     fullProspectRaw () {
       // Get raw data, so type = "R"
       const sequences = this.sequenceDataElements.filter( i => i.type == "R" );
@@ -455,6 +534,7 @@ export default {
       const sequences = this.sequenceDataElements.filter( i => i.type == "F" );
       return [...sequences.map( i => toJSON(i.data) )].flat();
     },
+    */
 
     ...mapGetters(['user', 'loading', 'serverEvent', 'lineName', 'serverEvent']),
     ...mapState({projectSchema: state => state.project.projectSchema})
@@ -528,17 +608,23 @@ export default {
       }
     },
 
-    zoomReset () {
+    zoomReset() {
       if (deck) {
-        const bounds = this.sequencesBBox();
+        const bounds = this.getBBox(deck);
         if (bounds) {
-          const layer = deck.layerManager.layers[0]; // Get the first layer we come across
-          const initialViewState = {...this.viewStateDefaults, ...layer.context.viewport.fitBounds(bounds)};
-          initialViewState.transitionDuration = 500;
-          deck.setProps({initialViewState});
+          const viewport = deck.getViewports()[0];
+          const newViewState = {
+            ...this.viewStateDefaults,
+            ...viewport.fitBounds(bounds)
+          };
+          newViewState.transitionDuration = 500;
+          newViewState.transitionInterpolator = new FlyToInterpolator();
+          deck.setProps({ initialViewState: newViewState });
+        } else {
+          console.warn('Unable to calculate bounding box');
         }
       } else {
-        console.warn("Unable to calculate bounding box");
+        console.warn('Deck instance not available');
       }
     },
 
@@ -571,37 +657,166 @@ export default {
       this.getSequenceData();
     },
 
-    sequencesBBox (margin = 0.1) {
-      let [ λ0, φ0, λ1, φ1 ] = [ +Infinity, +Infinity, -Infinity, -Infinity ];
+    getBBox(deck, margin = 0.1) {
+      if (!deck || !deck.layerManager) {
+        console.warn('Invalid deck instance or layer manager');
+        return null;
+      }
 
-      // FIXME Temporary fix to get this working again, but this.fullProspectRaw /
-      // this.fullProspectFinal are not intended to remain as JSON data.
+      let λ0 = +Infinity, φ0 = +Infinity, λ1 = -Infinity, φ1 = -Infinity;
 
-      const data = this.fullProspectRaw ?? this.fullProspectFinal;
+      const nonTileLayerTypes = ['ScatterplotLayer', 'GeoJsonLayer', 'LineLayer', 'IconLayer', 'DougalSequenceLayer'];
 
-      if (data) {
-        for (const i of data) {
-          const λ = i.longitude;
-          const φ = i.latitude;
-          λ0 = Math.min(λ0, λ);
-          φ0 = Math.min(φ0, φ);
-          λ1 = Math.max(λ1, λ);
-          φ1 = Math.max(φ1, φ);
+      deck.layerManager.layers.forEach(layer => {
+        // Skip tile-based layers
+        if (['TileLayer', 'MVTLayer'].includes(layer.constructor.layerName)) {
+          return;
         }
 
-        const δλ = λ1 - λ0;
-        const δφ = φ1 - φ0;
-        const mλ = δλ * margin;
-        const mφ = δφ * margin;
+        // Only process visible layers
+        if (!layer.props.visible || !nonTileLayerTypes.includes(layer.constructor.layerName)) {
+          return;
+        }
 
-        return [ [λ0-mλ, φ0-mφ], [λ1+mλ, φ1+mφ] ];
+        let data = layer.props.data;
+
+        // Handle DougalSequenceLayer (CompositeLayer)
+        if (layer.constructor.layerName === 'DougalSequenceLayer') {
+          // Iterate over sequence data (array of {positions, values, udv})
+          data.forEach(({ positions }) => {
+            for (let i = 0; i < positions.length; i += 2) {
+              const lon = positions[i];
+              const lat = positions[i + 1];
+              if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                λ0 = Math.min(λ0, lon);
+                φ0 = Math.min(φ0, lat);
+                λ1 = Math.max(λ1, lon);
+                φ1 = Math.max(φ1, lat);
+              }
+            };
+          });
+        } else if (layer.constructor.layerName === 'ScatterplotLayer') {
+          // Direct point data (e.g., navp)
+          if (Array.isArray(data)) {
+            data.forEach(d => {
+              const [lon, lat] = layer.props.getPosition(d);
+              if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                λ0 = Math.min(λ0, lon);
+                φ0 = Math.min(φ0, lat);
+                λ1 = Math.max(λ1, lon);
+                φ1 = Math.max(φ1, lat);
+              }
+            });
+          } else if (data && data.attributes && data.attributes.getPosition) {
+            // Binary data (e.g., DougalSequenceLayer sublayers)
+            const positions = data.attributes.getPosition.value;
+            for (let i = 0; i < data.length * 2; i += 2) {
+              const lon = positions[i];
+              const lat = positions[i + 1];
+              if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                λ0 = Math.min(λ0, lon);
+                φ0 = Math.min(φ0, lat);
+                λ1 = Math.max(λ1, lon);
+                φ1 = Math.max(φ1, lat);
+              }
+            }
+          }
+        } else if (layer.constructor.layerName === 'GeoJsonLayer') {
+          // Extract points from GeoJSON features
+          let featureCollections = Array.isArray(data) ? data : [data]; // Handle both array and single object
+          featureCollections.forEach(item => {
+            let features = item;
+            if (item?.type === 'FeatureCollection') {
+              features = item.features || [];
+            }
+            if (Array.isArray(features)) {
+              features.forEach(feature => {
+                if (feature.geometry?.type === 'Point') {
+                  const [lon, lat] = feature.geometry.coordinates;
+                  if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                    λ0 = Math.min(λ0, lon);
+                    φ0 = Math.min(φ0, lat);
+                    λ1 = Math.max(λ1, lon);
+                    φ1 = Math.max(φ1, lat);
+                  }
+                } else if (feature.geometry?.type === 'LineString') {
+                  feature.geometry.coordinates.forEach(([lon, lat]) => {
+                    if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                      λ0 = Math.min(λ0, lon);
+                      φ0 = Math.min(φ0, lat);
+                      λ1 = Math.max(λ1, lon);
+                      φ1 = Math.max(φ1, lat);
+                    }
+                  });
+                } else if (feature.geometry?.type === 'Polygon') {
+                  feature.geometry.coordinates[0].forEach(([lon, lat]) => {
+                    if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                      λ0 = Math.min(λ0, lon);
+                      φ0 = Math.min(φ0, lat);
+                      λ1 = Math.max(λ1, lon);
+                      φ1 = Math.max(φ1, lat);
+                    }
+                  });
+                }
+              });
+            }
+          });
+        } else if (layer.constructor.layerName === 'LineLayer') {
+          // Extract source and target positions
+          if (Array.isArray(data)) {
+            data.forEach(d => {
+              const source = layer.props.getSourcePosition(d);
+              const target = layer.props.getTargetPosition(d);
+              if (source && source[0] != null && source[1] != null && isFinite(source[0]) && isFinite(source[1])) {
+                λ0 = Math.min(λ0, source[0]);
+                φ0 = Math.min(φ0, source[1]);
+                λ1 = Math.max(λ1, source[0]);
+                φ1 = Math.max(φ1, source[1]);
+              }
+              if (target && target[0] != null && target[1] != null && isFinite(target[0]) && isFinite(target[1])) {
+                λ0 = Math.min(λ0, target[0]);
+                φ0 = Math.min(φ0, target[1]);
+                λ1 = Math.max(λ1, target[0]);
+                φ1 = Math.max(φ1, target[1]);
+              }
+            });
+          }
+        } else if (layer.constructor.layerName === 'IconLayer') {
+          // Single point (e.g., crosshairs)
+          if (Array.isArray(data)) {
+            data.forEach(d => {
+              const [lon, lat] = layer.props.getPosition(d);
+              if (lon != null && lat != null && isFinite(lon) && isFinite(lat)) {
+                λ0 = Math.min(λ0, lon);
+                φ0 = Math.min(φ0, lat);
+                λ1 = Math.max(λ1, lon);
+                φ1 = Math.max(φ1, lat);
+              }
+            });
+          }
+        }
+      });
+
+      // Check if any valid points were found
+      if (!isFinite(λ0) || !isFinite(φ0) || !isFinite(λ1) || !isFinite(φ1)) {
+        console.warn('No valid coordinates found for non-tile layers');
+        return null;
       }
+
+      // Apply margin
+      const δλ = λ1 - λ0;
+      const δφ = φ1 - φ0;
+      const mλ = δλ * margin;
+      const mφ = δφ * margin;
+
+      return [[λ0 - mλ, φ0 - mφ], [λ1 + mλ, φ1 + mφ]];
     },
 
     async getSequenceData () {
 
-      const types = ["P", "R", "F"];
+      const types = ["p", "R", "F"];
       const sequenceList = await this.api([`/project/${this.$route.params.project}/sequence`]);
+      // FIXME if sequenceList is undefined the API call failed. It should error and maybe retry
       const sequenceNumbers = sequenceList.map(i => i.sequence);
       const sequenceCount = sequenceNumbers.length * types.length;
       let count = 0;
@@ -614,7 +829,8 @@ export default {
           const init = {
             format: "arrayBuffer",
             headers: {
-              Accept: "application/dougal-map-sequence+octet-stream"
+              //Accept: "application/vnd.aaltronav.dougal+octet-stream; format=1c"
+              Accept: "application/vnd.aaltronav.dougal+octet-stream"
             }
           };
 
@@ -633,29 +849,26 @@ export default {
             // Technically we do not need to await but this is
             // to slow down the cient and avoid firing too many
             // requests at once.
-            await self.api([url, init, cb, {cache: true}]);
+            self.api([url, init, cb, {cache: true}]);
           });
 
         }
 
         for (const sequence of sequenceNumbers) {
-          for (const type of types) {
-            try {
-              const url = `/project/${self.$route.params.project}/sequence/${sequence}?geometry=${type}${endianness ? "" : "&endianness=big"}`;
+          try {
+            const url = `/project/${self.$route.params.project}/sequence/${sequence}?type=2`;
 
-              const sequenceData = await download(url);
-              if (sequenceData) {
-                yield {
-                  id: `${sequence}-${sequenceData.etag}`,
-                  sequence: sequence,
-                  type,
-                  data: sequenceData.data
-                };
-              }
-            } catch (err) {
-              console.error(`Error downloading sequence ${sequence}`);
-              console.error(err);
+            const sequenceData = await download(url);
+            if (sequenceData) {
+              yield {
+                id: `seq-${sequence}`,
+                sequence: sequence,
+                data: sequenceData.data
+              };
             }
+          } catch (err) {
+            console.error(`Error downloading sequence ${sequence}`);
+            console.error(err);
           }
         }
       };
@@ -669,8 +882,87 @@ export default {
       console.log("passed for await", deck);
     },
 
+    dataChunks (lonIndex = 0, latIndex = 1, valueIndex = 1, udvFilter = null) {
+
+      // Collect data from all bundles across all buffers
+      let totalCount = 0;
+      const chunkData = [];
+      let elemCountChecked = false; // To validate indices against elemCount once
+      let minValue = Infinity;
+      let maxValue = -Infinity;
+      const chunkRecordMap = []; // For picking: map point indices to chunk and record index
+
+      for (const buffer of this.sequenceData) {
+        // Clone the buffer into our class
+        const bundle = DougalBinaryBundle.clone(buffer);
+
+        const chunks = bundle.chunks();
+
+        chunks.forEach(chunk => {
+          // Check udv filter
+          if (udvFilter !== null) {
+            let match = false;
+            if (Array.isArray(udvFilter)) {
+              match = udvFilter.includes(chunk.udv);
+            } else if (typeof udvFilter === 'function') {
+              match = udvFilter(chunk.udv);
+            } else {
+              match = chunk.udv === udvFilter;
+            }
+            if (!match) {
+              console.log(`Skipping chunk with udv=${chunk.udv}`);
+              return;
+            }
+          }
+
+          // Log chunk type for debugging
+          const chunkType = chunk instanceof DougalBinaryChunkSequential ? 'sequential (0x11)' : 'interleaved (0x12)';
+          console.log(`Processing chunk: type=${chunkType}, udv=${chunk.udv}, jCount=${chunk.jCount}`);
+
+          // Validate indices against chunk.elemCount (once, assuming consistent structure)
+          if (!elemCountChecked) {
+            const ec = chunk.elemCount;
+            if (lonIndex < 0 || lonIndex >= ec || latIndex < 0 || latIndex >= ec) {
+              throw new Error(`Invalid lonIndex (${lonIndex}) or latIndex (${latIndex}); must be between 0 and ${ec - 1}`);
+            }
+            if (valueIndex !== null && (valueIndex < 0 || valueIndex >= ec)) {
+              throw new Error(`Invalid valueIndex (${valueIndex}); must be between 0 and ${ec - 1}`);
+            }
+            elemCountChecked = true;
+          }
+
+          const lons = chunk.elem(lonIndex); // Float32Array
+          const lats = chunk.elem(latIndex); // Float32Array
+
+          let values = null;
+          if (valueIndex !== null) {
+            values = chunk.elem(valueIndex); // TypedArray for rendering value
+            // Clamp negative values for radius
+            for (let i = 0; i < values.length; i++) {
+              if (values[i] < 0) {
+                console.warn(`Negative value (${values[i]}) at valueIndex ${valueIndex}; clamping to 0 for radius`);
+                values[i] = 0;
+              }
+            }
+          }
+
+          const count = chunk.jCount;
+          // Map point indices to chunk and record index for picking
+          for (let i = 0; i < count; i++) {
+            chunkRecordMap[totalCount + i] = { chunk, recordIndex: i };
+          }
+          totalCount += count;
+
+          chunkData.push({ lons, lats, values, count });
+        });
+      }
+
+      // Update state with chunkRecordMap for getPickingInfo
+      return chunkRecordMap;
+    },
+
     async initLayers (gl) {
-      console.log("SHOULD BE INITIALISING LAYERS HERE", gl);
+      //console.log("SHOULD BE INITIALISING LAYERS HERE", gl);
       this.decodeURL();
       this.decodeURLHash();
       deck.onViewStateChange = this.updateURL;
@@ -785,6 +1077,14 @@ export default {
 
   async mounted () {
 
+
+    while (!Object.keys(this.$store.state.label.labels??{}).length) {
+      console.log("Waiting for labels…");
+      await this.$root.sleep(1000);
+      console.log("LABELS", this.$store.state.label.labels);
+    }
+
+
     if (!this.checkWebGLSupport()) {
       for (const countdown = 5; countdown > 0; countdown--) {
         if (countdown) {
@@ -815,313 +1115,29 @@ export default {
       [128, 0, 38]
     ];
 
-    this.layersAvailable.osm = (options = {}) => {
-      return new TileLayer({
-        id: "osm",
-        // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
-        data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    this.layersAvailable.osm = this.osmLayer;
 
-        minZoom: 0,
-        maxZoom: 19,
-        tileSize: 256,
+    this.layersAvailable.sea = this.openSeaMapLayer;
 
-        renderSubLayers: props => {
-          const {
-            bbox: {west, south, east, north}
-          } = props.tile;
+    this.layersAvailable.navp = this.vesselTrackPointsLayer;
 
-          return new BitmapLayer(props, {
-            data: null,
-            image: props.data,
-            bounds: [west, south, east, north]
-          });
-        },
-        ...options
-      })
-    }
+    this.layersAvailable.navl = this.vesselTrackLinesLayer;
 
-    /*
-    // OSM tiles layer. Handy to make water transparent
-    // but super reliable yet
+    this.layersAvailable.log = this.eventsLogLayer;
 
-    this.layersAvailable.osm = (options = {}) => {
-      return new MVTLayer({
-        id: 'osm',
-        data: 'https://vector.openstreetmap.org/shortbread_v1/{z}/{x}/{y}.mvt',
-        minZoom: 0,
-        maxZoom: 14,
-        getFillColor: feature => {
-          const layer = feature.properties.layerName;
-          //console.log("layer =", layer, feature.properties.kind);
-          switch (layer) {
-            case "ocean":
-              return [0, 0, 0, 0];
-            case "land":
-              return [ 0x54, 0x6E, 0x7A, 255 ];
-            default:
-              return [ 240, 240, 240, 255 ];
-          }
-        },
-        getLineColor: feature => {
-          if (feature.properties.layer === 'water') {
-            return [0, 0, 0, 0]; // No outline for water
-          }
-          return [192, 192, 192, 255]; // Default line color for roads, etc.
-        },
-        getLineWidth: feature => {
-          if (feature.properties.highway) {
-            return feature.properties.highway === 'motorway' ? 6 : 3; // Example road widths
-          }
-          return 1;
-        },
-        stroked: true,
-        filled: true,
-        pickable: true
-      });
-    }
-    */
+    this.layersAvailable.psll = this.preplotSaillinesLinesLayer;
 
+    this.layersAvailable.ppll = this.preplotLinesLayer;
 
-    /*
-    this.layersAvailable.nau = (options = {}) => {
-      return new TileLayer({
-        id: "nau",
-        // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
-        data: 'https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=sjokartraster&zoom={z}&x={x}&y={y}',
+    this.layersAvailable.planl = this.plannedLinesLinesLayer;
 
-        minZoom: 0,
-        maxZoom: 19,
-        tileSize: 256,
+    this.layersAvailable.seqrl = this.rawSequencesLinesLayer;
 
-        renderSubLayers: props => {
-          const {
-            bbox: {west, south, east, north}
-          } = props.tile;
+    this.layersAvailable.seqfl = this.finalSequencesLinesLayer;
 
-          return new BitmapLayer(props, {
-            data: null,
-            image: props.data,
-            bounds: [west, south, east, north]
-          });
-        },
-        ...options
-      })
-    }
-    */
+    this.layersAvailable.seqrp = this.rawSequencesPointsLayer;
 
-    this.layersAvailable.navp = (options = {}) => {
-      return new ScatterplotLayer({
-        id: 'navp',
-        data: `/api/navdata?limit=10000`,
-        getPosition: (d) => ([d.longitude, d.latitude]),
-        getRadius: d => (d.speed),
-        radiusScale: 1,
-        lineWidthMinPixels: 2,
-        getFillColor: d => d.guns
-          ? d.lineStatus == "online"
-            ? [0xaa, 0x00, 0xff] // Online
-            : [0xd5, 0x00, 0xf9] // Soft start or guns otherwise active
-          : [0xea, 0x80, 0xfc],  // Offline, guns inactive
-        getLineColor: [127, 65, 90],
-        getColor: [ 255, 0, 0 ],
-        getPointRadius: 12,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 4,
-        stroked: false,
-        filled: true,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.navl = (options = {}) => {
-      return new LineLayer({
-        id: 'navl',
-        data: `/api/navdata`,
-        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,
-        getTargetPosition: (obj, i) => i.index < i.data?.length ? [i.data[i.index+1]?.longitude, i.data[i.index+1]?.latitude] : null,
-        getLineWidth: 3,
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.sea = (options = {}) => {
-      return new TileLayer({
-        id: "sea",
-        data: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
-
-        minZoom: 0,
-        maxZoom: 19,
-        tileSize: 256,
-
-        renderSubLayers: props => {
-          const {
-            bbox: {west, south, east, north}
-          } = props.tile;
-
-          return new BitmapLayer(props, {
-            data: null,
-            image: props.data,
-            bounds: [west, south, east, north]
-          });
-        },
-        ...options
-      })
-    }
-
-    this.layersAvailable.log = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'log',
-        data: `/api/project/${this.$route.params.project}/event?mime=application/geo%2Bjson`,
-        lineWidthMinPixels: 2,
-        getLineColor: [127, 65, 90],
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.psll = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'psll',
-        data: `/api/project/${this.$route.params.project}/gis/preplot/line?class=V`,
-        lineWidthMinPixels: 1,
-        getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
-        getLineWidth: 1,
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.ppll = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'ppll',
-        data: `/api/project/${this.$route.params.project}/gis/preplot/line`,
-        lineWidthMinPixels: 1,
-        getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
-        getLineWidth: 1,
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.planl = (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,
-        getColor: (d) => {
-          const k = d.azimuth/360*255;
-          console.log("COLOUR", k);
-          return [ k, 128, k, 200 ];
-        },
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.seqrl = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'seqrl',
-        data: `/api/project/${this.$route.params.project}/gis/raw/line`,
-        lineWidthMinPixels: 1,
-        getLineColor: (d) => d.properties.ntbp ? [0xe6, 0x51, 0x00, 200] : [0xff, 0x98, 0x00, 200],
-        getLineWidth: 1,
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.seqfl = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'seqfl',
-        data: `/api/project/${this.$route.params.project}/gis/final/line`,
-        lineWidthMinPixels: 1,
-        getLineColor: (d) => d.properties.pending ? [0xa7, 0xff, 0xab, 200] : [0x00, 0x96, 0x88, 200],
-        getLineWidth: 1,
-        getPointRadius: 2,
-        radiusUnits: "pixels",
-        pointRadiusMinPixels: 2,
-        pickable: true,
-        ...options
-      })
-    };
-
-    this.layersAvailable.pplp = (options = {}) => {
-      return new SequenceDataLayer({
-        id: 'pplp',
-        data: this.sequenceDataPreplots,
-        pickable: true,
-        ...options
-      });
-    };
-
-    this.layersAvailable.seqrp = (options = {}) => {
-      return new SequenceDataLayer({
-        id: 'seqrp',
-        data: this.sequenceDataRaw,
-        pickable: true,
-        ...options
-      });
-    };
-
-    this.layersAvailable.seqfp = (options = {}) => {
-      return new SequenceDataLayer({
-        id: 'seqfp',
-        data: this.sequenceDataFinal,
-        pickable: true,
-        ...options
-      });
-    };
-
-    this.layersAvailable.seqrh = (options = {}) => {
-      return new HeatmapLayer({
-        id: 'seqrh',
-        data: this.fullProspectRaw,
-        radiusPixels: 15,
-        getPosition: d => [ d.longitude, d.latitude ],
-        getWeight: d => Math.sqrt(d.Δi**2 + d.Δj**2),
-        colorDomain: [2, 20],
-        aggregation: "MEAN",
-        pickable: false,
-        ...options
-      });
-    };
-
-    this.layersAvailable.seqfh = (options = {}) => {
-      return new HeatmapLayer({
-        id: 'seqfh',
-        data: this.fullProspectFinal,
-        radiusPixels: 15,
-        getPosition: d => [ d.longitude, d.latitude ],
-        getWeight: d => Math.sqrt(d.Δi**2 + d.Δj**2),
-        colorDomain: [2, 20],
-        aggregation: "MEAN",
-        pickable: false,
-        ...options
-      });
-    };
+    //this.layersAvailable.seqrp = this.rawSequencesPointsGunDataLayer;
 
     this.layersAvailable.crosshairs = (options = {}) => {
       return new IconLayer({
@@ -1152,158 +1168,13 @@ export default {
       },
       controller: {inertia: true},
       layers: [],
-      getTooltip,
+      getTooltip: this.getTooltip,
       pickingRadius: 24,
       onWebGLInitialized: this.initLayers
     });
 
-
-    function getTooltip (args) {
-      //console.log("tooltip", args?.layer?.constructor?.layerName, args);
-      if (args?.layer?.constructor?.tooltip) {
-
-        return args.layer.constructor.tooltip(args);
-
-      } else if (args?.layer?.id == "log") {
-
-        const p = args?.object?.properties;
-        if (p) {
-          let html = "";
-          if (p.sequence && p.point) {
-            html += `S${p.sequence.toString().padStart(3, "0")} ${p.point}</br>\n`;
-          }
-          html += `<small>${p.tstamp}</small><br/>\n`;
-          html += `<span>${p.remarks}</span>`;
-          if (p.labels?.length) {
-            html += `</br>\n<small><i>${p.labels.join(", ")}</i></small>`;
-          }
-
-          const style = { "max-width": "50ex"};
-
-          return {html, style};
-        }
-
-      } else if (args?.layer?.id == "pplp" || args?.layer?.id == "pslp") {
-
-        const p = args?.object?.properties;
-        const isSailline = args?.layer?.id == "psl";
-        if (p) {
-          let html = `${isSailline ? "Sail" : "Preplot"} line ${p.line} (${p.incr ? "+" : "-"})`;
-          if (p.ntba) {
-            html += ` <b title="Not to be acquired">NTBA</a>`;
-          }
-          if (p.remarks) {
-            html += `<br/>\n${p.remarks}`;
-          }
-
-          const style = { "max-width": "50ex"};
-
-          return {html, style};
-        }
-      } else if (args?.layer?.id == "plan") {
-
-        const p = args?.object;
-        if (p) {
-          const duration = `${(p.duration?.hours??0).toString().padStart(2, "0")}:${(p.duration?.minutes??0).toString().padStart(2, "0")}`;
-          const Δt = ((new Date(p.ts1)).valueOf() - (new Date(p.ts0)).valueOf()) / 1000; // seconds
-          const speed = (p.length / Δt) * 3.6 / 1.852; // knots
-
-          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` +
-            `${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}`;
-            }
-
-            const style = { "max-width": "50ex"};
-
-            return {html, style};
-        }
-
-      } else if (args?.layer?.id == "seqrl" || args?.layer?.id == "seqfl") {
-
-        let type;
-        switch(args.layer.id) {
-          case "seqrl":
-            type = "Raw";
-            break;
-          case "seqfl":
-            type = "Final";
-            break;
-        }
-
-        const p = args?.object?.properties;
-        if (p) {
-          let html = `Sequence ${p.sequence} (${type})<br/>\n`;
-          html += `Line <b>${p.line}</b><br/>\n`;
-          html += `${p.num_points} points (${p.missing_shots ? (p.missing_shots + " missing") : "None missing"})<br/>\n`;
-          html+= `${(p.length??0).toFixed(0)} m ${(p.azimuth??0).toFixed(1)}°<br/>\n`;
-          html += `${p.duration}<br/>\n`;
-          html += `<b>${p.fsp}</b> @ ${(new Date(p.ts0))?.toISOString()}<br/>\n`;
-          html += `<b>${p.lsp}</b> @ ${(new Date(p.ts1))?.toISOString()}<br/>\n`;
-          if (p.ntbp) {
-            html += "<b>Not to be processed</b><br/>\n";
-          } else if (p.pending) {
-            html += "<b>Pending</b><br/>\n";
-          }
-          html += "<hr/><br/>\n";
-          html += markdown(p.remarks);
-
-          const style = { "max-width": "50ex"};
-
-          return {html, style};
-        }
-      } else if (args?.layer?.id == "navp") {
-        const p = args.object;
-
-        if (p) {
-          let html = `${p.vesselName}<br/>\n`
-            + `${p.tstamp}<br/>\n`
-            + `BSP ${(p.speed??0).toFixed(1)} kt CMG ${(p.cmg??0).toFixed(1).padStart(5, "0")}° HDG ${(p.bearing??0).toFixed(1).padStart(5, "0")}° DPT ${(p.waterDepth??0).toFixed(1)} m<br/>\n`
-            + `${p.lineStatus}<br/>\n`;
-
-          if (p.guns) {
-            console.log(p);
-            const pressure = p.guns.map( i => i[11] ); // 11 is gun pressure
-            const μpress = d3a.mean(pressure);
-            const σpress = d3a.deviation(pressure);
-
-            if (p.lineStatus && p.lineStatus != "offline") {
-              html += `${p.lineName}<br/>\n`
-                + `S: ${p._sequence} L: ${p._line} P: ${p.shot}<br/>`
-                + `Source ${p.src_number} `
-                + ((p.trg_mode && p.trg_mode != "external") ? `<b>${p.trg_mode.toUpperCase()} TRIGGER</b> ` : "")
-                + `<small>FSID ${p.fsid}</small> <small>mask ${p.mask}</small><br/>\n`
-                + `Δ ${(p.avg_delta??0).toFixed(3)} ms ±${(p.std_delta??0).toFixed(3)} ms<br/>\n`
-                + `${(μpress??0).toFixed(0)} psi ±${(σpress??0).toFixed(0)} psi / ${(p.volume??0).toFixed(0)} in³<br/>\n`
-                + `along ${(p.inline??0).toFixed(1)} m / across ${(p.crossline??0).toFixed(1)} m<br/>\n`;
-            } else {
-              // Soft start?
-              html +=
-                  `Source ${p.src_number} `
-                + ((p.trg_mode && p.trg_mode != "external") ? `<b>${p.trg_mode.toUpperCase()} TRIGGER</b> ` : "")
-                + `<small>mask ${p.mask}</small><br/>\n`
-                + `Δ ${(p.avg_delta??0).toFixed(3)} ms ±${(p.std_delta??0).toFixed(3)} ms<br/>\n`
-                + `${(p.manifold??0).toFixed(0)} psi / ${(p.volume??0).toFixed(0)} in³<br/>\n`
-                + `along ${(p.inline??0).toFixed(1)} m / across ${(p.crossline??0).toFixed(1)} m<br/>\n`;
-            }
-          }
-
-            const style = { "max-width": "50ex"};
-
-            return {html, style};
-        }
-      }
-    }
-
     //this.layerSelection = [ "seq" ];
     this.getSequenceData();
-
   }
 
 }
diff --git a/lib/www/client/source/src/views/MapLayersMixin.vue b/lib/www/client/source/src/views/MapLayersMixin.vue
new file mode 100644
index 0000000..09565d2
--- /dev/null
+++ b/lib/www/client/source/src/views/MapLayersMixin.vue
@@ -0,0 +1,378 @@
+<script>
+// Important info about performance:
+// https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
+
+import { Deck, WebMercatorViewport, FlyToInterpolator, CompositeLayer } from '@deck.gl/core';
+import { GeoJsonLayer, LineLayer, BitmapLayer, ScatterplotLayer, IconLayer } from '@deck.gl/layers';
+import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+import { TileLayer, MVTLayer } from '@deck.gl/geo-layers';
+
+
+//import { json } from 'd3-fetch';
+import * as d3a from 'd3-array';
+
+import { DougalBinaryBundle, DougalBinaryChunkSequential, DougalBinaryChunkInterleaved } from '@dougal/binary';
+import { DougalShotLayer } from '@/lib/deck.gl';
+import DougalSequenceLayer from '@/lib/deck.gl/DougalSequenceLayer';
+
+import { colors } from 'vuetify/lib'
+
+
+function hexToArray (hex, defaultValue = [ 0xc0, 0xc0, 0xc0, 0xff ]) {
+
+  if (typeof hex != "string" || hex.length < 6) {
+    return defaultValue;
+  }
+
+  if (hex[0] == "#") {
+    hex = hex.slice(1); // remove the '#' character
+  }
+
+  return [
+    parseInt(hex.slice(0, 2), 16),
+    parseInt(hex.slice(2, 4), 16),
+    parseInt(hex.slice(4, 6), 16),
+    hex.length > 6 ? parseInt(hex.slice(6, 8), 16) : 255
+  ];
+}
+
+function namedColourToArray (name) {
+  const parts = name.split(/\s+/).map( (s, i) =>
+    i
+      ? s.replace("-", "")
+      : s.replace(/-([a-z])/g, (match, group1) => group1.toUpperCase())
+  );
+  parts[0]
+  if (parts.length == 1) parts[1] = "base";
+  const hex = parts.reduce((acc, key) => acc[key], colors);
+  return hexToArray(hex);
+}
+
+export default {
+  name: "MapLayersMixin",
+
+  data () {
+
+  },
+
+  computed: {
+    labels () {
+      return this.$store.state.label.labels;
+    }
+  },
+
+  methods: {
+
+    osmLayer (options = {}) {
+      return new TileLayer({
+        id: "osm",
+        // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
+        data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+
+        minZoom: 0,
+        maxZoom: 19,
+        tileSize: 256,
+
+        renderSubLayers: props => {
+          const {
+            bbox: {west, south, east, north}
+          } = props.tile;
+
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north]
+          });
+        },
+        ...options
+      })
+    },
+
+
+    // OSM tiles layer. Handy to make water transparent
+    // but super reliable yet
+
+    osmVectorLayer (options = {}) {
+      return new MVTLayer({
+        id: 'osm',
+        data: 'https://vector.openstreetmap.org/shortbread_v1/{z}/{x}/{y}.mvt',
+        minZoom: 0,
+        maxZoom: 14,
+        getFillColor: feature => {
+          const layer = feature.properties.layerName;
+          //console.log("layer =", layer, feature.properties.kind);
+          switch (layer) {
+            case "ocean":
+              return [0, 0, 0, 0];
+            case "land":
+              return [ 0x54, 0x6E, 0x7A, 255 ];
+            default:
+              return [ 240, 240, 240, 255 ];
+          }
+        },
+        getLineColor: feature => {
+          if (feature.properties.layer === 'water') {
+            return [0, 0, 0, 0]; // No outline for water
+          }
+          return [192, 192, 192, 255]; // Default line color for roads, etc.
+        },
+        getLineWidth: feature => {
+          if (feature.properties.highway) {
+            return feature.properties.highway === 'motorway' ? 6 : 3; // Example road widths
+          }
+          return 1;
+        },
+        stroked: true,
+        filled: true,
+        pickable: true
+      });
+    },
+
+
+    openSeaMapLayer (options = {}) {
+      return new TileLayer({
+        id: "sea",
+        data: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
+
+        minZoom: 0,
+        maxZoom: 19,
+        tileSize: 256,
+
+        renderSubLayers: props => {
+          const {
+            bbox: {west, south, east, north}
+          } = props.tile;
+
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north]
+          });
+        },
+        ...options
+      })
+    },
+
+
+    // Norwegian nautical charts
+    // As of 2025, not available for some weird reason
+    nauLayer (options = {}) {
+      return new TileLayer({
+        id: "nau",
+        // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
+        data: 'https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=sjokartraster&zoom={z}&x={x}&y={y}',
+
+        minZoom: 0,
+        maxZoom: 19,
+        tileSize: 256,
+
+        renderSubLayers: props => {
+          const {
+            bbox: {west, south, east, north}
+          } = props.tile;
+
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north]
+          });
+        },
+        ...options
+      })
+    },
+
+    vesselTrackPointsLayer (options = {}) {
+      return new ScatterplotLayer({
+        id: 'navp',
+        data: `/api/navdata?limit=10000`,
+        getPosition: (d) => ([d.longitude, d.latitude]),
+        getRadius: d => (d.speed),
+        radiusScale: 1,
+        lineWidthMinPixels: 2,
+        getFillColor: d => d.guns
+          ? d.lineStatus == "online"
+            ? [0xaa, 0x00, 0xff] // Online
+            : [0xd5, 0x00, 0xf9] // Soft start or guns otherwise active
+          : [0xea, 0x80, 0xfc],  // Offline, guns inactive
+        getLineColor: [127, 65, 90],
+        getColor: [ 255, 0, 0 ],
+        getPointRadius: 12,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 4,
+        stroked: false,
+        filled: true,
+        pickable: true,
+        ...options
+      })
+    },
+
+    vesselTrackLinesLayer (options = {}) {
+      return new LineLayer({
+        id: 'navl',
+        data: `/api/navdata`,
+        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,
+        getTargetPosition: (obj, i) => i.index < i.data?.length ? [i.data[i.index+1]?.longitude, i.data[i.index+1]?.latitude] : null,
+        getLineWidth: 3,
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+        pickable: true,
+        ...options
+      })
+    },
+
+    eventsLogLayer (options = {}) {
+
+      const labelColour = (d, i) => {
+        const label = d?.properties?.labels?.[0];
+        const colour = this.labels[label]?.view?.colour ?? "#cococo";
+
+        if (colour) {
+          if (colour[0] == "#") {
+            return hexToArray(colour);
+          } else {
+            return namedColourToArray(colour);
+          }
+        } else {
+          return [127, 65, 90];
+        }
+      };
+
+      return new GeoJsonLayer({
+        id: 'log',
+        data: `/api/project/${this.$route.params.project}/event?mime=application/geo%2Bjson`,
+        lineWidthMinPixels: 2,
+        //getLineColor: [127, 65, 90],
+        getFillColor: (d, i) => labelColour(d, i),
+        getLineColor: (d, i) => labelColour(d, i),
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+
+        pickable: true,
+        ...options
+      })
+    },
+
+    preplotSaillinesLinesLayer (options = {}) {
+      return new GeoJsonLayer({
+        id: 'psll',
+        data: `/api/project/${this.$route.params.project}/gis/preplot/line?class=V`,
+        lineWidthMinPixels: 1,
+        getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
+        getLineWidth: 1,
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+        pickable: true,
+        ...options
+      })
+    },
+
+    preplotLinesLayer (options = {}) {
+      return new GeoJsonLayer({
+        id: 'ppll',
+        data: `/api/project/${this.$route.params.project}/gis/preplot/line`,
+        lineWidthMinPixels: 1,
+        getLineColor: (d) => d.properties.ntba ? [240, 248, 255, 200] : [85, 170, 255, 200],
+        getLineWidth: 1,
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+        pickable: true,
+        ...options
+      })
+    },
+
+    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,
+        getColor: (d) => {
+          const k = d.azimuth/360*255;
+          return [ k, 128, k, 200 ];
+        },
+        pickable: true,
+        ...options
+      })
+    },
+
+    rawSequencesLinesLayer (options = {}) {
+      return new GeoJsonLayer({
+        id: 'seqrl',
+        data: `/api/project/${this.$route.params.project}/gis/raw/line`,
+        lineWidthMinPixels: 1,
+        getLineColor: (d) => d.properties.ntbp ? [0xe6, 0x51, 0x00, 200] : [0xff, 0x98, 0x00, 200],
+        getLineWidth: 1,
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+        pickable: true,
+        ...options
+      })
+    },
+
+    finalSequencesLinesLayer (options = {}) {
+      return new GeoJsonLayer({
+        id: 'seqfl',
+        data: `/api/project/${this.$route.params.project}/gis/final/line`,
+        lineWidthMinPixels: 1,
+        getLineColor: (d) => d.properties.pending ? [0xa7, 0xff, 0xab, 200] : [0x00, 0x96, 0x88, 200],
+        getLineWidth: 1,
+        getPointRadius: 2,
+        radiusUnits: "pixels",
+        pointRadiusMinPixels: 2,
+        pickable: true,
+        ...options
+      })
+    },
+
+    preplotSaillinesPointLayer (options = {}) {
+    },
+
+    preplotPointsLayer (options = {}) {
+    },
+
+    plannedLinesPointsLayer (options = {}) {
+    },
+
+    rawSequencesPointsLayer (options = {}) {
+      return new DougalSequenceLayer({
+        id: 'seqrp',
+        data: this.sequenceBinaryData,
+        getRadius: 2,
+        getFillColor: [0, 120, 220, 200],
+        pickable: true,
+        ...options
+      });
+    },
+
+    rawSequencesPointsGunDataLayer (options = {}) {
+      return new DougalSequenceLayer({
+        id: 'seqrp',
+        data: this.sequenceBinaryData,
+        getRadius: (d, i) => i?.data?.attributes?.value9.value[i?.index],
+        //getRadius: (d, i) => {console.log(d, i); return 1;},
+        //getRadius: 2,
+        radiusMinPixels: 1,
+        //autoScale: true,
+        //getFillColor: gunPressureColours,
+        getFillColor: [0, 120, 220, 200],
+        pickable: true,
+        ...options
+      });
+    },
+
+
+  },
+
+}
+
+</script>
diff --git a/lib/www/client/source/src/views/MapTooltipsMixin.vue b/lib/www/client/source/src/views/MapTooltipsMixin.vue
new file mode 100644
index 0000000..95b3eba
--- /dev/null
+++ b/lib/www/client/source/src/views/MapTooltipsMixin.vue
@@ -0,0 +1,201 @@
+<script>
+
+export default {
+  name: "MapTooltipsMixin",
+
+  data () {
+    return {
+      tooltipDefaultStyle: { "max-width": "50ex"}
+    }
+  },
+
+  methods: {
+
+    getTooltip (args) {
+      if (args?.layer?.constructor?.tooltip) {
+        return args.layer.constructor.tooltip(args);
+      } else if (args?.layer?.id == "seqrp" || args?.layer?.id == "seqfp") {
+        return this.sequencePointsTooltip(args);
+      } else if (args?.layer?.id == "log") {
+        return this.eventLogTooltip(args);
+      } else if (args?.layer?.id == "pplp" || args?.layer?.id == "pslp") {
+        return this.preplotPointsTooltip(args);
+      } else if (args?.layer?.id == "plan") {
+        return this.plannedLinesTooltip(args);
+      } else if (args?.layer?.id == "seqrl" || args?.layer?.id == "seqfl") {
+        return this.sequenceLinesTooltip(args);
+      } else if (args?.layer?.id == "navp") {
+        return this.vesselTrackPointsTooltip(args);
+      }
+    },
+
+    preplotPointsTooltip (args) {
+      const p = args?.object?.properties;
+      const isSailline = args?.layer?.id == "psl";
+      if (p) {
+        let html = `${isSailline ? "Sail" : "Preplot"} line ${p.line} (${p.incr ? "+" : "-"})`;
+        if (p.ntba) {
+          html += ` <b title="Not to be acquired">NTBA</a>`;
+        }
+        if (p.remarks) {
+          html += `<br/>\n${p.remarks}`;
+        }
+
+        const style = { "max-width": "50ex"};
+
+        return {html, style: this.tooltipDefaultStyle};
+      }
+    },
+
+    sequenceLinesTooltip (args) {
+        let type;
+        switch(args.layer.id) {
+          case "seqrl":
+            type = "Raw";
+            break;
+          case "seqfl":
+            type = "Final";
+            break;
+        }
+
+        const p = args?.object?.properties;
+        if (p) {
+          let html = `Sequence ${p.sequence} (${type})<br/>\n`;
+          html += `Line <b>${p.line}</b><br/>\n`;
+          html += `${p.num_points} points (${p.missing_shots ? (p.missing_shots + " missing") : "None missing"})<br/>\n`;
+          html+= `${(p.length??0).toFixed(0)} m ${(p.azimuth??0).toFixed(1)}°<br/>\n`;
+          html += `${p.duration}<br/>\n`;
+          html += `<b>${p.fsp}</b> @ ${(new Date(p.ts0))?.toISOString()}<br/>\n`;
+          html += `<b>${p.lsp}</b> @ ${(new Date(p.ts1))?.toISOString()}<br/>\n`;
+          if (p.ntbp) {
+            html += "<b>Not to be processed</b><br/>\n";
+          } else if (p.pending) {
+            html += "<b>Pending</b><br/>\n";
+          }
+          html += "<hr/><br/>\n";
+          html += this.$root.markdown(p.remarks);
+
+          return {html, style: this.tooltipDefaultStyle};
+        }
+    },
+
+    sequencePointsTooltip (args) {
+
+      const p = args?.object;
+
+      if (p) {
+
+        let html = "";
+
+        if (p.udv == 2) { // FIXME Must change this to something more meaningful
+          // This is a shot info record:
+
+          html += `S${p.i.toString().padStart(3, "0")} ${p.j}</br>\n`;
+          html += `<small>${new Date(Number(p.ts)).toISOString()}</small><br/>\n`;
+          html += `Δi: ${p.εj.toFixed(2)} m / Δj: ${p.εi.toFixed(2)} m<br/>\n`;
+          html += `<hr/>\n`;
+          if (p.nofire) {
+            html += `<b>No fire: ${p.nofire} guns</b><br/>\n`;
+          }
+          if (p.autofire) {
+            html += `<b>Autofire: ${p.autofire} guns</b><br/>\n`;
+          }
+          html += `P: ${p.press_μ} psi ±${p.press_σ} psi (R=${p.press_R})<br/>\n`;
+          html += `Δ: ${p.delta_μ} ms ±${p.delta_σ} ms (R=${p.delta_R})<br/>\n`;
+          html += `D: ${p.depth_μ} m ±${p.depth_σ} m (R=${p.depth_R})<br/>\n`;
+          html += `F: ${p.fill_μ} ms ±${p.fill_σ} ms (R=${p.fill_R})<br/>\n`;
+          html += `W: ${p.delay_μ} ms ±${p.delay_σ} ms (R=${p.delay_R})<br/>\n`;
+
+          return {html, style: this.tooltipDefaultStyle};
+        }
+      }
+      console.log("no tooltip");
+
+    },
+
+    eventLogTooltip (args) {
+      const p = args?.object?.properties;
+      if (p) {
+        let html = "";
+        if (p.sequence && p.point) {
+          html += `S${p.sequence.toString().padStart(3, "0")} ${p.point}</br>\n`;
+        }
+        html += `<small>${p.tstamp}</small><br/>\n`;
+        html += `<span>${p.remarks}</span>`;
+        if (p.labels?.length) {
+          html += `</br>\n<small><i>${p.labels.join(", ")}</i></small>`;
+        }
+
+        return {html, style: this.tooltipDefaultStyle};
+      }
+    },
+
+    plannedLinesTooltip (args) {
+      const p = args?.object;
+      if (p) {
+        const duration = `${(p.duration?.hours??0).toString().padStart(2, "0")}:${(p.duration?.minutes??0).toString().padStart(2, "0")}`;
+        const Δt = ((new Date(p.ts1)).valueOf() - (new Date(p.ts0)).valueOf()) / 1000; // seconds
+        const speed = (p.length / Δt) * 3.6 / 1.852; // knots
+
+        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` +
+          `${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}`;
+          }
+
+        return {html, style: this.tooltipDefaultStyle};
+      }
+    },
+
+    vesselTrackPointsTooltip (args) {
+      const p = args.object;
+
+      if (p) {
+        let html = `${p.vesselName}<br/>\n`
+          + `${p.tstamp}<br/>\n`
+          + `BSP ${(p.speed??0).toFixed(1)} kt CMG ${(p.cmg??0).toFixed(1).padStart(5, "0")}° HDG ${(p.bearing??0).toFixed(1).padStart(5, "0")}° DPT ${(p.waterDepth??0).toFixed(1)} m<br/>\n`
+          + `${p.lineStatus}<br/>\n`;
+
+        if (p.guns) {
+          console.log(p);
+          const pressure = p.guns.map( i => i[11] ); // 11 is gun pressure
+          const μpress = d3a.mean(pressure);
+          const σpress = d3a.deviation(pressure);
+
+          if (p.lineStatus && p.lineStatus != "offline") {
+            html += `${p.lineName}<br/>\n`
+              + `S: ${p._sequence} L: ${p._line} P: ${p.shot}<br/>`
+              + `Source ${p.src_number} `
+              + ((p.trg_mode && p.trg_mode != "external") ? `<b>${p.trg_mode.toUpperCase()} TRIGGER</b> ` : "")
+              + `<small>FSID ${p.fsid}</small> <small>mask ${p.mask}</small><br/>\n`
+              + `Δ ${(p.avg_delta??0).toFixed(3)} ms ±${(p.std_delta??0).toFixed(3)} ms<br/>\n`
+              + `${(μpress??0).toFixed(0)} psi ±${(σpress??0).toFixed(0)} psi / ${(p.volume??0).toFixed(0)} in³<br/>\n`
+              + `along ${(p.inline??0).toFixed(1)} m / across ${(p.crossline??0).toFixed(1)} m<br/>\n`;
+          } else {
+            // Soft start?
+            html +=
+                `Source ${p.src_number} `
+              + ((p.trg_mode && p.trg_mode != "external") ? `<b>${p.trg_mode.toUpperCase()} TRIGGER</b> ` : "")
+              + `<small>mask ${p.mask}</small><br/>\n`
+              + `Δ ${(p.avg_delta??0).toFixed(3)} ms ±${(p.std_delta??0).toFixed(3)} ms<br/>\n`
+              + `${(p.manifold??0).toFixed(0)} psi / ${(p.volume??0).toFixed(0)} in³<br/>\n`
+              + `along ${(p.inline??0).toFixed(1)} m / across ${(p.crossline??0).toFixed(1)} m<br/>\n`;
+          }
+        }
+
+        return {html, style: this.tooltipDefaultStyle};
+      }
+    },
+
+
+
+  }
+
+}
+</script>