historic map display test

note that it is test only - terms of use and copyright status needs to be checked

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<MapTheme, string> = {
     light: '#F0EEEB',
     night: '#162639'

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;
+    }
+}

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<HTMLFormElement>) => void;
+}
+
+const HistoricDataSwitcherProps: React.FC<HistoricDataSwitcherProps> = (props) => (
+    <form className={`historic-data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
+        <button className="btn btn-outline btn-outline-dark"
+            type="submit">
+            Switch display of historic map example ({(props.currentDisplay === 'enabled')? 'Enabled' : 'Disabled'})
+        </button>
+    </form>
+);
+
+export default HistoricDataSwitcherProps;

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 <TileLayer
+            url="https://maps.georeferencer.com/georeferences/53c1ccd0-c169-5f9e-a850-dd34c066c369/2019-10-01T08:40:08.006175Z/map/{z}/{x}/{y}.png?key=xkWAs4LtX8CmpSTUqF9M"
+            attribution='&copy; ???????????????????????????????????????'
+        />
+	} else {
+        return null;
+    }
+}
+

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<ColouringMapProps> = ({
     const [parcel, setParcel] = useState<ParcelEnablementState>('disabled');
     const [flood, setFlood] = useState<FloodEnablementState>('disabled');
     const [conservation, setConservation] = useState<ConservationAreasEnablementState>('disabled');
+    const [historicData, setHistoricData] = useState<HistoricDataEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -121,6 +124,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [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<ColouringMapProps> = ({
                     style={{zIndex: 300}}
                 >
                     <CityBoundaryLayer />
+                    <HistoricDataLayer enablement={historicData}/>
                     <BoroughBoundaryLayer enablement={borough}/>
                     <ParcelBoundaryLayer enablement={parcel}/>
                     <FloodBoundaryLayer enablement={flood}/>
@@ -201,6 +214,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                     <ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
                     <FloodSwitcher onSubmit={floodSwitch} currentDisplay={flood} />
                     <ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
+                    <HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
                     <SearchBox onLocate={handleLocate} />
                 </>
             }