From 2ff4c472f037de3128e51f75b8401c6f8e589fb7 Mon Sep 17 00:00:00 2001 From: Mike Simpson Date: Wed, 16 Aug 2023 12:24:28 +0100 Subject: [PATCH] Various Updates - Show Architectural Style in Typology, but can't edit it. Fixed link to Age & History. Removed Button and removed from Key. - Added separate layers for Historical Map, with and without footprints. - Changed "Post War" to start in 1946. --- app/map_styles/polygon.xml | 2 +- .../building/data-containers/age-history.tsx | 42 ++++++++++++------- .../building/data-containers/typology.tsx | 10 +++-- .../frontend/config/category-maps-config.ts | 8 ++-- app/src/frontend/config/data-fields-config.ts | 2 +- .../frontend/displayPreferences-context.tsx | 41 +++++++++++++++++- .../frontend/map/historic-data-switcher.tsx | 3 +- .../frontend/map/historic-map-switcher.tsx | 17 ++++++++ .../map/layers/historic-map-layer.tsx | 21 ++++++++++ app/src/frontend/map/map-button.css | 6 ++- app/src/frontend/map/map.tsx | 5 +++ 11 files changed, 129 insertions(+), 28 deletions(-) create mode 100644 app/src/frontend/map/historic-map-switcher.tsx create mode 100644 app/src/frontend/map/layers/historic-map-layer.tsx diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml index 963aa1f9..7f54c7d8 100644 --- a/app/map_styles/polygon.xml +++ b/app/map_styles/polygon.xml @@ -1145,7 +1145,7 @@ - [typology_style_period] = "1945-1979 (Post war)" + [typology_style_period] = "1946-1979 (Post war)" diff --git a/app/src/frontend/building/data-containers/age-history.tsx b/app/src/frontend/building/data-containers/age-history.tsx index 3ee13b94..8100cbd2 100644 --- a/app/src/frontend/building/data-containers/age-history.tsx +++ b/app/src/frontend/building/data-containers/age-history.tsx @@ -40,11 +40,26 @@ const AgeView: React.FunctionComponent = (props) => { const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`; const { historicData, historicDataSwitchOnClick, darkLightTheme } = useDisplayPreferences(); + const { historicMap, historicMapSwitchOnClick } = useDisplayPreferences(); const switchToSurvivalMapStyle = (e) => { + e.preventDefault(); + props.onMapColourScale('survival_status'); + historicMapSwitchOnClick(e); + + if (historicData === 'enabled') { + historicDataSwitchOnClick(e); + } + } + + const switchToSurvivalDataStyle = (e) => { e.preventDefault(); props.onMapColourScale('survival_status'); historicDataSwitchOnClick(e); + + if (historicMap === 'enabled') { + historicMapSwitchOnClick(e); + } } const switchToAgeMapStyle = (e) => { @@ -208,9 +223,6 @@ const AgeView: React.FunctionComponent = (props) => { user_verified_as={props.user_verified.typology_style_period} verified_count={props.building.verified.typology_style_period} /> -
- For building age by year see Age & History. -
= (props) => { } - {(props.mapColourScale == "survival_status") ? - - : - - } @@ -495,13 +498,22 @@ const AgeView: React.FunctionComponent = (props) => { Choose a colour to indicate whether the building has survived. - {(props.mapColourScale == "survival_status") ? + {(historicMap == "enabled") ? : + } + {(historicData == "enabled") ? + + : + } = (props) => { } - {(props.mapColourScale == "typology_style_period") ? + {/*(props.mapColourScale == "typology_style_period") ? @@ -109,8 +109,8 @@ const TypeView: React.FunctionComponent = (props) => { - } - {/* = (props) => { mode={props.mode} copy={props.copy} onChange={props.onChange} + disabled={true} /> + {/* = (props) => { verified_count={props.building.verified.typology_style_period} /> */}
- For building age/architectural style data, see Age & History. + To edit the architectural style box, and to see the data mapped, please go to Age & History.
{/* ) => void; historicDataSwitchOnClick: React.MouseEventHandler; + historicMap: LayerEnablementState; + historicMapSwitch: (e: React.FormEvent) => void; + historicMapSwitchOnClick: React.MouseEventHandler; + darkLightTheme: MapTheme; darkLightThemeSwitch: (e: React.FormEvent) => void; darkLightThemeSwitchOnClick: React.MouseEventHandler; @@ -87,6 +91,10 @@ export const DisplayPreferencesContext = createContext = ({children}) => { const defaultParcel = 'disabled' const defaultConservation = 'disabled' const defaultHistoricData = 'disabled' + const defaultHistoricMap = 'disabled' const defaultShowLayerSelection = 'disabled' const [vista, setVista] = useState(defaultVista); const [flood, setFlood] = useState(defaultFlood); @@ -116,6 +125,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { const [parcel, setParcel] = useState(defaultParcel); const [conservation, setConservation] = useState(defaultConservation); const [historicData, setHistoricData] = useState(defaultHistoricData); + const [historicMap, setHistoricMap] = useState(defaultHistoricMap); const [darkLightTheme, setDarkLightTheme] = useState('night'); const [showLayerSelection, setShowLayerSelection] = useState(defaultShowLayerSelection); @@ -136,6 +146,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setParcel(defaultParcel); setConservation(defaultConservation); setHistoricData(defaultHistoricData); + setHistoricMap(defaultHistoricMap); setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action //setDarkLightTheme('night'); // reset only layers }, @@ -167,6 +178,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { if(historicData != defaultHistoricData) { return true; } + if(historicMap != defaultHistoricMap) { + return true; + } //darkLightTheme not handled here return false; } @@ -278,7 +292,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { const historicDataSwitch = useCallback( (e) => { - flipHistoricData(e) + if (historicMap === 'enabled') { + fliphistoricMap(e); + } + flipHistoricData(e); }, [historicData], ) @@ -291,6 +308,24 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setHistoricData(newHistoric); } + const historicMapSwitch = useCallback( + (e) => { + if (historicData === 'enabled') { + flipHistoricData(e); + } + fliphistoricMap(e); + }, + [historicMap], + ) + const historicMapSwitchOnClick = (e) => { + fliphistoricMap(e) + } + function fliphistoricMap(e) { + e.preventDefault(); + const newHistoric = (historicMap === 'enabled')? 'disabled' : 'enabled'; + setHistoricMap(newHistoric); + } + const darkLightThemeSwitch = useCallback( (e) => { flipDarkLightTheme(e) @@ -354,6 +389,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { historicDataSwitch, historicDataSwitchOnClick, + historicMap, + historicMapSwitch, + historicMapSwitchOnClick, + darkLightTheme, darkLightThemeSwitch, darkLightThemeSwitchOnClick, diff --git a/app/src/frontend/map/historic-data-switcher.tsx b/app/src/frontend/map/historic-data-switcher.tsx index c1eadb58..db64c17e 100644 --- a/app/src/frontend/map/historic-data-switcher.tsx +++ b/app/src/frontend/map/historic-data-switcher.tsx @@ -5,11 +5,12 @@ import { useDisplayPreferences } from '../displayPreferences-context'; export const HistoricDataSwitcher: React.FC<{}> = (props) => { const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences(); + return (
); diff --git a/app/src/frontend/map/historic-map-switcher.tsx b/app/src/frontend/map/historic-map-switcher.tsx new file mode 100644 index 00000000..6e6be073 --- /dev/null +++ b/app/src/frontend/map/historic-map-switcher.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import './map-button.css'; +import { useDisplayPreferences } from '../displayPreferences-context'; + +export const HistoricMapSwitcher: React.FC<{}> = (props) => { + const { historicMap, historicMapSwitch, darkLightTheme } = useDisplayPreferences(); + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/app/src/frontend/map/layers/historic-map-layer.tsx b/app/src/frontend/map/layers/historic-map-layer.tsx new file mode 100644 index 00000000..405fc5dc --- /dev/null +++ b/app/src/frontend/map/layers/historic-map-layer.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { TileLayer } from 'react-leaflet'; +import { LayerEnablementState } from '../../config/map-config'; +import { BuildingBaseLayerAllZoom } from './building-base-layer-all-zoom'; +import { useDisplayPreferences } from '../../displayPreferences-context'; +import { BuildingDataLayer } from './building-data-layer'; + +export function HistoricMapLayer({revisionId}: {revisionId: string}) { + const { historicMap } = useDisplayPreferences(); + if(historicMap == "enabled") { + return <> + + + } else { + return null; + } +} + diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css index b77c57d8..277c49a7 100644 --- a/app/src/frontend/map/map-button.css +++ b/app/src/frontend/map/map-button.css @@ -111,11 +111,15 @@ } .historic-data-switcher { + top: 437px; +} + +.historic-map-switcher { top: 397px; } .parcel-switcher { - top: 437px; + top: 477px; } .map-switcher-inline { diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index a1cb637a..1a1e9286 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -15,6 +15,7 @@ import { BoroughBoundaryLayer } from './layers/borough-boundary-layer'; import { BoroughLabelLayer } from './layers/borough-label-layer'; import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer'; import { HistoricDataLayer } from './layers/historic-data-layer'; +import { HistoricMapLayer } from './layers/historic-map-layer'; import { FloodBoundaryLayer } from './layers/flood-boundary-layer'; import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer'; import { VistaBoundaryLayer } from './layers/vista-boundary-layer'; @@ -34,6 +35,7 @@ import { ParcelSwitcher } from './parcel-switcher'; import { FloodSwitcher } from './flood-switcher'; import { ConservationAreaSwitcher } from './conservation-switcher'; import { HistoricDataSwitcher } from './historic-data-switcher'; +import { HistoricMapSwitcher } from './historic-map-switcher'; import { VistaSwitcher } from './vista-switcher'; import { CreativeSwitcher } from './creative-switcher'; import { HousingSwitcher } from './housing-switcher'; @@ -129,6 +131,7 @@ export const ColouringMap : FC = ({ > + @@ -167,10 +170,12 @@ export const ColouringMap : FC = ({ + + : <> }