use different dom element for mapstatus, to don't clash with existing leaflet css classes

Author: yvess

vue/screenshot-service/screenshot-server.js

@@ -78,7 +78,7 @@ app.get('*', async (req, res) => {
     waitLoad: true,
     waitNetworkIdle: true
   });
-  await page.waitForSelector('#map.loaded');
+  await page.waitForSelector('#mapstatus.loaded');
   await page.waitFor(500); // extra 500ms wait, for map tiles
   const screenshotBuffer = await page.screenshot({ encoding: 'binary' });
   // await browser.close();

vue/src/components/SnapshotMap.vue

@@ -11,7 +11,8 @@
       </v-slide-x-reverse-transition>
 
       <v-container fluid class="pa-0" ref="mapbox">
-        <div id="map" :class="{ loaded: isMapLoaded}"></div>
+        <div id="map"></div>
+        <span id="mapstatus" :class="{ loaded: isMapLoaded, waiting: !isMapLoaded }"></span>
       </v-container>
 
       <v-btn