From 555d5f0def8ee3492d3afbc2e9cc8547978d4473 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 19:24:37 +0200
Subject: [PATCH 01/12] fix center text disclaimer & lint fix

---
 components/data-set-controls.vue  |  6 +++---
 components/layer-legend.vue       | 12 ++++++------
 components/time-stamp.vue         |  2 +-
 layouts/default.vue               |  6 +++---
 pages/_datasetIds/_locationId.vue |  6 +++---
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index 45cd71c5..055cc63c 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -24,7 +24,7 @@
               @click="toggleRasterLayer(dataset.id)"
             />
           </div>
-          <div v-if="dataset.toolTip" @click="onTooltipClick(dataset.id)" class="tooltip">
+          <div v-if="dataset.toolTip" class="tooltip" @click="onTooltipClick(dataset.id)">
             <icon name="info" />
           </div>
         </div>
@@ -44,8 +44,8 @@
             v-model="selectedLayer"
             :options="items(dataset.layerOptions)"
             :label="`Configure ${dataset.name} layer`"
-            @change="updateRasterLayer"
             class="data-set-controls__select-layer"
+            @change="updateRasterLayer"
           />
         </div>
         <div
@@ -53,7 +53,7 @@
           v-show="getActiveRasterLayer === dataset.id"
           class="data-set-controls__legend"
         >
-          <layer-legend :datasetId="dataset.id" class="data-set-controls__legend-bar" />
+          <layer-legend :dataset-id="dataset.id" class="data-set-controls__legend-bar" />
           <p>[{{ dataset.units }}]</p>
         </div>
       </li>
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index ec8a71ed..1e9100e0 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -18,7 +18,7 @@
     </svg>
     <div class="layer-legend__range unselectable">
       <div v-if="!editingRange" class="layer-legend__range-min">
-        <ui-button @click="editRange" kind="quiet">{{ minValue }}{{ unit }}</ui-button>
+        <ui-button kind="quiet" @click="editRange">{{ minValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-min layer-legend__range-min--editing">
         <ui-text-input
@@ -29,8 +29,8 @@
           placeholder="Min value"
         />
       </div>
-      <div v-if="!editingRange" @click="editRange" class="layer-legend__range-max">
-        <ui-button @click="editRange" kind="quiet">{{ maxValue }}{{ unit }}</ui-button>
+      <div v-if="!editingRange" class="layer-legend__range-max" @click="editRange">
+        <ui-button kind="quiet" @click="editRange">{{ maxValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-max layer-legend__range-max--editing">
         <ui-text-input
@@ -42,9 +42,9 @@
         />
       </div>
       <div v-if="editingRange" class="layer-legend__range-buttons">
-        <ui-button @click="cancelEditRange" kind="quiet">Cancel</ui-button>
-        <ui-button @click="resetRange" kind="secondary">Reset</ui-button>
-        <ui-button @click="saveRange" kind="primary">Save</ui-button>
+        <ui-button kind="quiet" @click="cancelEditRange">Cancel</ui-button>
+        <ui-button kind="secondary" @click="resetRange">Reset</ui-button>
+        <ui-button kind="primary" @click="saveRange">Save</ui-button>
       </div>
     </div>
   </div>
diff --git a/components/time-stamp.vue b/components/time-stamp.vue
index 17ff7812..d05878ed 100644
--- a/components/time-stamp.vue
+++ b/components/time-stamp.vue
@@ -6,8 +6,8 @@
     <time-slider
       :dates="activeRasterData.imageTimeseries"
       :set-time-index="dateIndex"
-      @update-timestep="getNewRasterLayer"
       start-at="end"
+      @update-timestep="getNewRasterLayer"
     >
       <template v-slot:backButton="{ back }">
         <ui-button-icon :disabled="getLoadingState" @click="back">
diff --git a/layouts/default.vue b/layouts/default.vue
index ffe0346b..3f126d58 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,11 +14,11 @@
         ref="map"
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
-        @mb-load="setStyleLayers"
         :zoom="1"
         :center="[0, 0]"
         map-style="mapbox://styles/global-data-viewer/ckaqyfcc63q1w1io3l3bpd50h?fresh=true"
         data-v-step="5"
+        @mb-load="setStyleLayers"
       >
         <v-mapbox-navigation-control :options="{ visualizePitch: true }" position="bottom-right" />
         <v-mapbox-selected-point-layer v-if="mapLoaded" :geometry="geometry" />
@@ -44,15 +44,15 @@
 
     <data-set-controls
       :datasets="datasetsInActiveTheme"
+      class="default-layout__data-set-controls"
       @toggle-location-dataset="toggleLocationDataset"
       @toggle-raster-layer="toggleRasterLayer"
-      class="default-layout__data-set-controls"
     />
 
     <time-stamp
       v-show="activeTimestamp !== '' && getActiveRasterLayer"
-      @update-timestep="removeInfoText"
       class="default-layout__timestamp"
+      @update-timestep="removeInfoText"
     />
 
     <nuxt />
diff --git a/pages/_datasetIds/_locationId.vue b/pages/_datasetIds/_locationId.vue
index 54983322..fd98b559 100644
--- a/pages/_datasetIds/_locationId.vue
+++ b/pages/_datasetIds/_locationId.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-tray @on-close="close" class="location">
+  <ui-tray class="location" @on-close="close">
     <template v-slot:header>
       <h2 class="h3">
         {{ locations }}
@@ -28,7 +28,7 @@
       </template>
     </template>
     <template v-slot:footer>
-      <p class="bodytext-xs disclaimer">
+      <p class="bodytext-xs disclaimer-message">
         Global datasets are generated with great care but may locally contain inaccuracies. See the
         dataset descriptions for more information.
       </p>
@@ -116,7 +116,7 @@
     left: var(--nav-bar-expanded-width);
   }
 
-  .disclaimer {
+  .disclaimer-message {
     text-align: center;
   }
 </style>

From 81be766e173d6446a0de2a6290d271fa01f3e8bd Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 19:26:47 +0200
Subject: [PATCH 02/12] slightly zoom in at start

---
 layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 3f126d58..a7cf4d88 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,7 +14,7 @@
         ref="map"
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
-        :zoom="1"
+        :zoom="1.8"
         :center="[0, 0]"
         map-style="mapbox://styles/global-data-viewer/ckaqyfcc63q1w1io3l3bpd50h?fresh=true"
         data-v-step="5"

From 50b8a9b06cfbba5cc9cc228ca49d8e18b1e6e5be Mon Sep 17 00:00:00 2001
From: danieltwigt <daniel_twigt@hotmail.com>
Date: Tue, 16 Jun 2020 20:40:08 +0200
Subject: [PATCH 03/12] Icons for return period and tidal indicator datasets

Icons for return period and tidal indicator datasets
---
 assets/icons/icon-dataset-rp.svg | 3 +++
 assets/icons/icon-dataset-ti.svg | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 assets/icons/icon-dataset-rp.svg
 create mode 100644 assets/icons/icon-dataset-ti.svg

diff --git a/assets/icons/icon-dataset-rp.svg b/assets/icons/icon-dataset-rp.svg
new file mode 100644
index 00000000..74ad5235
--- /dev/null
+++ b/assets/icons/icon-dataset-rp.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M23.4 13.5c-.2.5-.8.8-1.4.6l-3.7-1.5c-.7-.3-1.6-.3-2.3 0l-2.2.8c-1.3.5-2.6.5-3.9 0L8 12.6c-.7-.3-1.6-.3-2.3 0l-3.8 1.5c-.5.2-1.1 0-1.4-.6-.2-.5 0-1.1.6-1.4l3.7-1.5c1.3-.5 2.6-.5 3.9 0l2.1.8c.7.3 1.6.3 2.3 0l2.2-.8c1.3-.5 2.6-.5 3.9 0l3.7 1.5c.5.1.7.7.5 1.4zM13.1 3.7h6.3v2.1h-4.2v2.1h4.2v2h2.1V1.6H11v8.1h2.1v-6zm6.3 16.6h-6.3v-5.2H11v7.3h10.4v-7.3h-2.1v5.2z"/>
+</svg>
diff --git a/assets/icons/icon-dataset-ti.svg b/assets/icons/icon-dataset-ti.svg
new file mode 100644
index 00000000..028226b9
--- /dev/null
+++ b/assets/icons/icon-dataset-ti.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M23.4 13.5c-.2.5-.8.8-1.4.6l-3.7-1.5c-.7-.3-1.6-.3-2.3 0l-2.2.8c-1.3.5-2.6.5-3.9 0l-2.1-.8c-.7-.3-1.6-.3-2.3 0l-3.8 1.5c-.5.2-1.1 0-1.4-.6-.2-.5 0-1.1.6-1.4l3.7-1.5c1.3-.5 2.6-.5 3.9 0l2.1.8c.7.3 1.6.3 2.3 0l2.2-.8c1.3-.5 2.6-.5 3.9 0l3.7 1.5c.7.1.9.7.7 1.4zM13 3.7h6.3v2.1h-4.2v2.1h4.2v2h2.1V1.6H11v8.1h2v-6zm6.3 16.6H13v-5.2h-2v7.3h10.4v-7.3h-2.1v5.2z"/>
+</svg>

From 4e4120274e055e9c1aff870f605b54cf3e039f71 Mon Sep 17 00:00:00 2001
From: danieltwigt <daniel_twigt@hotmail.com>
Date: Tue, 16 Jun 2020 20:43:23 +0200
Subject: [PATCH 04/12] Change label text water level return period and tidal
 indicators layer

Change label text water level return period and tidal indicators layer
---
 components/data-set-controls.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index 055cc63c..e6b3442c 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -43,7 +43,7 @@
             id="layer-options-dropdown"
             v-model="selectedLayer"
             :options="items(dataset.layerOptions)"
-            :label="`Configure ${dataset.name} layer`"
+            :label="`Select ${dataset.name}`"
             class="data-set-controls__select-layer"
             @change="updateRasterLayer"
           />

From aae8e93e78d5cee7927fc130d60d0f269a1adabd Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 21:04:39 +0200
Subject: [PATCH 05/12] fix style issues of mapbox and zoom to center after
 clicking on map

---
 .../v-mapbox-raster-layer.vue                 |  4 +-
 layouts/default.vue                           | 37 +------------
 lib/mapbox/layers/get-raster-layer.js         |  4 +-
 package-lock.json                             | 52 +++++--------------
 package.json                                  |  4 +-
 .../mapbox/layers/get-spatial-layer.spec.js   |  6 +--
 6 files changed, 24 insertions(+), 83 deletions(-)

diff --git a/components/v-mapbox-components/v-mapbox-raster-layer.vue b/components/v-mapbox-components/v-mapbox-raster-layer.vue
index 1986d68e..d3dee2a5 100644
--- a/components/v-mapbox-components/v-mapbox-raster-layer.vue
+++ b/components/v-mapbox-components/v-mapbox-raster-layer.vue
@@ -51,7 +51,7 @@
 
             // Only add if tiles in source are not empty
             if (get('source.tiles[0]', newOptions)) {
-              this.map.addLayer(newOptions, 'background-features')
+              this.map.addLayer(newOptions, 'water-border')
             }
           }
         },
@@ -68,7 +68,7 @@
     mounted() {
       this.map = this.getMap()
       this.id = this.options.id
-      this.map.addLayer(this.options, 'background-features')
+      this.map.addLayer(this.options, 'water-border')
       this.map.on('click', event => {
         const bbox = {
           type: 'Point',
diff --git a/layouts/default.vue b/layouts/default.vue
index a7cf4d88..ee42140b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,10 +15,9 @@
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
         :zoom="1.8"
-        :center="[0, 0]"
-        map-style="mapbox://styles/global-data-viewer/ckaqyfcc63q1w1io3l3bpd50h?fresh=true"
+        map-style="mapbox://styles/global-data-viewer/cjtss3jfb05w71fmra13u4qqm?fresh=true"
         data-v-step="5"
-        @mb-load="setStyleLayers"
+        @mb-load="mapLoaded = true"
       >
         <v-mapbox-navigation-control :options="{ visualizePitch: true }" position="bottom-right" />
         <v-mapbox-selected-point-layer v-if="mapLoaded" :geometry="geometry" />
@@ -223,38 +222,6 @@
         'setActiveRasterLayer',
         'setGeographicalScope',
       ]),
-
-      setStyleLayers() {
-        // Wait for refs to be loaded
-        this.map = this.$refs.map.map
-        // Wait for map to be loaded and then add background labels and features
-        this.map.addLayer({
-          id: 'background-labels',
-          type: 'raster',
-          source: {
-            type: 'raster',
-            tiles: [
-              `https://api.mapbox.com/styles/v1/global-data-viewer/ckarrxvmx05rv1ips1l3vgluh/tiles/256/{z}/{x}/{y}@2x?access_token=${this.mapboxAccessToken}`,
-            ],
-            tileSize: 256,
-          },
-        })
-        this.map.addLayer({
-          id: 'background-features',
-          type: 'raster',
-          source: {
-            type: 'raster',
-            tiles: [
-              `https://api.mapbox.com/styles/v1/global-data-viewer/ckarrxnck9xjy1iqtqt0spezq/tiles/256/{z}/{x}/{y}@2x?access_token=${this.mapboxAccessToken}`,
-            ],
-            tileSize: 256,
-          },
-        })
-        this.map.on('styledata', () => {
-          // Wait on changed bakground before notifying all mapbox layers to be added
-          this.mapLoaded = true
-        })
-      },
       removeInfoText() {
         this.infoTextGeometry = {
           type: 'Point',
diff --git a/lib/mapbox/layers/get-raster-layer.js b/lib/mapbox/layers/get-raster-layer.js
index 4a0ac3f5..5406586c 100644
--- a/lib/mapbox/layers/get-raster-layer.js
+++ b/lib/mapbox/layers/get-raster-layer.js
@@ -10,7 +10,7 @@ const baseLayer = {
       mapbox.removeSource(this.id)
     }
     if (this.source.tiles.length > 0) {
-      mapbox.addLayer(this, 'background-features')
+      mapbox.addLayer(this, 'water-border')
     }
   },
   get(mapbox) {
@@ -18,7 +18,7 @@ const baseLayer = {
   },
   add(mapbox) {
     if (this.source.tiles.length > 0) {
-      mapbox.addLayer(this, 'background-features')
+      mapbox.addLayer(this, 'water-border')
     }
   },
 }
diff --git a/package-lock.json b/package-lock.json
index 93093ec4..c1d0a47e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2068,19 +2068,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
           "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
-        },
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
-        },
-        "url-parse-lax": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-          "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-          "requires": {
-            "prepend-http": "^2.0.0"
-          }
         }
       }
     },
@@ -14036,9 +14023,9 @@
       }
     },
     "mapbox-gl": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.10.1.tgz",
-      "integrity": "sha512-0aHt+lFUpYfvh0kMIqXqNXqoYMuhuAsMlw87TbhWrw78Tx2zfuPI0Lx31/YPUgJ+Ire0tzQ4JnuBL7acDNXmMg==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.11.0.tgz",
+      "integrity": "sha512-opIQf3C5RoKU5r9bHttTMhGAPcJet1/Cj2mdP7Ma2ylrAHjNPRc1i7KPyq8wjEZdJBMhd5qkIDlzUPM0TSncCQ==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.0",
         "@mapbox/geojson-types": "^1.0.2",
@@ -14060,7 +14047,7 @@
         "potpack": "^1.0.1",
         "quickselect": "^2.0.0",
         "rw": "^1.3.3",
-        "supercluster": "^7.0.0",
+        "supercluster": "^7.1.0",
         "tinyqueue": "^2.0.3",
         "vt-pbf": "^3.1.1"
       },
@@ -14284,15 +14271,6 @@
           "version": "0.13.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
           "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg=="
-        },
-        "yargs-parser": {
-          "version": "18.1.3",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
         }
       }
     },
@@ -14461,9 +14439,9 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
     "min-indent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
-      "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
     "minimalistic-assert": {
       "version": "1.0.1",
@@ -18284,9 +18262,9 @@
       }
     },
     "supercluster": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.0.0.tgz",
-      "integrity": "sha512-8VuHI8ynylYQj7Qf6PBMWy1PdgsnBiIxujOgc9Z83QvJ8ualIYWNx2iMKyKeC4DZI5ntD9tz/CIwwZvIelixsA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.0.tgz",
+      "integrity": "sha512-LDasImUAFMhTqhK+cUXfy9C2KTUqJ3gucLjmNLNFmKWOnDUBxLFLH9oKuXOTCLveecmxh8fbk8kgh6Q0gsfe2w==",
       "requires": {
         "kdbush": "^3.0.0"
       }
@@ -19186,7 +19164,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
       "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-      "dev": true,
       "requires": {
         "prepend-http": "^2.0.0"
       },
@@ -19194,8 +19171,7 @@
         "prepend-http": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
         }
       }
     },
@@ -19720,9 +19696,8 @@
       }
     },
     "vue2mapbox-gl": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/vue2mapbox-gl/-/vue2mapbox-gl-0.12.4.tgz",
-      "integrity": "sha512-okQbq1vkxG4sXRLdrgj+U1WRKHQDRKvotzC2NhqPldzCk3L9f95ucUiTrfW61cq1p5sq9gs80ayt8i2TxyEeHQ==",
+      "version": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
+      "from": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
       "requires": {
         "@mapbox/mapbox-gl-geocoder": "^4.4.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -21018,7 +20993,6 @@
       "version": "18.1.3",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
       "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
diff --git a/package.json b/package.json
index b5909ce4..193f8c23 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "file-saver": "^2.0.2",
     "frontmatter-markdown-loader": "^3.5.0",
     "lodash": "^4.17.15",
-    "mapbox-gl": "^1.10.1",
+    "mapbox-gl": "^1.11.0",
     "material-design-icons": "^3.0.1",
     "moment": "^2.26.0",
     "nuxt": "^2.12.2",
@@ -37,7 +37,7 @@
     "vue-gtag": "^1.6.2",
     "vue-markdown": "^2.2.4",
     "vue-tour": "^1.4.0",
-    "vue2mapbox-gl": "^0.12.4",
+    "vue2mapbox-gl": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
     "vuelidate": "^0.7.5",
     "vuex": "^3.4.0",
     "whatwg-fetch": "3.0.0"
diff --git a/test/unit/lib/mapbox/layers/get-spatial-layer.spec.js b/test/unit/lib/mapbox/layers/get-spatial-layer.spec.js
index f3039cc1..1068e9d9 100644
--- a/test/unit/lib/mapbox/layers/get-spatial-layer.spec.js
+++ b/test/unit/lib/mapbox/layers/get-spatial-layer.spec.js
@@ -35,7 +35,7 @@ describe('add', () => {
         type: 'raster',
       },
     })
-    expect(mapbox.addLayer.mock.calls[0][1]).toBe('background-features')
+    expect(mapbox.addLayer.mock.calls[0][1]).toBe('water-border')
   })
   test('dont add when tiles are empty', () => {
     const mapbox = {
@@ -66,7 +66,7 @@ describe('update', () => {
     rasterLayer.update(mapbox)
     expect(removeLayer).toHaveBeenCalledWith('raster')
     expect(removeSource).toHaveBeenCalledWith('raster')
-    expect(addLayer).toHaveBeenCalledWith(rasterLayer, 'background-features')
+    expect(addLayer).toHaveBeenCalledWith(rasterLayer, 'water-border')
   })
 
   test('do not remove layer when its not defined in mapbox', () => {
@@ -84,7 +84,7 @@ describe('update', () => {
     rasterLayer.update(mapbox)
     expect(removeLayer).not.toHaveBeenCalledWith('raster')
     expect(removeSource).not.toHaveBeenCalledWith('raster')
-    expect(addLayer).toHaveBeenCalledWith(rasterLayer, 'background-features')
+    expect(addLayer).toHaveBeenCalledWith(rasterLayer, 'water-border')
   })
 
   test('do not add new layer when tiles are empty', () => {

From 6e2924943d858552a3435dae1a9fb8e252ac157e Mon Sep 17 00:00:00 2001
From: danieltwigt <daniel_twigt@hotmail.com>
Date: Tue, 16 Jun 2020 21:28:57 +0200
Subject: [PATCH 06/12] Minor change about text

Minor change about text
---
 assets/docs/about-text.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/docs/about-text.md b/assets/docs/about-text.md
index 882469d0..92c2fe76 100644
--- a/assets/docs/about-text.md
+++ b/assets/docs/about-text.md
@@ -4,10 +4,10 @@ Users are presented with global water and subsoil-related data through use of ou
 
 Datasets can be selected by using the selection menu on the right side of the screen. By activating the radial button, spatial maps can be enabled for each dataset. By activating the toggle button, time series can be enabled for each dataset at selected locations. If available at a location, time series for multiple datasets can be shown simultaneously. Furthermore, after registration the platform allows users to download selected data to the users device.  
 
-If you want to find out more about this initiative, please visit the [link WiKi](https://publicwiki.deltares.nl/display/BED).
+If you want to find out more about this initiative, please visit the [WiKi](https://publicwiki.deltares.nl/display/BED).
 
-Your feedback will help us to further improve Blue Earth Data. To provide your feedback, please use the following [link form](https://forms.gle/qaNHX1CCkGhf5m7i6).
+Your feedback will help us to further improve Blue Earth Data. To provide your feedback, please use the following [form](https://forms.gle/qaNHX1CCkGhf5m7i6).
 
 For further questions regarding the platform or the datasets included, please contact us at dataservices@deltares.nl.
 
-Deltares values your privacy. Our general Privacy Statement can be found [link here]( https://oss.deltares.nl/web/delft-fews/privacy-declaration).
+Deltares values your privacy. Our general Privacy Statement can be found [here]( https://oss.deltares.nl/web/delft-fews/privacy-declaration).

From 2135cb59c73730ae06069cb219a8e6152b5caf67 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 21:50:37 +0200
Subject: [PATCH 07/12] fix link in markdown open in seperate tab

---
 components/disclaimer-modal.vue              | 36 ++++++++++++++++----
 components/sidebar/sidebar.vue               | 16 ++++++---
 {assets => static}/docs/about-text.md        | 12 +++----
 {assets => static}/docs/cookie-agreements.md |  2 +-
 {assets => static}/docs/user-agreements.md   |  0
 5 files changed, 48 insertions(+), 18 deletions(-)
 rename {assets => static}/docs/about-text.md (69%)
 rename {assets => static}/docs/cookie-agreements.md (97%)
 rename {assets => static}/docs/user-agreements.md (100%)

diff --git a/components/disclaimer-modal.vue b/components/disclaimer-modal.vue
index f89c3623..c7e079fd 100644
--- a/components/disclaimer-modal.vue
+++ b/components/disclaimer-modal.vue
@@ -18,10 +18,18 @@
         <template v-slot:footer>
           <div class="modal__card-actions form-group">
             <div class="modal__card-actions__checkboxes">
-              <ui-checkbox :checked="agree" @input="setTarget($event, 'agree')">
+              <ui-checkbox
+                watches="['source']"
+                :checked="agree"
+                @input="setTarget($event, 'agree')"
+              >
                 I agree with the Conditions of Use
               </ui-checkbox>
-              <ui-checkbox :checked="cookie" @input="setTarget($event, 'cookie')">
+              <ui-checkbox
+                watches="['source']"
+                :checked="cookie"
+                @input="setTarget($event, 'cookie')"
+              >
                 I consent with the use of cookies
               </ui-checkbox>
             </div>
@@ -46,9 +54,6 @@
   import UiCheckbox from './ui-checkbox.vue'
   import UiButton from './ui-button.vue'
 
-  import userAgreements from '~/assets/docs/user-agreements.md'
-  import cookieAgreement from '~/assets/docs/cookie-agreements.md'
-
   export default {
     components: {
       UiCheckbox,
@@ -59,8 +64,8 @@
     data() {
       return {
         open: true,
-        userAgreements: userAgreements.html,
-        cookieAgreement: cookieAgreement.html,
+        userAgreements: '',
+        cookieAgreement: '',
         agree: false,
         cookie: false,
       }
@@ -72,6 +77,23 @@
         this.open = false
       }
     },
+    mounted() {
+      fetch('docs/user-agreements.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.userAgreements = response
+        })
+
+      fetch('docs/cookie-agreements.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.cookieAgreement = response
+        })
+    },
     validations: {
       cookie: {
         required,
diff --git a/components/sidebar/sidebar.vue b/components/sidebar/sidebar.vue
index aec4b36a..c3885215 100644
--- a/components/sidebar/sidebar.vue
+++ b/components/sidebar/sidebar.vue
@@ -15,9 +15,9 @@
         </template>
         <template v-slot:body>
           <vue-markdown
-            class="markdown"
+            :watches="['source']"
             :source="aboutText"
-            :anchor-attributes="{ target: '_blank', rel: 'noopener' }"
+            :anchor-attributes="{ target: '_blank' }"
           />
         </template>
       </ui-tray>
@@ -56,7 +56,6 @@
   import UiButton from '../../components/ui-button'
   import UiTray from '../../components/ui-tray'
   import AccountDetails from '../../components/account-details'
-  import aboutText from '~/assets/docs/about-text.md'
 
   export default {
     components: {
@@ -69,12 +68,21 @@
     data: () => ({
       aboutOpen: false,
       accountOpen: false,
-      aboutText: aboutText.html,
+      aboutText: '',
     }),
     computed: {
       ...mapState('preferences', ['user']),
       ...mapGetters('map', ['getActiveTheme']),
     },
+    mounted() {
+      fetch('docs/about-text.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.aboutText = response
+        })
+    },
     methods: {
       login() {
         auth.signinRedirect({ state: window.location.href })
diff --git a/assets/docs/about-text.md b/static/docs/about-text.md
similarity index 69%
rename from assets/docs/about-text.md
rename to static/docs/about-text.md
index 882469d0..06422ba6 100644
--- a/assets/docs/about-text.md
+++ b/static/docs/about-text.md
@@ -1,13 +1,13 @@
-This is a beta release of the Blue Earth Data platform. The Blue Earth Data platform has been developed by Deltares as a free, web-based application to support the study and sharing of integrated water and subsoil-related data. The platform provides indicative data, which is primarily intended for professional specialists and researchers.  
+This is a beta release of the Blue Earth Data platform. The Blue Earth Data platform has been developed by Deltares as a free, web-based application to support the study and sharing of integrated water and subsoil-related data. The platform provides indicative data, which is primarily intended for professional specialists and researchers.
 
-Users are presented with global water and subsoil-related data through use of our multi-data viewer. The datasets included are subdivided over different themes and areas of interest, which can be selected on the left side of the screen. The global data is grouped under the Flooding, Coastal Management and Offshore themes.  These themes incorporate datasets for amongst others global shoreline changes, global bathymetry, global river discharge and storm surge forecasts and global metocean conditions. Additionally, some regional datasets are added for the North Sea. Further information with each dataset is provided through the data selection menu.    
+Users are presented with global water and subsoil-related data through use of our multi-data viewer. The datasets included are subdivided over different themes and areas of interest, which can be selected on the left side of the screen. The global data is grouped under the Flooding, Coastal Management and Offshore themes. These themes incorporate datasets for amongst others global shoreline changes, global bathymetry, global river discharge and storm surge forecasts and global metocean conditions. Additionally, some regional datasets are added for the North Sea. Further information with each dataset is provided through the data selection menu.
 
-Datasets can be selected by using the selection menu on the right side of the screen. By activating the radial button, spatial maps can be enabled for each dataset. By activating the toggle button, time series can be enabled for each dataset at selected locations. If available at a location, time series for multiple datasets can be shown simultaneously. Furthermore, after registration the platform allows users to download selected data to the users device.  
+Datasets can be selected by using the selection menu on the right side of the screen. By activating the radial button, spatial maps can be enabled for each dataset. By activating the toggle button, time series can be enabled for each dataset at selected locations. If available at a location, time series for multiple datasets can be shown simultaneously. Furthermore, after registration the platform allows users to download selected data to the users device.
 
-If you want to find out more about this initiative, please visit the [link WiKi](https://publicwiki.deltares.nl/display/BED).
+If you want to find out more about this initiative, please visit the [WiKi](https://publicwiki.deltares.nl/display/BED).
 
-Your feedback will help us to further improve Blue Earth Data. To provide your feedback, please use the following [link form](https://forms.gle/qaNHX1CCkGhf5m7i6).
+Your feedback will help us to further improve Blue Earth Data. To provide your feedback, please use the following [form](https://forms.gle/qaNHX1CCkGhf5m7i6).
 
 For further questions regarding the platform or the datasets included, please contact us at dataservices@deltares.nl.
 
-Deltares values your privacy. Our general Privacy Statement can be found [link here]( https://oss.deltares.nl/web/delft-fews/privacy-declaration).
+Deltares values your privacy. Our general Privacy Statement can be found [here](https://oss.deltares.nl/web/delft-fews/privacy-declaration).
diff --git a/assets/docs/cookie-agreements.md b/static/docs/cookie-agreements.md
similarity index 97%
rename from assets/docs/cookie-agreements.md
rename to static/docs/cookie-agreements.md
index 195a4f09..3e9001e2 100644
--- a/assets/docs/cookie-agreements.md
+++ b/static/docs/cookie-agreements.md
@@ -6,4 +6,4 @@ Deltares uses two types of cookies for this website: functional cookies and anal
 
 The functional cookies are used to identify you for the duration of your session, and are needed to make the website work properly. The session cookie is removed by your browser after you close your browser.
 
-The analytical cookies in anonymous mode are used to measure your and other visitors’ use of this website, for purposes of improving the website. Your IP address is anonymized so that it is never stored or written to disk. For more information, please see the Google Analytics’ Privacy Overview and Google Analytics Cookie Usage on Websites.  
+The analytical cookies in anonymous mode are used to measure your and other visitors’ use of this website, for purposes of improving the website. Your IP address is anonymized so that it is never stored or written to disk. For more information, please see the Google Analytics’ Privacy Overview and Google Analytics Cookie Usage on Websites.
diff --git a/assets/docs/user-agreements.md b/static/docs/user-agreements.md
similarity index 100%
rename from assets/docs/user-agreements.md
rename to static/docs/user-agreements.md

From 7072da99d5bc6717beac66fd83095b210fdc8090 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 22:03:14 +0200
Subject: [PATCH 08/12] Update graph-line.vue

---
 components/graph-line.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/graph-line.vue b/components/graph-line.vue
index b8c54010..729d6a40 100644
--- a/components/graph-line.vue
+++ b/components/graph-line.vue
@@ -330,12 +330,13 @@
 </script>
 
 <style>
-  .graph-line__aspect-ratio.image {
+  .graph-line__aspect-ratio--image {
     height: 1200px;
   }
 
-  .graph-image {
+  .graph-line__image {
     height: 1200px;
+    max-width: 100%;
     background-repeat: no-repeat;
     background-size: 50% 100%;
   }
@@ -349,10 +350,6 @@
     min-height: 400px;
   }
 
-  .graph-line__aspect-ratio--image {
-    height: 600px;
-  }
-
   .graph-line__chart {
     position: absolute;
     top: 0;
@@ -361,12 +358,6 @@
     height: 85%;
   }
 
-  .graph-line__image {
-    height: 600px;
-    background-repeat: no-repeat;
-    background-size: 50% 100%;
-  }
-
   .graph-line__collapsible .graph-line__caption {
     cursor: pointer;
   }

From 092d5a1679eb4b3deeb0991f60217eca2d77f749 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 22:11:32 +0200
Subject: [PATCH 09/12] relative url to docs and change color of markdown url

---
 components/disclaimer-modal.vue | 16 ++++------------
 components/sidebar/sidebar.vue  |  3 ++-
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/components/disclaimer-modal.vue b/components/disclaimer-modal.vue
index c7e079fd..6028482b 100644
--- a/components/disclaimer-modal.vue
+++ b/components/disclaimer-modal.vue
@@ -18,18 +18,10 @@
         <template v-slot:footer>
           <div class="modal__card-actions form-group">
             <div class="modal__card-actions__checkboxes">
-              <ui-checkbox
-                watches="['source']"
-                :checked="agree"
-                @input="setTarget($event, 'agree')"
-              >
+              <ui-checkbox :checked="agree" @input="setTarget($event, 'agree')">
                 I agree with the Conditions of Use
               </ui-checkbox>
-              <ui-checkbox
-                watches="['source']"
-                :checked="cookie"
-                @input="setTarget($event, 'cookie')"
-              >
+              <ui-checkbox :checked="cookie" @input="setTarget($event, 'cookie')">
                 I consent with the use of cookies
               </ui-checkbox>
             </div>
@@ -78,7 +70,7 @@
       }
     },
     mounted() {
-      fetch('docs/user-agreements.md')
+      fetch('/docs/user-agreements.md')
         .then(res => {
           return res.text()
         })
@@ -86,7 +78,7 @@
           this.userAgreements = response
         })
 
-      fetch('docs/cookie-agreements.md')
+      fetch('/docs/cookie-agreements.md')
         .then(res => {
           return res.text()
         })
diff --git a/components/sidebar/sidebar.vue b/components/sidebar/sidebar.vue
index c3885215..c2b7912e 100644
--- a/components/sidebar/sidebar.vue
+++ b/components/sidebar/sidebar.vue
@@ -15,6 +15,7 @@
         </template>
         <template v-slot:body>
           <vue-markdown
+            class="markdown"
             :watches="['source']"
             :source="aboutText"
             :anchor-attributes="{ target: '_blank' }"
@@ -75,7 +76,7 @@
       ...mapGetters('map', ['getActiveTheme']),
     },
     mounted() {
-      fetch('docs/about-text.md')
+      fetch('/docs/about-text.md')
         .then(res => {
           return res.text()
         })

From aa8b819032cfe1cc8c4d8e7487e6475172633dde Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 22:18:50 +0200
Subject: [PATCH 10/12] fix error when no raster selected

---
 components/data-set-controls.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index e6b3442c..014af538 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -89,6 +89,9 @@
     watch: {
       activeRasterData: {
         handler(data) {
+          if (data.length === 0) {
+            return
+          }
           const datasets = this.getDatasets
           const meta = datasets[this.getActiveRasterLayer].metadata
           const raster = datasets[this.getActiveRasterLayer].raster

From 46659471759e2f1cfde030ecf9242cc0bcb0d26b Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 16 Jun 2020 22:21:15 +0200
Subject: [PATCH 11/12] set default center and zoom in mapbox style

---
 layouts/default.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index ee42140b..9b5d1d2a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,7 +14,6 @@
         ref="map"
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
-        :zoom="1.8"
         map-style="mapbox://styles/global-data-viewer/cjtss3jfb05w71fmra13u4qqm?fresh=true"
         data-v-step="5"
         @mb-load="mapLoaded = true"

From c4f9fa32b609363c084984d618d0c683d92deb8f Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Fri, 19 Jun 2020 17:47:47 +0200
Subject: [PATCH 12/12] update vue2mapbox-gl and comments review

---
 layouts/default.vue | 2 +-
 package-lock.json   | 5 +++--
 package.json        | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 9b5d1d2a..4839efb6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,7 +14,7 @@
         ref="map"
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
-        map-style="mapbox://styles/global-data-viewer/cjtss3jfb05w71fmra13u4qqm?fresh=true"
+        map-style="mapbox://styles/global-data-viewer/cjtss3jfb05w71fmra13u4qqm"
         data-v-step="5"
         @mb-load="mapLoaded = true"
       >
diff --git a/package-lock.json b/package-lock.json
index c1d0a47e..c87123e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19696,8 +19696,9 @@
       }
     },
     "vue2mapbox-gl": {
-      "version": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
-      "from": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/vue2mapbox-gl/-/vue2mapbox-gl-0.12.5.tgz",
+      "integrity": "sha512-9jya5nzD50yeI/9gUbOo70porvRnaloIvtqp4lDT/lQOfcijfrxpn5ZNUPkr1McL12JjJw9UP2ZH2inHVIVZEA==",
       "requires": {
         "@mapbox/mapbox-gl-geocoder": "^4.4.1",
         "resize-observer-polyfill": "^1.5.1"
diff --git a/package.json b/package.json
index 193f8c23..879d3a7b 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "vue-gtag": "^1.6.2",
     "vue-markdown": "^2.2.4",
     "vue-tour": "^1.4.0",
-    "vue2mapbox-gl": "git+https://github.com/openearth/vue2mapbox-gl.git#51502dbcf8bab2a45319711460fddb208edd73f0",
+    "vue2mapbox-gl": "^0.12.5",
     "vuelidate": "^0.7.5",
     "vuex": "^3.4.0",
     "whatwg-fetch": "3.0.0"