wip: print

functions/export.js

@@ -0,0 +1,61 @@
+import { stringify } from 'query-string'
+import { launchChromium } from 'playwright-aws-lambda'
+
+const scale = 0.75
+const viewport = {
+  width: 1122 / scale,
+  height: 792 / scale,
+}
+
+export const handler = async (event) => {
+  const { layers, viewer, lat, lng, center, zoom } = event.queryStringParameters
+
+  try {
+    const browser = await launchChromium()
+
+    const page = await browser.newPage({
+      viewport,
+    })
+
+    page.on('pageerror', console.error)
+
+    const query = stringify({
+      print: 'noui',
+      layers,
+      lat,
+      lng,
+      center,
+      zoom: zoom,
+    })
+
+    await page.goto(
+      `${ process.env.URL }/${ viewer }/?${ query }`,
+      { waitUntil: 'networkidle' },
+    )
+
+    // this somehow solves the issue of a blank page being returned as pdf
+    await new Promise((res) => setTimeout(() => res(), 1000))
+
+    const pdf = await page.pdf({ format: 'a4', scale, landscape: true })
+
+    await page.close()
+
+    await browser.close()
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({
+        pdf: pdf.toString('base64'),
+      }),
+    }
+  } catch (e) {
+    console.log('error', e)
+
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        error: 'Someting went wrong',
+      }),
+    }
+  }
+}

jsconfig.json

@@ -5,5 +5,5 @@
       "~/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "functions"]
 }

netlify.toml

@@ -1,6 +1,15 @@
 [build]
   command = "yarn build"
   publish = "dist/"
+  functions= "functions"
+
+[build.environment]
+  AWS_LAMBDA_JS_RUNTIME = "nodejs14.21.1"
+  NODE_VERSION = "v14.21.1"
+
+[functions]
+  directory = "functions"
+  node_bundler = "esbuild"
 
 [[redirects]]
   from = "https://rws-viewer.netlify.app/*"

package.json

@@ -50,6 +50,8 @@
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "mkdirp": "^1.0.4",
     "patch-package": "^6.4.7",
+    "playwright-aws-lambda": "0.9.0",
+    "playwright-core": "1.28.1",
     "postinstall-postinstall": "^2.1.0",
     "ramda": "^0.27.1",
     "rimraf": "^3.0.2",
@@ -86,5 +88,8 @@
     "vue-cli-plugin-vuetify": "^2.4.3",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
+  },
+  "optionalDependencies": {
+    "playwright-chromium": "^1.31.2"
   }
 }

src/App.vue

@@ -1,16 +1,16 @@
 <template>
-  <app-shell :header-title="viewerName">
+  <app-shell :header-title="viewerName" :print-mode="printMode">
     <template slot="header-right">
       <search-bar :loading="loading" @onSearch="handleSearch" />
       <locale-switcher />
     </template>
     <div v-if="!showApiLayer">
       <v-fade-transition mode="out-in">
-        <layer-order v-if="wmsLayerIds.length" />
+        <layer-order v-if="wmsLayerIds.length && showUI" />
       </v-fade-transition>
-      <mapbox-coordinates :lng-lat="lngLat" />
+      <mapbox-coordinates v-if="showUI" :lng-lat="lngLat" />
       <v-fade-transition mode="out-in">
-        <mapbox-legend v-if="wmsLayerIds.length" />
+        <mapbox-legend v-if="wmsLayerIds.length" :expanded="!showUI" />
       </v-fade-transition>
     </div>
 
@@ -26,12 +26,12 @@
       mapbox-style="mapbox://styles/siggyf/ckww2c33f0xlf15nujlx41fe2"
       :center="mapCenter"
       :zoom="mapZoom"
-      @load="setMapLoaded"
+      @load="handleMapLoad"
     >
       <time-slider
         v-if="showTimeslider"
         :timings="formattedTimeExtent"
-        :value="formattedTimeExtent[formattedTimeExtent.length -1]"
+        :value="formattedTimeExtent[formattedTimeExtent.length - 1]"
         mode="simple-slider"
         @input="onTimingSelection"
       />
@@ -55,7 +55,7 @@
 
       <map-zoom :extent="zoomExtent" />
       <MapMouseMove @mousemove="onMouseMove" />
-      <v-mapbox-navigation-control />
+      <v-mapbox-navigation-control v-if="showUI" />
       <mapbox-draw-control
         :draw-mode="drawMode"
         :drawn-features="drawnFeatures"
@@ -65,6 +65,11 @@
         :draw-mode="drawMode"
         @click="handleFeatureClick"
       />
+      <map-export-control
+        v-if="showUI"
+        :layers="wmsLayerIds"
+        :viewer="viewerConfig"
+      />
       <map-layer-info
         v-if="activeFlattenedLayers.length && !drawMode"
         :layer="activeFlattenedLayers[0]"
@@ -93,6 +98,7 @@
   import axios from 'axios'
   import LayersDialog from '~/components/LayersDialog/LayersDialog'
   import SearchBar from '~/components/SearchBar/SearchBar'
+  import MapExportControl from './components/MapExportControl/MapExportControl.vue'
 
   export default {
     components: {
@@ -113,6 +119,7 @@
       MapboxCoordinates,
       LayersDialog,
       SearchBar,
+      MapExportControl,
     },
 
     data: () => ({
@@ -126,8 +133,28 @@
     }),
 
     computed: {
-      ...mapGetters('app', [ 'viewerName', 'appNavigationOpen', 'appNavigationWidth' ]),
-      ...mapGetters('map', [ 'drawnFeatures', 'drawMode', 'wmsLayerIds', 'wmsLayers', 'filteredLayerId', 'mapCenter', 'mapZoom', 'zoomExtent', 'selectedLayerForSelection', 'activeFlattenedLayers', 'wmsApiLayer', 'multipleSelection' ]),
+      ...mapGetters('app', [
+        'viewerName',
+        'viewerConfig',
+        'appNavigationOpen',
+        'appNavigationWidth',
+        'printMode',
+      ]),
+      ...mapGetters('map', [
+        'drawnFeatures',
+        'drawMode',
+        'wmsLayerIds',
+        'wmsLayers',
+        'filteredLayerId',
+        'mapCenter',
+        'mapZoom',
+        'mapLoaded',
+        'zoomExtent',
+        'selectedLayerForSelection',
+        'activeFlattenedLayers',
+        'wmsApiLayer',
+        'multipleSelection',
+      ]),
       ...mapGetters('data', [ 'timeExtent' ]),
       formattedTimeExtent() {
         return this.formatTimeExtent(this.timeExtent)
@@ -138,27 +165,43 @@
       },
       showApiLayer() {
         const { name } = this.$route
-        return name==='download.api' ? true:false
+        return name === 'download.api' ? true : false
+      },
+      showUI() {
+        return this.printMode !== 'noui'
       },
     },
+
     watch: {
       //Set as default timestamp the last value of the timeExtent array
       formattedTimeExtent() {
         if (this.formattedTimeExtent.length) {
-          this.setSelectedTimestamp(this.formattedTimeExtent[this.formattedTimeExtent.length -1].t1)
+          this.setSelectedTimestamp(
+            this.formattedTimeExtent[this.formattedTimeExtent.length - 1].t1,
+          )
         }
       },
+      printMode() {
+        this.setAppNavigationWidth({ width: this.printMode === 'noui' ? 0 : 500 })
+      },
     },
+
     mounted() {
       this.$router.onReady(this.getAppData)
     },
 
     methods: {
+      ...mapActions('app', [ 'setAppNavigationWidth' ]),
       ...mapActions('data', [ 'getAppData', 'setSelectedTimestamp' ]),
-      ...mapActions('map', [ 'adds', 'removeDrawnFeature', 'addDrawnFeature', 'setMapLoaded' ]),
+      ...mapActions('map', [
+        'adds',
+        'removeDrawnFeature',
+        'addDrawnFeature',
+        'setMapLoaded',
+      ]),
       formatTimeExtent(extent) {
         if (extent.length) {
-          const formattedTimeExtent = extent.map(s => ({
+          const formattedTimeExtent = extent.map((s) => ({
             label: s.split('-')[0],
             t1: new Date(s),
             t2: undefined,
@@ -172,17 +215,16 @@
         const timestamp = event
         this.setSelectedTimestamp(timestamp.t1)
       },
-      
+
       async handleFeatureClick(clickData) {
-
         const feature = await getFeatureInfo({
           url: this.selectedLayerForSelection.url,
           layer: this.selectedLayerForSelection.layer,
           ...clickData,
         })
-    
+
         if (feature) {
-          if (this.drawnFeatures.find(f => f.id === feature.id)) {
+          if (this.drawnFeatures.find((f) => f.id === feature.id)) {
             this.removeDrawnFeature(feature)
           } else {
             this.addDrawnFeature(feature)
@@ -192,12 +234,14 @@
       onMouseMove(e) {
         this.lngLat = e.lngLat
       },
-      handleSearch: debounce(async function(val) {
+      handleSearch: debounce(async function (val) {
         try {
           this.loading = true
 
           if (val.trim()) {
-            const { data } = await axios(`/api/search?viewer=${ this.viewerName }&query=${ val }`)
+            const { data } = await axios(
+              `/api/search?viewer=${ this.viewerName }&query=${ val }`,
+            )
             this.layers = data
             this.layersDialogOpen = true
           }
@@ -210,20 +254,33 @@
       closeLayersDialog() {
         this.layersDialogOpen = false
       },
+      handleMapLoad(event) {
+        const map = event.target
+        this.setMapLoaded(true)
+
+        const { zoom, lat, lng }= this.$route.query
+
+        if (zoom) {
+          map.setZoom(zoom)
+        }
+
+        if (lat && lng) {
+          map.setCenter([ lng, lat ])
+        }
+      },
     },
   }
 </script>
 <style>
-
 .mapboxgl-ctrl-top-right {
-    top: 0;
-    right: 0;
+  top: 0;
+  right: 0;
 }
 
-@media only screen and (max-width:1199px) {
+@media only screen and (max-width: 1199px) {
   .mapboxgl-ctrl-top-right {
     top: 0;
     right: calc(100vw - 560px);
   }
-  }
+}
 </style>

src/components/AppShell/AppShell.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app>
     <app-header
+      v-if="printMode !== 'noui'"
       :title="headerTitle"
       :theme="theme"
     >
@@ -12,7 +13,7 @@
     <v-main>
       <slot name="map" />
       <slot />
-      <app-sidebar />
+      <app-sidebar v-if="printMode !== 'noui'" />
     </v-main>
   </v-app>
 </template>
@@ -23,10 +24,12 @@
 
   export default {
     name: 'AppShell',
+
     components: {
       AppHeader,
       AppSidebar,
     },
+
     props: {
       headerTitle: {
         type: String,
@@ -37,6 +40,10 @@
         default: 'dark',
         validator: value => value === 'dark' || value === 'light',
       },
+      printMode: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

src/components/MapComponents/MapZoom.js

@@ -19,10 +19,11 @@ export default {
     },
     zoomToExtent() {
       const map = this.getMap()
+
       if (map && this.extent.length) {
          map.fitBounds(this.extent, {
           padding: {
-            left: this.appNavigationWidth,
+            left: 100 + this.appNavigationWidth,
             top: 100,
             right: 100,
             bottom: 100,