diff --git a/app/src/frontend/config/map-config.ts b/app/src/frontend/config/map-config.ts index 8a1fd9bb..18fb61a3 100644 --- a/app/src/frontend/config/map-config.ts +++ b/app/src/frontend/config/map-config.ts @@ -18,6 +18,8 @@ export type FloodEnablementState = 'enabled' | 'disabled'; export type ConservationAreasEnablementState = 'enabled' | 'disabled'; +export type HistoricDataEnablementState = 'enabled' | 'disabled'; + export const mapBackgroundColor: Record = { light: '#F0EEEB', night: '#162639' diff --git a/app/src/frontend/map/historic-data-switcher.css b/app/src/frontend/map/historic-data-switcher.css new file mode 100644 index 00000000..b30f2390 --- /dev/null +++ b/app/src/frontend/map/historic-data-switcher.css @@ -0,0 +1,37 @@ +.historic-data-theme { + filter: grayscale(100%) invert(1); +} + +.historic-data-theme { + filter: none; +} + +.historic-data-switcher { + z-index: 1000; + position: absolute; + top: 277px; + right: 10px; + float: right; + background: white; + border-radius: 4px; +} +.historic-data-switcher .btn { + margin: 0; + min-width: 280px; +} +.historic-data-switcher.night .btn { + color: #fff; + background-color: #343a40; + border-color: #343a40; +} +.historic-data-switcher.night .btn:hover { + color: #343a40; + background-color: transparent; + background-image: none; + border-color: #343a40; +} +@media (max-width: 990px){ + .historic-data-switcher { + visibility: hidden; + } +} diff --git a/app/src/frontend/map/historic-data-switcher.tsx b/app/src/frontend/map/historic-data-switcher.tsx new file mode 100644 index 00000000..ede4e8a2 --- /dev/null +++ b/app/src/frontend/map/historic-data-switcher.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import './historic-data-switcher.css'; + +interface HistoricDataSwitcherProps { + currentDisplay: string; + onSubmit: (e: React.FormEvent) => void; +} + +const HistoricDataSwitcherProps: React.FC = (props) => ( +
+ +
+); + +export default HistoricDataSwitcherProps; diff --git a/app/src/frontend/map/layers/historic-data-layer.tsx b/app/src/frontend/map/layers/historic-data-layer.tsx new file mode 100644 index 00000000..de085180 --- /dev/null +++ b/app/src/frontend/map/layers/historic-data-layer.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { TileLayer } from 'react-leaflet'; +import { HistoricDataEnablementState } from '../../config/map-config'; + +export function HistoricDataLayer({enablement}: {enablement: HistoricDataEnablementState}) { + if(enablement == "enabled") { + return + } else { + return null; + } +} + diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index ff8d271b..2d46fef6 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, FloodEnablementState, ConservationAreasEnablementState } from '../config/map-config'; +import { initialMapViewport, mapBackgroundColor, MapTheme, BoroughEnablementState, ParcelEnablementState, FloodEnablementState, ConservationAreasEnablementState, HistoricDataEnablementState } 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 { HistoricDataLayer } from './layers/historic-data-layer'; import { FloodBoundaryLayer } from './layers/flood-boundary-layer'; import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer'; import { BuildingBaseLayer } from './layers/building-base-layer'; @@ -29,6 +30,7 @@ import BoroughSwitcher from './borough-switcher'; import ParcelSwitcher from './parcel-switcher'; import FloodSwitcher from './flood-switcher'; import ConservationAreaSwitcher from './conservation-switcher'; +import HistoricDataSwitcher from './historic-data-switcher'; import { BuildingMapTileset } from '../config/tileserver-config'; interface ColouringMapProps { @@ -53,6 +55,7 @@ export const ColouringMap : FC = ({ const [parcel, setParcel] = useState('disabled'); const [flood, setFlood] = useState('disabled'); const [conservation, setConservation] = useState('disabled'); + const [historicData, setHistoricData] = useState('disabled'); const [position, setPosition] = useState(initialMapViewport.position); const [zoom, setZoom] = useState(initialMapViewport.zoom); @@ -121,6 +124,15 @@ export const ColouringMap : FC = ({ [conservation], ) + const historicDataSwitch = useCallback( + (e) => { + e.preventDefault(); + const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled'; + setHistoricData(newHistoric); + }, + [historicData], + ) + const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]); useEffect(() => { @@ -169,6 +181,7 @@ export const ColouringMap : FC = ({ style={{zIndex: 300}} > + @@ -201,6 +214,7 @@ export const ColouringMap : FC = ({ + }