Feat/screenshot

package.json

@@ -52,6 +52,7 @@
     "exponential-backoff": "^3.1.1",
     "file-saver": "^2.0.5",
     "html-loader": "4.2.0",
+    "html2canvas": "^1.4.1",
     "inquirer": "^8.2.0",
     "jszip": "^3.7.1",
     "jszip-utils": "^0.1.0",

public/translations/en.json

@@ -95,5 +95,6 @@
   "whatIsYourEmail": "What is your email?",
   "whoAreYou": "Who are you?",
   "wmsLayer": "WMS layer",
-  "wmsUrl": "WMS url"
+  "wmsUrl": "WMS url",
+  "screenshot": "Take a snapshot of the current view and save it to png"
 }

public/translations/nl.json

@@ -95,5 +95,6 @@
   "whatIsYourEmail": "Wat is uw e-mailadres?",
   "whoAreYou": "Wie bent u?",
   "wmsLayer": "WMS laag",
-  "wmsUrl": "WMS url"
+  "wmsUrl": "WMS url",
+  "screenshot": "Maak een snapshot van het huidige weergave en sla deze op naar png"
 }

src/App.vue

@@ -8,6 +8,7 @@
         :items="localeItems"
         @input="switchLocaleAndAddViewerData($event.title)"
       />
+      <screenshot-button  :map="mapInstance" />
       <burger-menu
         :loadingburger="localeIsLoading"
         @open-contact-form="onOpenContactForm"
@@ -59,13 +60,15 @@
     />
 
     <v-mapbox
+      ref="mapbox"
       slot="map"
       :access-token="accessToken"
       map-style="mapbox://styles/siggyf/ckww2c33f0xlf15nujlx41fe2"
       :center="mapCenter"
       :zoom="mapZoom"
       class="mapbox-map"
       :style="`--sidebar-width: ${appNavigationWidth}px`"
+      :map-options="{ preserveDrawingBuffer: true }" 
       @mb-load="setMapLoaded"
     >
       <time-slider
@@ -141,6 +144,7 @@
   import FeedbackDialog from './components/FeedbackDialog/FeedbackDialog.vue'
   import AcknowledgmentsDialog from '~/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue'
   import { getCookie, setCookie } from './lib/cookies'
+  import ScreenshotButton from '~/components/ScreenshotButton/ScreenshotButton'
 
   const removeRegion = locale => locale.replace(/-.+/, '')
   const localeIsAvailable = locale => availableLocales.includes(locale)
@@ -166,6 +170,7 @@
       UserAgreementDialog,
       FeedbackDialog,
       AcknowledgmentsDialog,
+      ScreenshotButton
     },
 
     data: () => ({
@@ -188,6 +193,7 @@
       feedbackDialogOpen: false,
       clickedUserAgreementOpen: false,
       acknowledgmentsDialogOpen: false,
+      mapInstance: null
     }),
 
     computed: {
@@ -220,6 +226,14 @@
     },
 
     mounted() {
+      this.$nextTick(() => {
+        if (this.$refs.mapbox && this.$refs.mapbox.map) {
+          this.mapInstance = this.$refs.mapbox.map;
+        } else {
+          console.error("Mapbox instance is not available");
+        }
+      });
+
       this.$router.onReady(async (route) => {
         const savedLocale = window.localStorage.getItem('locale')
         let browserLocales = []
@@ -322,7 +336,7 @@
             this.layersDialogOpen = true
           }
         } catch (e) {
           console.log(e)
         } finally {
           this.searchIsLoading = false
         }