From 669ec659fa92b73be5bae98bc4237221f4e18224 Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Tue, 8 Nov 2022 14:40:37 +0100 Subject: [PATCH] add flood zone display --- app/src/frontend/config/map-config.ts | 2 + app/src/frontend/map/flood-switcher.css | 37 +++++++++++++++++++ app/src/frontend/map/flood-switcher.tsx | 19 ++++++++++ .../map/layers/flood-boundary-layer.tsx | 33 +++++++++++++++++ app/src/frontend/map/map.tsx | 16 +++++++- 5 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 app/src/frontend/map/flood-switcher.css create mode 100644 app/src/frontend/map/flood-switcher.tsx create mode 100644 app/src/frontend/map/layers/flood-boundary-layer.tsx diff --git a/app/src/frontend/config/map-config.ts b/app/src/frontend/config/map-config.ts index 138442b3..b1f042d2 100644 --- a/app/src/frontend/config/map-config.ts +++ b/app/src/frontend/config/map-config.ts @@ -14,6 +14,8 @@ export type BoroughEnablementState = 'enabled' | 'disabled'; export type ParcelEnablementState = 'enabled' | 'disabled'; +export type FloodEnablementState = 'enabled' | 'disabled'; + export const mapBackgroundColor: Record = { light: '#F0EEEB', night: '#162639' diff --git a/app/src/frontend/map/flood-switcher.css b/app/src/frontend/map/flood-switcher.css new file mode 100644 index 00000000..2a859edf --- /dev/null +++ b/app/src/frontend/map/flood-switcher.css @@ -0,0 +1,37 @@ +.flood-theme { + filter: grayscale(100%) invert(1); +} + +.flood-theme { + filter: none; +} + +.flood-switcher { + z-index: 1000; + position: absolute; + top: 197px; + right: 10px; + float: right; + background: white; + border-radius: 4px; +} +.flood-switcher .btn { + margin: 0; + min-width: 280px; +} +.flood-switcher.night .btn { + color: #fff; + background-color: #343a40; + border-color: #343a40; +} +.flood-switcher.night .btn:hover { + color: #343a40; + background-color: transparent; + background-image: none; + border-color: #343a40; +} +@media (max-width: 990px){ + .flood-switcher { + visibility: hidden; + } +} diff --git a/app/src/frontend/map/flood-switcher.tsx b/app/src/frontend/map/flood-switcher.tsx new file mode 100644 index 00000000..0b655364 --- /dev/null +++ b/app/src/frontend/map/flood-switcher.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import './flood-switcher.css'; + +interface FloodSwitcherProps { + currentDisplay: string; + onSubmit: (e: React.FormEvent) => void; +} + +const FloodSwitcherProps: React.FC = (props) => ( +
+ +
+); + +export default FloodSwitcherProps; diff --git a/app/src/frontend/map/layers/flood-boundary-layer.tsx b/app/src/frontend/map/layers/flood-boundary-layer.tsx new file mode 100644 index 00000000..70b09f4c --- /dev/null +++ b/app/src/frontend/map/layers/flood-boundary-layer.tsx @@ -0,0 +1,33 @@ +import { GeoJsonObject } from 'geojson'; +import React, { useEffect, useState } from 'react'; +import { GeoJSON } from 'react-leaflet'; +import { FloodEnablementState } from '../../config/map-config'; +import { apiGet } from '../../apiHelpers'; + +export function FloodBoundaryLayer({enablement}: {enablement: FloodEnablementState}) { + const [boundaryGeojson, setBoundaryGeojson] = useState(null); + + useEffect(() => { + apiGet('/geometries/flood_zones_simplified.geojson') + .then(data => setBoundaryGeojson(data as GeoJsonObject)); + }, []); + + if(enablement == "enabled") { + return boundaryGeojson && + ; + } else if (enablement == "disabled") { + return
+ // do not display anything + return boundaryGeojson && + + } else { + return boundaryGeojson && + ; + } +} + diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index af4a04ec..2bf88e6d 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -8,13 +8,14 @@ import { apiGet } from '../apiHelpers'; import { HelpIcon } from '../components/icons'; import { categoryMapsConfig } from '../config/category-maps-config'; import { Category } from '../config/categories-config'; -import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState } from '../config/map-config'; +import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState } from '../config/map-config'; import { Building } from '../models/building'; import { CityBaseMapLayer } from './layers/city-base-map-layer'; import { CityBoundaryLayer } from './layers/city-boundary-layer'; import { BoroughBoundaryLayer } from './layers/borough-boundary-layer'; import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer'; +import { FloodBoundaryLayer } from './layers/flood-boundary-layer'; import { BuildingBaseLayer } from './layers/building-base-layer'; import { BuildingDataLayer } from './layers/building-data-layer'; import { BuildingNumbersLayer } from './layers/building-numbers-layer'; @@ -25,6 +26,7 @@ import SearchBox from './search-box'; import ThemeSwitcher from './theme-switcher'; import BoroughSwitcher from './borough-switcher'; import ParcelSwitcher from './parcel-switcher'; +import FloodSwitcher from './flood-switcher'; import { BuildingMapTileset } from '../config/tileserver-config'; interface ColouringMapProps { @@ -47,6 +49,7 @@ export const ColouringMap : FC = ({ const [theme, setTheme] = useState('night'); const [borough, setBorough] = useState('disabled'); const [parcel, setParcel] = useState('disabled'); + const [flood, setFlood] = useState('disabled'); const [position, setPosition] = useState(initialMapViewport.position); const [zoom, setZoom] = useState(initialMapViewport.zoom); @@ -97,6 +100,15 @@ export const ColouringMap : FC = ({ [parcel], ) + const floodSwitch = useCallback( + (e) => { + e.preventDefault(); + const newFlood = (flood === 'enabled')? 'disabled' : 'enabled'; + setFlood(newFlood); + }, + [flood], + ) + const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]); useEffect(() => { @@ -147,6 +159,7 @@ export const ColouringMap : FC = ({ + { selectedBuildingId && @@ -173,6 +186,7 @@ export const ColouringMap : FC = ({ + }