├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── src
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── plugins
    │   └── vuetify.js
    ├── main.js
    ├── App.vue
    └── components
    │   └── Map.vue
├── babel.config.js
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bots/corona-tracker-vue/master/public/favicon.ico


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bots/corona-tracker-vue/master/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify';
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   vuetify,
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-content>
 4 |       <Map/>
 5 |     </v-content>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | import Map from './components/Map';
11 | 
12 | export default {
13 |   name: 'App',
14 | 
15 |   components: {
16 |     Map,
17 |   },
18 | 
19 |   data: () => ({
20 |     //
21 |   }),
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # corona-tracker
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |     <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css">
12 |   </head>
13 |   <body>
14 |     <noscript>
15 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "corona-tracker",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "mapbox-gl": "^1.9.0",
13 |     "vue": "^2.6.11",
14 |     "vue-mapbox": "^0.4.1",
15 |     "vuetify": "^2.2.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.2.0",
19 |     "@vue/cli-plugin-eslint": "~4.2.0",
20 |     "@vue/cli-service": "~5.0.8",
21 |     "babel-eslint": "^10.0.3",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.1.2",
24 |     "sass": "^1.19.0",
25 |     "sass-loader": "^8.0.0",
26 |     "vue-cli-plugin-vuetify": "~2.0.5",
27 |     "vue-template-compiler": "^2.6.11",
28 |     "vuetify-loader": "^1.3.0"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     },
42 |     "rules": {}
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/Map.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MglMap
 3 |     :accessToken="accessToken"
 4 |     :mapStyle.sync="mapStyle"
 5 |   >
 6 |     <MglMarker v-for="(l, key) in locations" :key="key" :coordinates="[l.coordinates.longitude, l.coordinates.latitude]" @click="activateMarker(l)">
 7 |       <MglPopup>
 8 |         <VCard>
 9 |           <div>Country: {{ l.country }}</div>
10 |           <div v-if="l.province">Province: {{ l.province }}</div>
11 |           <div>Number of confirmed cases: {{ l.latest.confirmed }}</div>
12 |         </VCard>
13 |       </MglPopup>
14 |     </MglMarker>
15 |   </MglMap>
16 | </template>
17 | 
18 | <script>
19 |   import Mapbox from "mapbox-gl";
20 |   import { MglMap, MglPopup, MglMarker } from "vue-mapbox"
21 | 
22 |   export default {
23 |     name: 'Map',
24 | 
25 |     components: {
26 |       MglMap,
27 |       MglPopup,
28 |       MglMarker,
29 |     },
30 | 
31 |     data() {
32 |       return {
33 |         accessToken: process.env.VUE_APP_MAPBOX_TOKEN,
34 |         mapStyle: 'mapbox://styles/mapbox/dark-v10',
35 |         locations: null,
36 |         activeMarker: null,
37 |         cases: null,
38 |         province: null,
39 |         country: null
40 |       }
41 |     },
42 | 
43 |     created() {
44 |       this.mapbox = Mapbox;
45 |       this.getData();
46 |     },
47 | 
48 |     methods: {
49 |       getData: function () {
50 |         fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations')
51 |           .then(response => response.json())
52 |           .then(data => {
53 |             const locations = data.locations;
54 |             this.locations = locations;
55 |           })
56 |       },
57 | 
58 |       activateMarker: function (l) {
59 |         if(l.country && !l.province) {
60 |           const country = l.country;
61 |           this.country = country;
62 |           const cases = l.latest.confirmed;
63 |           this.cases = cases;
64 |         } else {
65 |           const province = l.province;
66 |           this.province = province;
67 |           const cases = l.latest.confirmed;
68 |           this.cases = cases;
69 |         }
70 |       }
71 |     }
72 |   }
73 | </script>
74 | 


--------------------------------------------------------------------------------