covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
119 lines (111 loc) • 4.49 kB
JavaScript
import BaseComponent from '../../../../node_modules/neo.mjs/src/component/wrapper/MapboxGL.mjs';
/**
* @class Covid.view.mapboxGl.Component
* @extends Neo.component.wrapper.MapboxGL
*/
class Component extends BaseComponent {
static getConfig() {return {
/**
* @member {String} className='Covid.view.mapboxGl.Component'
* @protected
*/
className: 'Covid.view.mapboxGl.Component',
/**
* @member {String|null} accessToken
*/
accessToken: 'pk.eyJ1IjoidG9iaXUiLCJhIjoiY2s4dTlsdHA5MDRmYzNtcGxlczFpcGVncyJ9.qcmzDjpdyQeLtz9z7d7CkA',
/**
* @member {Object} center={lat: 40, lng: 20}
*/
center: {lat: 40, lng: 20},
/**
* @member {String} dataSourceId='covid19'
*/
dataSourceId: 'covid19',
/**
* @member {Object[]}
*/
layers: [{
beforeId: 'waterway-label',
id : 'hillshading',
source : 'dem',
type : 'hillshade'
}, {
beforeId: 'waterway-label',
filter : ['>', ['get', 'cases'], 0],
id : 'covid19-heat',
source : 'covid19',
type : 'heatmap',
paint: {
'heatmap-color' : ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(0,0,0,0)', 0.1, '#927903', 0.15, '#ffd403', 1, '#ff0000'],
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 3, 9, 5],
'heatmap-opacity' : ['interpolate', ['linear'], ['zoom'], 5, .95, 6, 0],
'heatmap-radius' : ['interpolate', ['linear'], ['zoom'], 0, 2, 1, 4, 2, 8, 3, 16, 4, 32, 5, 64, 6, 128, 7, 256, 8, 512, 9, 1024],
'heatmap-weight' : ['interpolate', ['linear'], ['get', 'cases'], 0, 0, 1e4, 1]
}
}, {
beforeId: 'waterway-label',
filter : ['>', ['get', 'cases'], 0],
id : 'covid19-circle',
source : 'covid19',
type : 'circle',
minzoom : 5,
paint: {
'circle-color' : ['step', ['get', 'cases'], '#9ad5ff', 0, '#9af6ff', 20, '#00ffff', 200, '#ffff00', 400, '#f1f075', 800, '#f9b196', 1e3, '#f28cb1', 2e3, '#f28cb1'],
'circle-opacity' : ['interpolate', ['linear'], ['zoom'], 5, 0, 6, .6],
'circle-radius' : ['step', ['get', 'cases'], 10, 100, 20, 500, 30, 1e3, 40, 1e4, 50],
'circle-translate': [0, 20]
}
}, {
beforeId: 'waterway-label',
filter : ['>', ['get', 'cases'], 0],
id : 'covid19-circle-text',
source : 'covid19',
type : 'symbol',
minzoom : 5,
layout: {
'text-allow-overlap' : true,
'text-field' : ['to-string', ['get', 'cases']],
'text-font' : ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-ignore-placement': true,
'text-size' : 12
},
paint: {
'text-opacity' : ['interpolate', ['linear'], ['zoom'], 5, 0, 7, 1],
'text-translate': [0, 20],
}
}],
/**
* https://docs.mapbox.com/mapbox-gl-js/style-spec/
* @member {Object|String} mapboxStyle='mapbox://styles/tobiu/ck944yerq3hrj1ip91o34fa7d'
*/
mapboxStyle: 'mapbox://styles/tobiu/ck944yerq3hrj1ip91o34fa7d',
/**
* Version for the neo-dark theme
* @member {Object|String} mapboxStyle='mapbox://styles/tobiu/ck944yerq3hrj1ip91o34fa7d'
*/
mapboxStyleDark: 'mapbox://styles/tobiu/ck8yaxakx11zx1ilgshq451cv',
/**
* Version for the neo-light theme
* @member {Object|String} mapboxStyle='mapbox://styles/tobiu/ck9459ple0qc71invugdz6bbf'
*/
mapboxStyleLight: 'mapbox://styles/tobiu/ck9459ple0qc71invugdz6bbf',
/**
* @member {Object[]}
*/
sources: [{
id : 'covid19',
type: 'geojson',
data: {
type : 'FeatureCollection',
features: []
}
}, {
id : 'dem',
type: 'raster-dem',
url : 'mapbox://mapbox.terrain-rgb'
}]
}}
}
Neo.applyClassConfig(Component);
export {Component as default};