Skip to content

Commit b29ae14

Browse files
mugetsumugetsu
committed
Updated map component
1 parent 9d2e16e commit b29ae14

File tree

9 files changed

+286
-238
lines changed

9 files changed

+286
-238
lines changed

‎components/Map/index.vue‎

Lines changed: 73 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,110 @@
11
<template>
2-
<mapbox
3-
:accessToken="accessToken"
4-
:mapOptions="{
5-
style: mapStyle,
6-
center: [67.4692816, 30.0313007],
7-
zoom: 3
8-
}"
9-
@map-load="loaded"
10-
/>
2+
<div class="map-container">
3+
<div id="map" class="map"></div>
4+
</div>
115
</template>
126

137
<script>
14-
import Mapbox from 'mapbox-gl-vue'
15-
168
export default {
179
name: 'Map',
18-
components: {
19-
Mapbox
20-
},
2110
props: {
22-
confirmed: Object,
23-
dead: Object
11+
confirmed: Object
2412
},
2513
data() {
2614
return {
2715
accessToken:
28-
'pk.eyJ1IjoicXVlZW5zaWRlMDQiLCJhIjoiY2s3bG1rNjMzMDk4czNscG1yZHU3NDRiMyJ9.PB6Uq1rIDULWXJp7T8ypng',
29-
mapStyle: 'mapbox://styles/mapbox/light-v10'
16+
'pk.eyJ1IjoicXVlZW5zaWRlMDQiLCJhIjoiY2s3bG1rNjMzMDk4czNscG1yZHU3NDRiMyJ9.PB6Uq1rIDULWXJp7T8ypng'
3017
}
3118
},
3219
methods: {
33-
loaded(map) {
34-
map.addSource('confirmed', {
35-
type: 'geojson',
36-
data: this.confirmed,
37-
cluster: true,
38-
clusterMaxZoom: 20,
39-
clusterRadius: 50
40-
})
20+
createMap() {
21+
const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
22+
mapboxgl.accessToken = this.accessToken
4123
42-
map.addSource('dead', {
43-
type: 'geojson',
44-
data: this.dead,
45-
cluster: true,
46-
clusterMaxZoom: 20,
47-
clusterRadius: 50
48-
})
24+
const oranges = ['#ffa500', '#ffae19', '#ffb732', '#ffc04c']
25+
const blacks = ['#000000', '#191919', '#323232', '#4c4c4c']
4926
50-
map.addLayer({
51-
id: 'confirmed-clusters',
52-
type: 'circle',
53-
source: 'confirmed',
54-
filter: ['==', 'state', 'confirmed'],
55-
paint: {
56-
'circle-color': [
57-
'step',
58-
['get', 'latest'],
59-
'#FF6347',
60-
100,
61-
'#FFA500',
62-
750,
63-
'#FF4500'
64-
],
65-
'circle-radius': [
66-
'step',
67-
['get', 'latest'],
68-
20,
69-
100,
70-
30,
71-
750,
72-
40
73-
]
74-
}
27+
const map = new mapboxgl.Map({
28+
container: 'map',
29+
style: 'mapbox://styles/mapbox/light-v10',
30+
center: [117.2264, 31.8257],
31+
zoom: 3
7532
})
7633
77-
map.addLayer({
78-
id: 'confirmed-cluster-count',
79-
type: 'symbol',
80-
source: 'confirmed',
81-
filter: ['has', 'latest'],
82-
layout: {
83-
'text-field': '{latest}',
84-
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
85-
'text-size': 12
86-
}
87-
})
34+
const addLayers = map => {
35+
map.addSource('confirmed', {
36+
type: 'geojson',
37+
data: this.confirmed,
38+
cluster: true,
39+
clusterRadius: 50
40+
})
41+
42+
map.addLayer({
43+
id: 'confirmed_cluster',
44+
type: 'circle',
45+
source: 'confirmed',
46+
paint: {
47+
'circle-color': [
48+
'step',
49+
['get', 'latest'],
50+
oranges[2],
51+
100,
52+
oranges[1],
53+
750,
54+
oranges[0]
55+
],
56+
'circle-radius': ['step', ['get', 'latest'], 15, 100, 20, 750, 25]
57+
}
58+
})
59+
60+
map.addLayer({
61+
id: 'confirmed_cluster_count',
62+
type: 'symbol',
63+
source: 'confirmed',
64+
layout: {
65+
'text-field': '{latest}',
66+
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
67+
'text-size': 12
68+
}
69+
})
8870
89-
map.addLayer({
90-
id: 'confirmed-unclustered-point',
91-
type: 'circle',
92-
source: 'confirmed',
93-
filter: ['!', ['has', 'latest']],
94-
paint: {
95-
'circle-color': '#FF4500',
96-
'circle-radius': 4,
97-
'circle-stroke-width': 1,
98-
'circle-stroke-color': '#FF4500'
99-
}
71+
map.addLayer({
72+
id: 'confirmed_unclustered_point',
73+
type: 'circle',
74+
source: 'confirmed',
75+
filter: ['!=', 'state', 1],
76+
paint: {
77+
'circle-color': oranges[3],
78+
'circle-radius': 4,
79+
'circle-stroke-width': 1,
80+
'circle-stroke-color': oranges[3]
81+
}
82+
})
83+
}
84+
85+
map.on('style.load', function() {
86+
addLayers(map)
10087
})
10188
102-
map.on('click', 'clusters', function(e) {
89+
map.on('click', 'confirmed_cluster', function(e) {
10390
var features = map.queryRenderedFeatures(e.point, {
104-
layers: ['clusters']
91+
layers: ['confirmed_cluster']
10592
})
10693
var clusterId = features[0].properties.cluster_id
10794
map
10895
.getSource('confirmed')
10996
.getClusterExpansionZoom(clusterId, function(err, zoom) {
11097
if (err) return
111-
11298
map.easeTo({
11399
center: features[0].geometry.coordinates,
114-
zoom: zoom
100+
zoom: map.getZoom() + 1
115101
})
116102
})
117103
})
118104
}
105+
},
106+
mounted() {
107+
this.createMap()
119108
}
120109
}
121110
</script>

‎nuxt.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ module.exports = {
117117
}
118118
},
119119
extend(config, ctx) {
120+
config.module.noParse = /(mapbox-gl)\.js$/
120121
}
121122
}
122123
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"node-sass": "^4.13.1",
3737
"nodemon": "^1.11.0",
3838
"sass-loader": "^8.0.2",
39-
"vue-jest": "^3.0.5"
39+
"vue-jest": "^3.0.5",
40+
"webpack": "^4.42.0"
4041
}
4142
}

‎pages/index.vue‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<template>
22
<div>
3-
<Map
4-
:confirmed="confirmed"
5-
:dead="deaths" />
3+
<Map :confirmed="confirmed" />
64
</div>
75
</template>
86

@@ -11,21 +9,17 @@ import { mapGetters } from 'vuex'
119
import Map from '~/components/Map'
1210
1311
export default {
12+
loading: false,
1413
components: {
1514
Map
1615
},
1716
computed: {
1817
...mapGetters([
19-
'confirmed',
20-
'deaths'
18+
'confirmed'
2119
])
2220
},
2321
data() {
24-
return {
25-
}
22+
return {}
2623
}
2724
}
2825
</script>
29-
30-
<style lang="scss">
31-
</style>

‎store/actions.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default {
99
latest,
1010
recovered
1111
} = res.data
12+
commit('SET_DATA', res.data)
1213
commit('SET_CONFIRMED', confirmed)
1314
commit('SET_DEATHS', deaths)
1415
commit('SET_LATEST', latest)

‎store/getters.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
2+
data: state => state.data,
23
confirmed: state => state.confirmed,
34
deaths: state => state.deaths,
45
latest: state => state.latest,

‎store/mutations.js‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,57 @@
11
export default {
2+
SET_DATA: (state, data) => {
3+
const {
4+
confirmed,
5+
deaths,
6+
recovered,
7+
latest
8+
} = data
9+
const dataCollection = {
10+
type: 'FeatureCollection',
11+
features: []
12+
}
13+
const toCollection = (state, locations, collection) => {
14+
locations.forEach((location, index) => {
15+
const cluster_id = location.country_code + (location.province ? `_${location.province}` : '') + `_${index}`
16+
collection.features.push({
17+
type: 'Feature',
18+
properties: {
19+
cluster_id: cluster_id,
20+
state: state,
21+
country: location.country,
22+
country_code: location.country_code,
23+
history: location.history,
24+
latest: location.latest,
25+
province: location.province
26+
},
27+
geometry: {
28+
type: 'Point',
29+
coordinates: [
30+
location.coordinates.long,
31+
location.coordinates.lat
32+
]
33+
}
34+
})
35+
})
36+
}
37+
toCollection(0, deaths.locations, dataCollection)
38+
toCollection(1, confirmed.locations, dataCollection)
39+
toCollection(2, recovered.locations, dataCollection)
40+
state.data = dataCollection
41+
},
242
SET_CONFIRMED: (state, confirmed) => {
343
const { locations } = confirmed
444
const confirmedCollection = {
545
type: 'FeatureCollection',
646
features: []
747
}
8-
locations.forEach(location => {
48+
locations.forEach((location, index) => {
49+
const cluster_id = location.country_code + (location.province ? `_${location.province}` : '') + `_${index}`
950
confirmedCollection.features.push({
1051
type: 'Feature',
1152
properties: {
12-
state: 'confirmed',
53+
cluster_id: cluster_id,
54+
state: 1,
1355
country: location.country,
1456
country_code: location.country_code,
1557
history: location.history,
@@ -33,11 +75,13 @@ export default {
3375
type: 'FeatureCollection',
3476
features: []
3577
}
36-
locations.forEach(location => {
78+
locations.forEach((location, index) => {
79+
const cluster_id = location.country_code + (location.province ? `_${location.province}` : '') + `_${index}`
3780
deathsCollection.features.push({
3881
type: 'Feature',
3982
properties: {
40-
state: 'dead',
83+
cluster_id: cluster_id,
84+
state: 0,
4185
country: location.country,
4286
country_code: location.country_code,
4387
history: location.history,

‎store/state.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default () => ({
2+
data: {},
23
confirmed: {},
34
deaths: {},
45
latest: {},

0 commit comments

Comments
 (0)