Improve map performance by leaving preserveDrawingBuffer set to false

(and still making map downloads work by applying the trick from https://github.com/mapbox/mapbox-gl-js/issues/2766#issuecomment-370758650)

src/components/MapDownloadControl.vue

@@ -10,12 +10,15 @@ export default {
   inject: ['map'],
   methods: {
     downloadMap () {
-      let link = document.createElement('a')
-      link.download = 'map.png'
-      link.href = this.map.getCanvas().toDataURL()
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
+      this.map.once('render', () => {
+        let link = document.createElement('a')
+        link.download = 'map.png'
+        link.href = this.map.getCanvas().toDataURL()
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      })
+      this.map._render()
     }
   }
 }

src/views/Map.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="map-layout" ref="mapLayout">
-    <MglMap v-if="showMap && mapStyle" :mapStyle="mapStyle" :bounds.sync="bounds" :fitBoundsOptions="fitBoundsOptions" :center="center" :zoom="zoom" :dragRotate="false" :preserveDrawingBuffer="!$mq.mobile" :attributionControl="false" class="map" @load="onMapLoaded" @click="onMapClicked" @contextmenu="onMapRightClicked">
+    <MglMap v-if="showMap && mapStyle" :mapStyle="mapStyle" :bounds.sync="bounds" :fitBoundsOptions="fitBoundsOptions" :center="center" :zoom="zoom" :dragRotate="false" :attributionControl="false" class="map" @load="onMapLoaded" @click="onMapClicked" @contextmenu="onMapRightClicked">
       <MglGeolocateControl :positionOptions="{ enableHighAccuracy: true }" :fitBoundsOptions="{ maxZoom: 12.5 }" :trackUserLocation="true" position="top-right" />
       <MglNavigationControl position="top-right" :showCompass="false" />
       <MglScaleControl position="bottom-left" />