pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Make the scale match the map

Browse source
This commit is contained in:
gluap 2021-12-19 12:56:52 +01:00 committed by Paul Bienkowski
parent f1f7ff1976
commit a5f5acd6d5
2 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/mapstyles/index.js
View file

@ -33,8 +33,9 @@ export function colormapToScale(colormap, value, min, max) {
export const viridis = simplifyColormap(viridisBase.map(rgbArrayToColor), 20) export const viridis = simplifyColormap(viridisBase.map(rgbArrayToColor), 20)
export const grayscale = ['#FFFFFF', '#000000'] export const grayscale = ['#FFFFFF', '#000000']
export const reds = [ export const reds = [
['rgba', 255, 0, 0, 0], 'rgba( 255, 0, 0, 0)',
['rgba', 255, 0, 0, 1], 'rgba( 255, 0, 0, 255)',
]
] ]
export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) { export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) {

18
frontend/src/pages/MapPage/LayerSidebar.tsx
View file

@ -81,6 +81,7 @@ function LayerSidebar({
/> />
</List.Item> </List.Item>
{attribute.endsWith('_count') ? ( {attribute.endsWith('_count') ? (
<>
<List.Item> <List.Item>
<List.Header>Maximum value</List.Header> <List.Header>Maximum value</List.Header>
<Input <Input
@ -90,14 +91,15 @@ function LayerSidebar({
onChange={(_e, {value}) => setMapConfigFlag('obsRoads.maxCount', value)} onChange={(_e, {value}) => setMapConfigFlag('obsRoads.maxCount', value)}
/> />
</List.Item> </List.Item>
) : null} <List.Item>
</> <ColorMapLegend map={_.chunk(colorByCount('obsRoads.maxCount',mapConfig.obsRoads.maxCount, reds).slice(3), 2)} />
)} </List.Item></>
{showRoads && ( ) :
<> (
<List.Item> <List.Item>
<ColorMapLegend map={_.chunk(colorByDistance('distance_overtaker')[3].slice(3), 2)} /> <ColorMapLegend map={_.chunk(colorByDistance('distance_overtaker')[3].slice(3), 2)} />
</List.Item> </List.Item>
)}
</> </>
)} )}
<Divider /> <Divider />