-
Notifications
You must be signed in to change notification settings - Fork 0
/
corona_heatmap.js
123 lines (110 loc) · 4.19 KB
/
corona_heatmap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
var CoronaHeatMap = {
case_type: "Confirmed",
case_url: "https://docs.google.com/spreadsheets/u/3/d/1LD7Ej7ZeDU8U7MLEFmXN0E1p3W_sPI6hQKpmvpkXHfM/export?format=csv&id=1LD7Ej7ZeDU8U7MLEFmXN0E1p3W_sPI6hQKpmvpkXHfM&gid=0",
heatmap_config: {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 0.3,
"maxOpacity": .8,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'Lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'Long',
// which field name in your data represents the data value - default "value"
valueField: 'case_number'
},
updateCase: function ( case_type ) {
this.case_type = case_type;
},
updateHeatMap: function ( date ) {
var dateField = [date.getMonth() + 1,date.getDate(), date.getFullYear() - 2000].join('/');
this.json_data.forEach(function ( data_el ) {
data_el.case_number = data_el[dateField];
});
this.heatmapLayer.cfg = this.heatmap_config;
this.heatmapLayer._heatmap.configure(this.heatmap_config);
this.heatmapLayer._reset();
this.heatmapLayer.setData(this.heatMapData);
},
buildMapWithTileLayer: function ( map_id ) {
var map = L.map( map_id ).setView([36, 2], 6);
this.map = map;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
return map;
},
structureData: function ( data ) {
var data_array = Papa.parse(data).data;
var column_data = data_array[0];
this.column_data = column_data;
var json_data = data_array.splice( 1 ).map(function ( data_row ) {
var json_row = {};
column_data.forEach(function ( columnName, index ) {
var columnData = data_row[ index ],
columnDataInt = Number( columnData );
json_row[ columnName ] = isNaN( columnDataInt ) ? columnData : columnDataInt;
});
return json_row;
});
this.json_data = json_data;
this.heatMapData = {
max: 20,
data: json_data
};
return {column_data:column_data, json_data:json_data};
},
loadData: function () {
return $.get(this.case_url);
},
createHeatMap: function ( map ) {
var heatmapLayer = new HeatmapOverlay(this.heatmap_config);
heatmapLayer.addTo(map);
this.heatmapLayer = heatmapLayer;
window.heatmapLayer = heatmapLayer;
//heatmapLayer.setData(heatMapData);
return heatmapLayer;
},
setUpDatesSelect: function ( date_select_id ) {
var selectEl = document.getElementById( date_select_id ),
self = this;
this.dates_columns.forEach(function ( date_column, index ) {
var optionEl = document.createElement('option');
optionEl.value = index;
optionEl.text = date_column.toDateString();
selectEl.options.add(optionEl, 0);
});
selectEl.selectedIndex = 0;
selectEl.addEventListener('change', function ( ) {
self.updateHeatMap(self.dates_columns[selectEl.options[selectEl.selectedIndex].value]);
});
},
setUpDatesList: function ( column_data ) {
var dates_columns = column_data.slice(4).map(function ( date_column ) {
var date_array = date_column.split('/').map(Number);
return new Date( 2000 + date_array[2], date_array[0] - 1, date_array[1] );
});
this.dates_columns = dates_columns;
return dates_columns;
},
init: function ( map_id, date_select_id ) {
var self = this;
this.map_id = map_id;
this.date_select_id = date_select_id
var map = this.buildMapWithTileLayer( map_id );
var heatmapLayer = this.createHeatMap( map );
this.loadData().then(function( data ) {
return self.structureData( data );
}).then(function ( structuredData ) {
var dates_columns = self.setUpDatesList( structuredData.column_data );
self.setUpDatesSelect( date_select_id );
self.updateHeatMap( dates_columns[dates_columns.length - 1] );
});
}
}