diff --git a/lib/www/client/source/package.json b/lib/www/client/source/package.json
index 5d51785..203a20b 100644
--- a/lib/www/client/source/package.json
+++ b/lib/www/client/source/package.json
@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@deck.gl/aggregation-layers": "^9.1.13",
     "@dougal/organisations": "file:../../../modules/@dougal/organisations",
     "@dougal/user": "file:../../../modules/@dougal/user",
     "@mdi/font": "^7.2.96",
diff --git a/lib/www/client/source/src/views/Map.vue b/lib/www/client/source/src/views/Map.vue
index 217ec6a..3eae9db 100644
--- a/lib/www/client/source/src/views/Map.vue
+++ b/lib/www/client/source/src/views/Map.vue
@@ -21,9 +21,49 @@
 
           <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>
+        </form>
 
-          <hr class="my-2"/><hr class="my-2"/>
+          <hr class="my-2"/>
 
+          <div class="lines-points">
+
+          <span>Vessel track</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="navp" 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="navl" v-model="layerSelection"/></label>
+          <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 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>
+
+          <span>Preplots</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="pplp" v-model="layerSelection"/></label>
+          <label title="Show lines"><v-icon small left class="mx-0">mdi-vector-line</v-icon> <input type="checkbox" value="ppll" v-model="layerSelection"/></label>
+          <label><!-- No heatmap available --></label>
+
+          <span>Plan</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="planp" v-model="layerSelection"/></label>
+          <label title="Show lines"><v-icon small left class="mx-0">mdi-vector-line</v-icon> <input type="checkbox" value="planl" v-model="layerSelection"/></label>
+          <label><!-- No heatmap available --></label>
+
+          <span>Raw data</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="seqrp" v-model="layerSelection"/></label>
+          <label title="Show lines"><v-icon small left class="mx-0">mdi-vector-line</v-icon> <input type="checkbox" value="seqrl" v-model="layerSelection"/></label>
+          <label title="Show position error"><v-icon small left class="mx-0">mdi-dots-grid</v-icon> <input type="checkbox" value="seqrh" v-model="layerSelection"/></label>
+
+          <span>Final data</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="seqfp" v-model="layerSelection"/></label>
+          <label title="Show lines"><v-icon small left class="mx-0">mdi-vector-line</v-icon> <input type="checkbox" value="seqfl" v-model="layerSelection"/></label>
+          <label title="Show position error"><v-icon small left class="mx-0">mdi-dots-grid</v-icon> <input type="checkbox" value="seqfh" v-model="layerSelection"/></label>
+
+          <span>Events</span>
+          <label title="Show points"><v-icon small left class="mx-0">mdi-vector-point</v-icon> <input type="checkbox" value="log" v-model="layerSelection"/></label>
+          <label><!-- No lines available --></label>
+          <label><!-- No heatmap available --></label>
+
+          </div>
+<!--
           <input id="lyr-psl" type="checkbox" value="psl" v-model="layerSelection"/>
           <label for="lyr-psl" title="Vessel preplots">Sail lines</label>
 
@@ -36,6 +76,9 @@
           <input id="lyr-preplots" type="checkbox" value="preplots" v-model="layerSelection"/>
           <label for="lyr-preplots" title="Shotpoint deviation from preplot position">Preplot error</label>
 
+          <input id="lyr-peh" type="checkbox" value="peh" v-model="layerSelection"/>
+          <label for="lyr-peh" title="Shotpoint deviation from preplot position">Preplot error (heatmap)</label>
+
           <input id="lyr-seq" type="checkbox" value="seq" v-model="layerSelection"/>
           <label for="lyr-seq" title="Raw and/or final shot positions">Sequence data</label>
 
@@ -44,13 +87,14 @@
 
           <input id="lyr-nav" type="checkbox" value="nav" v-model="layerSelection"/>
           <label for="lyr-nav" title="Vessel track">Navigation trail</label>
-
+-->
+        <form>
           <template v-if="crosshairsPosition.length">
             <input id="lyr-crosshairs" type="checkbox" value="crosshairs" v-model="layerSelection"/>
             <label for="lyr-crosshairs" title="Show or hide the crosshairs position marker">Crosshairs marker</label>
           </template>
         </form>
-
+<!--
         <h3 class="mt-3" title="At least one of raw or final will always be selected">Sequence data</h3>
         <form>
           <input id="sd-raw" type="checkbox" value="R" v-model="sequenceDataTypes"/>
@@ -58,6 +102,7 @@
           <input id="sd-final" type="checkbox" value="F" v-model="sequenceDataTypes"/>
           <label for="sd-final">Show final</label>
         </form>
+-->
 
         <!-- QC data: This section is meant to show (some) QC results in a graphical way,
              as 3D columns with lengths proportional to the QC values. Not implemented
@@ -209,6 +254,16 @@
   grid-template-columns: 36px 1fr;
 }
 
+.map-overlay-inner .lines-points {
+  display: grid;
+  grid-template-columns: minmax(auto, 1fr) 36px 36px 36px;
+  grid-column-gap: 4px;
+}
+
+.map-overlay-inner .lines-points :nth-child(4n+1) {
+  margin-right: 6px;
+}
+
 .map-overlay input[type=text] {
   background-color: white;
   border: 1px solid black;
@@ -255,12 +310,14 @@ 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 { TileLayer } from '@deck.gl/geo-layers';
+import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+import { TileLayer, MVTLayer } from '@deck.gl/geo-layers';
+import * as d3a from 'd3-array';
 
 //import { json } from 'd3-fetch';
 
 import { SequenceDataLayer } from '@/lib/deck.gl';
-import { unbundle, unpack, isLittleEndian } from '@/lib/binary';
+import { unbundle, unpack, toJSON, isLittleEndian } from '@/lib/binary';
 
 // Important info about performance:
 // https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
@@ -304,7 +361,28 @@ export default {
       filterText: "",
       filterVisible: false,
 
-      error: null
+      error: null,
+      /*
+      layerDefinitions: [
+        {
+          id: "osm",
+          name: "OpenStreetMap"
+        },
+        {
+          id: "sea",
+          name: "OpenSeaMap"
+        },
+        {
+          id: "nau",
+          name: "Nautical charts (NO)",
+          title: "Scan of Norway's nautical charts"
+          disabled: true
+        },
+        {
+
+
+      ]
+      */
     };
   },
 
@@ -317,6 +395,20 @@ export default {
       };
     },
 
+    sequenceDataRaw () {
+      return {
+        tstamp: this.sequenceDataTStamp,
+        sequences: this.sequenceDataElements.filter(i => i.type == "R")
+      };
+    },
+
+    sequenceDataFinal () {
+      return {
+        tstamp: this.sequenceDataTStamp,
+        sequences: this.sequenceDataElements.filter(i => i.type == "F")
+      };
+    },
+
     sequenceDataPostplots () {
       const fn = i => i.type != "P" && this.sequenceDataTypes.includes(i.type);
       return {
@@ -325,6 +417,18 @@ export default {
       };
     },
 
+    fullProspectRaw () {
+      // Get raw data, so type = "R"
+      const sequences = this.sequenceDataElements.filter( i => i.type == "R" );
+      return [...sequences.map( i => toJSON(i.data) )].flat();
+    },
+
+    fullProspectFinal () {
+      // Get raw data, so type = "R"
+      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})
   },
@@ -398,13 +502,16 @@ export default {
     },
 
     zoomReset () {
-      // FIXME just to test, we calculate from the sequence layer
-      if (deck && deck.layerManager) {
-        const sl = deck.layerManager.getLayers().find(l => l.id == "seq");
+      if (deck) {
         const bounds = this.sequencesBBox();
-        const initialViewState = {...this.viewStateDefaults, ...sl.context.viewport.fitBounds(bounds)};
-        initialViewState.transitionDuration = 500;
-        deck.setProps({initialViewState});
+        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});
+        }
+      } else {
+        console.warn("Unable to calculate bounding box");
       }
     },
 
@@ -430,27 +537,28 @@ export default {
 
     sequencesBBox (margin = 0.1) {
       let [ λ0, φ0, λ1, φ1 ] = [ +Infinity, +Infinity, -Infinity, -Infinity ];
-      if (deck && deck.layerManager) {
-        const sl = deck.layerManager.getLayers().find(l => l.id == "seq");
-        if (sl) {
-          const positions = sl.getSubLayers().map(l => l.props.data.attributes.getPosition.value);
-          for (const position of positions) {
-            for (let n=0; n<position.length; n+=2) {
-              const λ = position[n];
-              const φ = position[n+1];
-              λ0 = Math.min(λ0, λ);
-              φ0 = Math.min(φ0, φ);
-              λ1 = Math.max(λ1, λ);
-              φ1 = Math.max(φ1, φ);
-            }
-          }
-          const δλ = λ1 - λ0;
-          const δφ = φ1 - φ0;
-          const mλ = δλ * margin;
-          const mφ = δφ * margin;
 
-          return [ [λ0-mλ, φ0-mφ], [λ1+mλ, φ1+mφ] ];
+      // FIXME Temporary fix to get this working again, but this.fullProspectRaw /
+      // this.fullProspectFinal are not intended to remain as JSON data.
+
+      const data = this.fullProspectRaw ?? this.fullProspectFinal;
+
+      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, φ);
         }
+
+        const δλ = λ1 - λ0;
+        const δφ = φ1 - φ0;
+        const mλ = δλ * margin;
+        const mφ = δφ * margin;
+
+        return [ [λ0-mλ, φ0-mφ], [λ1+mλ, φ1+mφ] ];
       }
     },
 
@@ -693,6 +801,48 @@ export default {
       })
     }
 
+    /*
+    // OSM tiles layer. Handy to make water transparent
+    // but super reliable yet
+
+    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.nau = (options = {}) => {
       return new TileLayer({
@@ -720,17 +870,47 @@ export default {
     }
     */
 
-    /*
-    this.layersAvailable.nav = (options = {}) => {
-      return new GeoJsonLayer({
-        id: 'nav',
-        data: `/api/navdata/gis/line`,
+    this.layersAvailable.navp = (options = {}) => {
+      return new ScatterplotLayer({
+        id: 'navp',
+        data: `/api/navdata?limit=10000&offset=300000`,
+        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({
@@ -770,9 +950,9 @@ export default {
       })
     };
 
-    this.layersAvailable.psl = (options = {}) => {
+    this.layersAvailable.psll = (options = {}) => {
       return new GeoJsonLayer({
-        id: 'psl',
+        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],
@@ -785,9 +965,9 @@ export default {
       })
     };
 
-    this.layersAvailable.ppl = (options = {}) => {
+    this.layersAvailable.ppll = (options = {}) => {
       return new GeoJsonLayer({
-        id: 'ppl',
+        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],
@@ -800,7 +980,7 @@ export default {
       })
     };
 
-    this.layersAvailable.plan = (options = {}) => {
+    this.layersAvailable.planl = (options = {}) => {
       return new LineLayer({
         id: 'plan',
         data: `/api/project/${this.$route.params.project}/plan`,
@@ -819,24 +999,91 @@ export default {
       })
     };
 
-    this.layersAvailable.preplots = (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: 'preplots',
+        id: 'pplp',
         data: this.sequenceDataPreplots,
         pickable: true,
         ...options
       });
     };
 
-    this.layersAvailable.seq = (options = {}) => {
+    this.layersAvailable.seqrp = (options = {}) => {
       return new SequenceDataLayer({
-        id: 'seq',
-        data: this.sequenceDataPostplots,
+        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.crosshairs = (options = {}) => {
       return new IconLayer({
         id: 'crosshairs',
@@ -871,6 +1118,7 @@ export default {
       onWebGLInitialized: this.initLayers
     });
 
+
     function getTooltip (args) {
       //console.log("tooltip", args?.layer?.constructor?.layerName, args);
       if (args?.layer?.constructor?.tooltip) {
@@ -896,7 +1144,7 @@ export default {
           return {html, style};
         }
 
-      } else if (args?.layer?.id == "ppl" || args?.layer?.id == "psl") {
+      } else if (args?.layer?.id == "pplp" || args?.layer?.id == "pslp") {
 
         const p = args?.object?.properties;
         const isSailline = args?.layer?.id == "psl";
@@ -938,11 +1186,83 @@ export default {
             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> @ ${p.ts0?.substring(0, 10)}<br/>\n`;
+          html += `<b>${p.lsp}</b> @ ${p.ts1?.substring(0, 10)}<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.layerSelection = [ "seq" ];
     this.getSequenceData();
 
   }
diff --git a/package-lock.json b/package-lock.json
index 0afc0a3..02a9a83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
       "version": "0.0.0",
       "license": "UNLICENSED",
       "dependencies": {
+        "@deck.gl/aggregation-layers": "^9.1.13",
         "@dougal/organisations": "file:../../../modules/@dougal/organisations",
         "@dougal/user": "file:../../../modules/@dougal/user",
         "@mdi/font": "^7.2.96",
@@ -13607,6 +13608,71 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/@deck.gl/aggregation-layers": {
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@deck.gl/aggregation-layers/-/aggregation-layers-9.1.13.tgz",
+      "integrity": "sha512-eDuT4S7GRx8LWdPuxGIiK8MfBynfvj3PgNB5mB1uiXcp1OR2eZ17wr3QBp1Rdk4LUsx1P1CkDyyIvi5mn4+aQA==",
+      "dependencies": {
+        "@luma.gl/constants": "^9.1.5",
+        "@luma.gl/shadertools": "^9.1.5",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "d3-hexbin": "^0.2.1"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "^9.1.0",
+        "@deck.gl/layers": "^9.1.0",
+        "@luma.gl/core": "^9.1.5",
+        "@luma.gl/engine": "^9.1.5"
+      }
+    },
+    "node_modules/@deck.gl/core": {
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-9.1.13.tgz",
+      "integrity": "sha512-c15DpwUEvDjmt3+/azSjcfhVQ5L5HiIj6LJob1KAwQOnB5zgVdKWukN/21ELQ7ekppEkfT0x4byRv5k4QVocqQ==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/core": "^4.2.0",
+        "@loaders.gl/images": "^4.2.0",
+        "@luma.gl/constants": "^9.1.5",
+        "@luma.gl/core": "^9.1.5",
+        "@luma.gl/engine": "^9.1.5",
+        "@luma.gl/shadertools": "^9.1.5",
+        "@luma.gl/webgl": "^9.1.5",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/sun": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@probe.gl/env": "^4.1.0",
+        "@probe.gl/log": "^4.1.0",
+        "@probe.gl/stats": "^4.1.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "gl-matrix": "^3.0.0",
+        "mjolnir.js": "^3.0.0"
+      }
+    },
+    "node_modules/@deck.gl/layers": {
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-9.1.13.tgz",
+      "integrity": "sha512-2eD2uARmObtCXrc1Q051fqy+LS2w6a700qPerqtqz+J/bOWTHSEZxAdIoHawDU7g+fi4/1lti0m8bdp2X/kZLA==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/images": "^4.2.0",
+        "@loaders.gl/schema": "^4.2.0",
+        "@luma.gl/shadertools": "^9.1.5",
+        "@mapbox/tiny-sdf": "^2.0.5",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/polygon": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "earcut": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "^9.1.0",
+        "@loaders.gl/core": "^4.2.0",
+        "@luma.gl/core": "^9.1.5",
+        "@luma.gl/engine": "^9.1.5"
+      }
+    },
     "node_modules/@dougal/organisations": {
       "resolved": "lib/modules/@dougal/organisations",
       "link": true
@@ -13615,6 +13681,127 @@
       "resolved": "lib/modules/@dougal/user",
       "link": true
     },
+    "node_modules/@loaders.gl/core": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-4.3.4.tgz",
+      "integrity": "sha512-cG0C5fMZ1jyW6WCsf4LoHGvaIAJCEVA/ioqKoYRwoSfXkOf+17KupK1OUQyUCw5XoRn+oWA1FulJQOYlXnb9Gw==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.3.4",
+        "@loaders.gl/schema": "4.3.4",
+        "@loaders.gl/worker-utils": "4.3.4",
+        "@probe.gl/log": "^4.0.2"
+      }
+    },
+    "node_modules/@loaders.gl/images": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-4.3.4.tgz",
+      "integrity": "sha512-qgc33BaNsqN9cWa/xvcGvQ50wGDONgQQdzHCKDDKhV2w/uptZoR5iofJfuG8UUV2vUMMd82Uk9zbopRx2rS4Ag==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.3.4"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "^4.3.0"
+      }
+    },
+    "node_modules/@loaders.gl/loader-utils": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-4.3.4.tgz",
+      "integrity": "sha512-tjMZvlKQSaMl2qmYTAxg+ySR6zd6hQn5n3XaU8+Ehp90TD3WzxvDKOMNDqOa72fFmIV+KgPhcmIJTpq4lAdC4Q==",
+      "peer": true,
+      "dependencies": {
+        "@loaders.gl/schema": "4.3.4",
+        "@loaders.gl/worker-utils": "4.3.4",
+        "@probe.gl/log": "^4.0.2",
+        "@probe.gl/stats": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "^4.3.0"
+      }
+    },
+    "node_modules/@loaders.gl/schema": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/schema/-/schema-4.3.4.tgz",
+      "integrity": "sha512-1YTYoatgzr/6JTxqBLwDiD3AVGwQZheYiQwAimWdRBVB0JAzych7s1yBuE0CVEzj4JDPKOzVAz8KnU1TiBvJGw==",
+      "peer": true,
+      "dependencies": {
+        "@types/geojson": "^7946.0.7"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "^4.3.0"
+      }
+    },
+    "node_modules/@loaders.gl/worker-utils": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/worker-utils/-/worker-utils-4.3.4.tgz",
+      "integrity": "sha512-EbsszrASgT85GH3B7jkx7YXfQyIYo/rlobwMx6V3ewETapPUwdSAInv+89flnk5n2eu2Lpdeh+2zS6PvqbL2RA==",
+      "peer": true,
+      "peerDependencies": {
+        "@loaders.gl/core": "^4.3.0"
+      }
+    },
+    "node_modules/@luma.gl/constants": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@luma.gl/constants/-/constants-9.1.9.tgz",
+      "integrity": "sha512-yc9fml04OeTTcwK+7gmDMxoLQ67j4ZiAFXjmYvPomYyBVzS0NZxTDuwcCBmnxjLOiroOZW8FRRrVc/yOiFug2w=="
+    },
+    "node_modules/@luma.gl/core": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-9.1.9.tgz",
+      "integrity": "sha512-1i9N7+I/UbFjx3axSMlc3/NufA+C2iBv/7mw51gRE/ypQPgvFmY/QqXBVZRe+nthF+OhlUMhO19TBndzYFTWhA==",
+      "peer": true,
+      "dependencies": {
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.0.8",
+        "@probe.gl/log": "^4.0.8",
+        "@probe.gl/stats": "^4.0.8",
+        "@types/offscreencanvas": "^2019.6.4"
+      }
+    },
+    "node_modules/@luma.gl/engine": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-9.1.9.tgz",
+      "integrity": "sha512-n1GLK1sUMFkWxdb+aZYn6ZBFltFEMi7X+6ZPxn2pBsNT6oeF4AyvH5AyqhOpvHvUnCLDt3Zsf1UIfx3MI//YSw==",
+      "peer": true,
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/log": "^4.0.8",
+        "@probe.gl/stats": "^4.0.8"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "^9.1.0",
+        "@luma.gl/shadertools": "^9.1.0"
+      }
+    },
+    "node_modules/@luma.gl/shadertools": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-9.1.9.tgz",
+      "integrity": "sha512-Uqp2xfgIEunRMLXTeCJ4uEMlWcUGcYMZGJ8GAOrAeDzn4bMKVRKmZDC71vkuTctnaodM3UdrI9W6s1sJlrXsxw==",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "wgsl_reflect": "^1.2.0"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "^9.1.0"
+      }
+    },
+    "node_modules/@luma.gl/webgl": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-9.1.9.tgz",
+      "integrity": "sha512-jecHjhNSWkXH0v62rM6G5fIIkOmsrND27099iKgdutFvHIvd4QS4UzGWEEa9AEPlP0rTLqXkA6y6YL7f42ZkVg==",
+      "peer": true,
+      "dependencies": {
+        "@luma.gl/constants": "9.1.9",
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.0.8"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "^9.1.0"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -13634,6 +13821,69 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==",
+      "peer": true
+    },
+    "node_modules/@math.gl/core": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-4.1.0.tgz",
+      "integrity": "sha512-FrdHBCVG3QdrworwrUSzXIaK+/9OCRLscxI2OUy6sLOHyHgBMyfnEGs99/m3KNvs+95BsnQLWklVfpKfQzfwKA==",
+      "dependencies": {
+        "@math.gl/types": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/polygon": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-4.1.0.tgz",
+      "integrity": "sha512-YA/9PzaCRHbIP5/0E9uTYrqe+jsYTQoqoDWhf6/b0Ixz8bPZBaGDEafLg3z7ffBomZLacUty9U3TlPjqMtzPjA==",
+      "peer": true,
+      "dependencies": {
+        "@math.gl/core": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/sun": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/sun/-/sun-4.1.0.tgz",
+      "integrity": "sha512-i3q6OCBLSZ5wgZVhXg+X7gsjY/TUtuFW/2KBiq/U1ypLso3S4sEykoU/MGjxUv1xiiGtr+v8TeMbO1OBIh/HmA==",
+      "peer": true
+    },
+    "node_modules/@math.gl/types": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/types/-/types-4.1.0.tgz",
+      "integrity": "sha512-clYZdHcmRvMzVK5fjeDkQlHUzXQSNdZ7s4xOqC3nJPgz4C/TZkUecTo9YS4PruZqtDda/ag4erndP0MIn40dGA=="
+    },
+    "node_modules/@math.gl/web-mercator": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-4.1.0.tgz",
+      "integrity": "sha512-HZo3vO5GCMkXJThxRJ5/QYUYRr3XumfT8CzNNCwoJfinxy5NtKUd7dusNTXn7yJ40UoB8FMIwkVwNlqaiRZZAw==",
+      "dependencies": {
+        "@math.gl/core": "4.1.0"
+      }
+    },
+    "node_modules/@probe.gl/env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/env/-/env-4.1.0.tgz",
+      "integrity": "sha512-5ac2Jm2K72VCs4eSMsM7ykVRrV47w32xOGMvcgqn8vQdEMF9PRXyBGYEV9YbqRKWNKpNKmQJVi4AHM/fkCxs9w==",
+      "peer": true
+    },
+    "node_modules/@probe.gl/log": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/log/-/log-4.1.0.tgz",
+      "integrity": "sha512-r4gRReNY6f+OZEMgfWEXrAE2qJEt8rX0HsDJQXUBMoc+5H47bdB7f/5HBHAmapK8UydwPKL9wCDoS22rJ0yq7Q==",
+      "peer": true,
+      "dependencies": {
+        "@probe.gl/env": "4.1.0"
+      }
+    },
+    "node_modules/@probe.gl/stats": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-4.1.0.tgz",
+      "integrity": "sha512-EI413MkWKBDVNIfLdqbeNSJTs7ToBz/KVGkwi3D+dQrSIkRI2IYbWGAU3xX+D6+CI4ls8ehxMhNpUVMaZggDvQ==",
+      "peer": true
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -13642,6 +13892,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "peer": true
+    },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "peer": true
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -13974,6 +14236,11 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/d3-hexbin": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+      "integrity": "sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w=="
+    },
     "node_modules/d3-queue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-2.0.3.tgz",
@@ -14106,6 +14373,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "peer": true
+    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -14358,6 +14631,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+      "peer": true
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -14825,6 +15104,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/mjolnir.js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-3.0.0.tgz",
+      "integrity": "sha512-siX3YCG7N2HnmN1xMH3cK4JkUZJhbkhRFJL+G5N1vH0mh1t5088rJknIoqDFWDIU6NPGvRRgLnYW3ZHjSMEBLA==",
+      "peer": true
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -15529,6 +15814,11 @@
         "node": ">=10.4"
       }
     },
+    "node_modules/wgsl_reflect": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/wgsl_reflect/-/wgsl_reflect-1.2.3.tgz",
+      "integrity": "sha512-BQWBIsOn411M+ffBxmA6QRLvAOVbuz3Uk4NusxnqC1H7aeQcVLhdA3k2k/EFFFtqVjhz3z7JOOZF1a9hj2tv4Q=="
+    },
     "node_modules/whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",