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

Add filter toggle for user-owned data to map UI

Browse source
This commit is contained in:
Paul Bienkowski 2022-06-26 12:51:15 +02:00 committed by gluap
parent 88af9a28fd
commit c4b9cbb607
No known key found for this signature in database
3 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,16 @@
import React from 'react' import React from "react";
import _ from 'lodash' import _ from "lodash";
import {connect} from 'react-redux' import { connect } from "react-redux";
import {List, Select, Input, Divider, Label, Checkbox, Header} from 'semantic-ui-react' import {
List,
Select,
Input,
Divider,
Label,
Checkbox,
Header,
} from "semantic-ui-react";
import { useTranslation } from "react-i18next";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -36,9 +45,9 @@ function LayerSidebar({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
baseMap: { style }, baseMap: {style},
obsRoads: { show: showRoads, showUntagged, attribute, maxCount }, obsRoads: {show: showRoads, showUntagged, attribute, maxCount},
obsEvents: { show: showEvents }, obsEvents: {show: showEvents},
obsRegions: {show: showRegions}, obsRegions: {show: showRegions},
filters: { filters: {
currentUser: filtersCurrentUser, currentUser: filtersCurrentUser,

13
frontend/src/pages/MapPage/index.tsx
View file

@ -1,14 +1,15 @@
import React, { useState, useCallback, useMemo, useRef } from "react"; import React, { useState, useCallback, useMemo, useRef } from "react";
import _ from "lodash"; import _ from "lodash";
import { Button } from "semantic-ui-react"; import { connect } from "react-redux";
import {Button } from "semantic-ui-react";
import { Layer, Source } from "react-map-gl"; import { Layer, Source } from "react-map-gl";
import produce from "immer"; import produce from "immer";
import api from "api"; import api from "api";
import { Page, Map } from "components"; import {Page, Map} from 'components'
import { useConfig } from "config"; import {useConfig} from 'config'
import { colorByDistance, borderByZone, colorByCount, reds, isValidAttribute, getRegionLayers, isValidAttribute } from "mapstyles"; import {colorByDistance, colorByCount, borderByZone, reds, isValidAttribute, getRegionLayers} from 'mapstyles'
import { useMapConfig } from "reducers/mapConfig"; import {useMapConfig} from 'reducers/mapConfig'
import RoadInfo from './RoadInfo' import RoadInfo from './RoadInfo'
import RegionInfo from "./RegionInfo"; import RegionInfo from "./RegionInfo";
@ -73,8 +74,6 @@ const getEventsLayer = () => ({
paint: { paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 14, 3, 17, 8], 'circle-radius': ['interpolate', ['linear'], ['zoom'], 14, 3, 17, 8],
'circle-color': colorByDistance('distance_overtaker'), 'circle-color': colorByDistance('distance_overtaker'),
'circle-stroke-color': borderByZone(),
'circle-stroke-width':['interpolate', ['linear'], ['zoom'], 14, 1, 17, 4],
}, },
minzoom: 11, minzoom: 11,
}) })

6
frontend/src/reducers/mapConfig.ts
View file

@ -27,6 +27,9 @@ export type MapConfig = {
obsEvents: { obsEvents: {
show: boolean; show: boolean;
}; };
filters: {
currentUser: boolean;
};
obsRegions: { obsRegions: {
show: boolean; show: boolean;
}; };
@ -52,6 +55,9 @@ export const initialState: MapConfig = {
obsEvents: { obsEvents: {
show: false, show: false,
}, },
filters: {
currentUser: false,
},
obsRegions: { obsRegions: {
show: true, show: true,
}, },