Add map control

Author: mugetsu

babel.config.js

@@ -9,19 +9,11 @@ module.exports = function(api) {
         [
           '@babel/preset-env',
           {
-            modules: 'commonjs',
             targets: {
               node: 'current'
             }
           }
         ]
-      ],
-      plugins: [
-        'syntax-dynamic-import',
-        ['transform-runtime', {
-          polyfill: false,
-          regenerator: true
-        }]
       ]
     }
   }

components/Map/index.vue

@@ -18,6 +18,10 @@ export default {
       const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
       mapboxgl.accessToken = token
 
+      let totals
+      let markers = {}
+      let markersOnScreen = {}
+      let point_counts = []
       const colors = ['#ffa332', '#66a266', '#b20000']
 
       const map = new mapboxgl.Map({
@@ -27,10 +31,7 @@ export default {
         zoom: 1.6
       })
 
-      let markers = {}
-      let markersOnScreen = {}
-      let point_counts = []
-      let totals
+      map.addControl(new mapboxgl.NavigationControl())
 
       const addLayers = map => {
         map.addSource('covid', {
@@ -114,7 +115,7 @@ export default {
 
             map.easeTo({
               center: features[0].geometry.coordinates,
-              zoom: map.getZoom() + 1
+              zoom: zoom
             })
           })
       })

nuxt.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 const pkg = require('./package')
+const _ = require('lodash')
 
 const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
   base: `/${process.env.REPO_NAME}/`
@@ -14,8 +15,7 @@ module.exports = {
   ** Environment variables
   */
   env: {
-    accessToken: process.env.MAPBOX_TOKEN,
-    apiUrl: process.env.API_URL
+    accessToken: process.env.MAPBOX_TOKEN
   },
 
   /*
@@ -52,17 +52,36 @@ module.exports = {
   /*
   ** Plugins to load before mounting the App
   */
-  plugins: [
-    '~/plugins/axios'
-  ],
+  plugins: [],
 
   /*
   ** Nuxt.js modules
   */
   modules: [
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    '@nuxtjs/pwa'
   ],
 
+  /*
+  ** Axios configuration
+  */
+  axios: {
+    baseURL: process.env.API_URL || 'http://localhost:3000/'
+  },
+
+  /*
+  ** PWA configuration
+  */
+  pwa: {
+    manifest: {
+      name: pkg.author.name,
+      short_name: pkg.author.name.split(' ')[0]
+    },
+    icons: {
+      sizes: [16, 32, 180, 192, 512]
+    }
+  },
+
   /*
   ** Router middleware
   */

plugins/axios.js

@@ -1,9 +1,13 @@
 export default {
-  async getData({ commit }, ctx) {
+  async nuxtServerInit({ commit }, ctx) {
     await this.$axios.get('/all')
       .then(res => {
         if (res.status === 200) {
+          // const {
+          //   latest
+          // } = res.data
           commit('SET_DATA', res.data)
+          // commit('SET_LATEST', latest)
         }
       })
       .catch(err => {

store/actions.js

@@ -10,7 +10,6 @@ export default {
       type: 'FeatureCollection',
       features: []
     }
-    // const toCollection = (status, locations, collection) => {
     confirmed.locations.forEach((location, index) => {
       const recovered_locations = recovered.locations[index]
       const dead_locations = deaths.locations[index]
@@ -47,10 +46,6 @@ export default {
         }
       })
     })
-    // }
-    // toCollection('confirmed', confirmed.locations, dataCollection)
-    // toCollection('recovered', recovered.locations, dataCollection)
-    // toCollection('dead', deaths.locations, dataCollection)
     state.data = dataCollection
   }
 }