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

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

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

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

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