derive logic for "include roads without data" from selected attribute
This commit is contained in:
parent
1ad5fe562e
commit
76b1b41b4b
2 changed files with 19 additions and 10 deletions
|
@ -44,12 +44,19 @@ export const reds = [
|
||||||
]
|
]
|
||||||
|
|
||||||
export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) {
|
export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) {
|
||||||
return colormapToScale(colormap, ['case', ['to-boolean', ['get', attribute]], ['get', attribute], 0], 0, maxCount)
|
return colormapToScale(colormap, ['case', isValidAttribute(attribute), ['get', attribute], 0], 0, maxCount)
|
||||||
}
|
}
|
||||||
|
|
||||||
var steps = {'rural': [1.6,1.8,2.0,2.2],
|
var steps = {'rural': [1.6,1.8,2.0,2.2],
|
||||||
'urban': [1.1,1.3,1.5,1.7]}
|
'urban': [1.1,1.3,1.5,1.7]}
|
||||||
|
|
||||||
|
export function isValidAttribute(attribute) {
|
||||||
|
if (attribute.endsWith('zone')) {
|
||||||
|
return ['in', ['get', attribute], ['literal', ['rural', 'urban']]]
|
||||||
|
}
|
||||||
|
return ['to-boolean', ['get', attribute]]
|
||||||
|
}
|
||||||
|
|
||||||
export function borderByZone() {
|
export function borderByZone() {
|
||||||
return ["match", ['get', 'zone'],
|
return ["match", ['get', 'zone'],
|
||||||
"rural", "cyan",
|
"rural", "cyan",
|
||||||
|
@ -62,7 +69,7 @@ export function colorByDistance(attribute = 'distance_overtaker_mean', fallback
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'case',
|
'case',
|
||||||
['!', ['to-boolean', ['get', attribute]]],
|
['!', isValidAttribute(attribute)],
|
||||||
fallback,
|
fallback,
|
||||||
["match", ['get', 'zone'], "rural",
|
["match", ['get', 'zone'], "rural",
|
||||||
[
|
[
|
||||||
|
|
|
@ -6,7 +6,7 @@ import produce from 'immer'
|
||||||
|
|
||||||
import {Page, Map} from 'components'
|
import {Page, Map} from 'components'
|
||||||
import {useConfig} from 'config'
|
import {useConfig} from 'config'
|
||||||
import {colorByDistance, colorByCount, borderByZone, reds} from 'mapstyles'
|
import {colorByDistance, colorByCount, borderByZone, reds, isValidAttribute} from 'mapstyles'
|
||||||
import {useMapConfig} from 'reducers/mapConfig'
|
import {useMapConfig} from 'reducers/mapConfig'
|
||||||
|
|
||||||
import RoadInfo from './RoadInfo'
|
import RoadInfo from './RoadInfo'
|
||||||
|
@ -40,15 +40,16 @@ const untaggedRoadsLayer = {
|
||||||
minzoom: 12,
|
minzoom: 12,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getUntaggedRoadsLayer = (colorAttribute, maxCount) =>
|
||||||
|
produce(untaggedRoadsLayer, (draft) => {
|
||||||
|
draft.filter = ['!', isValidAttribute(colorAttribute)]
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const getRoadsLayer = (colorAttribute, maxCount) =>
|
const getRoadsLayer = (colorAttribute, maxCount) =>
|
||||||
produce(untaggedRoadsLayer, (draft) => {
|
produce(untaggedRoadsLayer, (draft) => {
|
||||||
draft.id = 'obs_roads_normal'
|
draft.id = 'obs_roads_normal'
|
||||||
if (colorAttribute.endsWith('_count')) {
|
draft.filter = isValidAttribute(colorAttribute)
|
||||||
// delete draft.filter
|
|
||||||
draft.filter = ['to-boolean', ['get', colorAttribute]]
|
|
||||||
} else {
|
|
||||||
draft.filter = draft.filter[1] // remove '!'
|
|
||||||
}
|
|
||||||
draft.paint['line-width'][6] = 6 // scale bigger on zoom
|
draft.paint['line-width'][6] = 6 // scale bigger on zoom
|
||||||
draft.paint['line-color'] = colorAttribute.startsWith('distance_')
|
draft.paint['line-color'] = colorAttribute.startsWith('distance_')
|
||||||
? colorByDistance(colorAttribute)
|
? colorByDistance(colorAttribute)
|
||||||
|
@ -130,8 +131,9 @@ export default function MapPage() {
|
||||||
|
|
||||||
const layers = []
|
const layers = []
|
||||||
|
|
||||||
|
const untaggedRoadsLayerCustom = useMemo(() => getUntaggedRoadsLayer(attribute), [attribute])
|
||||||
if (mapConfig.obsRoads.show && mapConfig.obsRoads.showUntagged) {
|
if (mapConfig.obsRoads.show && mapConfig.obsRoads.showUntagged) {
|
||||||
layers.push(untaggedRoadsLayer)
|
layers.push(untaggedRoadsLayerCustom)
|
||||||
}
|
}
|
||||||
|
|
||||||
const roadsLayer = useMemo(() => getRoadsLayer(attribute, maxCount), [attribute, maxCount])
|
const roadsLayer = useMemo(() => getRoadsLayer(attribute, maxCount), [attribute, maxCount])
|
||||||
|
|
Loading…
Add table
Reference in a new issue