Merge pull request #1061 from matkoniecz/feature/various-tweaks

Various tweaks discovered during testing of new layer

app/map_styles/polygon.xml

@@ -361,8 +361,6 @@
             <LineSymbolizer stroke="#888" stroke-width="3.0"/>
         </Rule>
     </Style>
-    <Style name="empty_map">
-    </Style>
     <Style name="conservation_area">
         <Rule>
             <PolygonSymbolizer fill="#73ebaf" />

app/src/frontend/building/data-components/planning-data-entry.tsx

@@ -60,7 +60,7 @@ function ShowIfAvailable(data) {
 }
 
 const LinkIfAvailable = (link) => {
-  return <>{link ? <a href={link.toString()}>{link.toString()}</a> : MissingData }</>
+  return <>{link ? <a href={link.toString()} target="_blank">{link.toString()}</a> : MissingData }</>
 }
 
 const StatusInfo = ({status, statusBeforeAliasing}) => {

app/src/frontend/building/data-containers/planning.tsx

@@ -57,9 +57,9 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
         e.preventDefault();
         props.onMapColourScale('planning_combined')
     }
-    const switchToEmptyMapStyle = (e) => {
+    const switchToAllPlanningApplicationsMapStyle = (e) => {
         e.preventDefault();
-        props.onMapColourScale('empty_map')
+        props.onMapColourScale('planning_applications_status_all')
     }
     const { flood, floodSwitchOnClick, housing, housingSwitchOnClick, creative, creativeSwitchOnClick, vista, vistaSwitchOnClick, parcel, parcelSwitchOnClick, conservation, conservationSwitchOnClick } = useDisplayPreferences();
     const communityLinkUrl = `/${props.mode}/${Category.Community}/${props.building.building_id}`;
@@ -110,8 +110,8 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     {'Click here to view possible locations of future applications'}
                     </button>
                 :
-                    <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToEmptyMapStyle}>
+                    <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToAllPlanningApplicationsMapStyle}>
-                    {'Click here to hide possible locations of future applications'}
+                    {'Click to see planning applications'}
                     </button>
                 }
                 <UserOpinionEntry
@@ -140,7 +140,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
             slug="planning_live_application"
             value={null}
             disabled={true}
-            tooltip={"GLA official description: \"All areas with more than a 1 in 1,000 annual probability of either river or sea flooding.\""}
+            tooltip={"the GLA official description: \"All areas with more than a 1 in 1,000 annual probability of either river or sea flooding.\""}
             />
             <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={floodSwitchOnClick}>
                 {(flood === 'enabled')? 'Click to hide Flood Zones' : 'Click to see Flood Zones mapped'}
@@ -150,7 +150,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
             slug="planning_live_application"
             value={null}
             disabled={true}
-            tooltip={"GLA official description: \"Housing zones are areas funded by the Mayor and government to attract developers and relevant partners to build new homes.\""}
+            tooltip={"the GLA official description: \"Housing zones are areas funded by the Mayor and government to attract developers and relevant partners to build new homes.\""}
             />
             <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={housingSwitchOnClick}>
                 {(housing === 'enabled')? 'Click to hide Housing Zones' : 'Click to see Housing Zones mapped'}
@@ -206,12 +206,12 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     {'Click to see individual protected buildings mapped'}
                     </button>
                 :
-                    <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToEmptyMapStyle}>
+                    <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToAllPlanningApplicationsMapStyle}>
-                    {'Click to hide individual protected buildings on map'}
+                    {'Click to see planning applications'}
                     </button>
             }
             <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={conservationSwitchOnClick}>
-                {(conservation === 'enabled')? 'Click to hide Convervation Areas' : 'Click to see Convervation Areas'}
+                {(conservation === 'enabled')? 'Click to hide Conservation Areas' : 'Click to see Conservation Areas'}
                 </button>
             <NumericDataEntryWithFormattedLink
                 title={dataFields.planning_list_id.title}

app/src/frontend/config/category-maps-config.ts

@@ -189,8 +189,8 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
         {
             mapStyle: 'planning_applications_status_recent',
             legend: {
-                title: 'Last 12 months - planning applications submissions/decisions (official data)',
+                title: 'The last 12 months - planning applications submissions/decisions (official data)',
-                disclaimer: 'The map shows applications where the submission or decision data falls within last 12 months.',
+                disclaimer: 'The map shows applications where the submission or decision data falls within the last 12 months.',
                 elements: [
                     { color: '#a040a0', text: 'Submitted, awaiting decision' },
                     { color: '#fff200', text: 'Appeal In Progress' },
@@ -248,15 +248,6 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
                     { color: '#8500d4', text: 'In Archaeological Priority Area'},
                 ]
             },
-        },
-        {
-            mapStyle: 'empty_map',
-            legend: {
-                title: 'Empty map',
-                disclaimer: 'This is an empty map to see overlays without distraction.',
-                elements: [
-                ]
-            },
         }
     ],
     [Category.Sustainability]: [{

app/src/frontend/config/tileserver-config.ts

@@ -15,7 +15,6 @@ export type BuildingMapTileset = 'date_year' |
     'planning_applications_status_recent' |
     'planning_applications_status_very_recent' |
     'planning_combined' |
-    'empty_map' |
     'sust_dec' |
     'building_attachment_form' |
     'landuse' |

app/src/frontend/displayPreferences-context.tsx

@@ -3,8 +3,8 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
 import { LayerEnablementState, MapTheme } from './config/map-config';
 
 interface DisplayPreferencesContextState {
-    resetLayers: (e: React.FormEvent<HTMLFormElement>) => void;
+    showOverlayList: (e: React.FormEvent<HTMLFormElement>) => void;
-    anyLayerModifiedState: () => boolean;
+    resetLayersAndHideTheirList: (e: React.FormEvent<HTMLFormElement>) => void;
 
     vista: LayerEnablementState;
     vistaSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -41,6 +41,10 @@ interface DisplayPreferencesContextState {
     darkLightTheme: MapTheme;
     darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
+    showLayerSelection: LayerEnablementState;
+    showLayerSelectionSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    showLayerSelectionSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 const stub = (): never => {
@@ -48,8 +52,8 @@ const stub = (): never => {
 };
 
 export const DisplayPreferencesContext = createContext<DisplayPreferencesContextState>({
-    resetLayers: stub,
+    showOverlayList: stub,
-    anyLayerModifiedState: stub,
+    resetLayersAndHideTheirList: stub,
 
     vista: undefined,
     vistaSwitch: stub,
@@ -86,6 +90,10 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
     darkLightTheme: undefined,
     darkLightThemeSwitch: stub,
     darkLightThemeSwitchOnClick: undefined,
+
+    showLayerSelection: undefined,
+    showLayerSelectionSwitch: stub,
+    showLayerSelectionSwitchOnClick: undefined,
 });
 
 const noop = () => {};
@@ -99,6 +107,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const defaultParcel = 'disabled'
     const defaultConservation = 'disabled'
     const defaultHistoricData = 'disabled'
+    const defaultShowLayerSelection = 'disabled'
     const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
     const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
     const [creative, setCreative] = useState<LayerEnablementState>(defaultCreative);
@@ -108,10 +117,17 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
     const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
     const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
+    const [showLayerSelection, setShowLayerSelection] = useState<LayerEnablementState>(defaultShowLayerSelection);
 
-    const resetLayers = useCallback(
+    const showOverlayList = useCallback(
+        (e) => {
+            setShowLayerSelection('enabled')
+        },
+        []
+    )
+
+    const resetLayersAndHideTheirList = useCallback(
         (e) => {
-            e.preventDefault();
             setVista(defaultVista);
             setFlood(defaultFlood);
             setCreative(defaultCreative);
@@ -120,8 +136,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
             setParcel(defaultParcel);
             setConservation(defaultConservation);
             setHistoricData(defaultHistoricData);
+            setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action
             //setDarkLightTheme('night'); // reset only layers
-        },
+    },
         []
     )
 
@@ -289,11 +306,26 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
         setDarkLightTheme(newDarkLightTheme);
     }
 
+    const showLayerSelectionSwitch = useCallback(
+        (e) => {
+            flipShowLayerSelection(e)
+        },
+        [showLayerSelection],
+    )
+    const showLayerSelectionSwitchOnClick = (e) => {
+        flipShowLayerSelection(e)
+    }
+    function flipShowLayerSelection(e) {
+        e.preventDefault();
+        const newShowLayerSelection = (showLayerSelection === 'enabled')? 'disabled' : 'enabled';
+        setShowLayerSelection(newShowLayerSelection);
+    }
+
 
     return (
         <DisplayPreferencesContext.Provider value={{
-            resetLayers,
+            showOverlayList,
-            anyLayerModifiedState,
+            resetLayersAndHideTheirList,
 
             vista,
             vistaSwitch,
@@ -324,7 +356,11 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
 
             darkLightTheme,
             darkLightThemeSwitch,
-            darkLightThemeSwitchOnClick
+            darkLightThemeSwitchOnClick,
+
+            showLayerSelection,
+            showLayerSelectionSwitch,
+            showLayerSelectionSwitchOnClick
         }}>
             {children}
         </DisplayPreferencesContext.Provider>

app/src/frontend/header.tsx

@@ -53,9 +53,14 @@ function getCurrentMenuLinks(username: string): MenuLink[][] {
                 to: "/data-extracts.html",
                 text: "Download data"
             },
+            {
+                to: "https://github.com/colouring-cities/manual/wiki",
+                text: "Open Manual - Wiki",
+                external: true
+            },
             {
                 to: "https://github.com/colouring-london/colouring-london",
-                text: "Access open code",
+                text: "Open code",
                 external: true
             },
             {
@@ -68,7 +73,6 @@ function getCurrentMenuLinks(username: string): MenuLink[][] {
                 to: "/showcase.html",
                 text: "Case Study Showcase",
                 disabled: true,
-                note: "Not Yet Activated"
             },
         ],
         [

app/src/frontend/map/borough-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const BoroughSwitcher: React.FC<{}> = () => {
     const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`borough-switcher map-button ${darkLightTheme}`} onSubmit={boroughSwitch}>
+        <form className={`borough-switcher map-button ${borough}-state ${darkLightTheme}`} onSubmit={boroughSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(borough === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
+                {(borough === 'enabled')? 'Borough Boundaries on' : 'Borough Boundaries off'}
             </button>
         </form>
     );

app/src/frontend/map/conservation-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
     const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`conservation-switcher map-button ${darkLightTheme}`} onSubmit={conservationSwitch}>
+        <form className={`conservation-switcher map-button ${conservation}-state ${darkLightTheme}`} onSubmit={conservationSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(conservation === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
+                {(conservation === 'enabled')? 'Conservation Areas on' : 'Conservation Areas off'}
             </button>
         </form>
     );

app/src/frontend/map/creative-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const CreativeSwitcher: React.FC<{}> = () => {
     const { creative, creativeSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`creative-switcher map-button ${darkLightTheme}`} onSubmit={creativeSwitch}>
+        <form className={`creative-switcher map-button ${creative}-state ${darkLightTheme}`} onSubmit={creativeSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(creative === 'enabled')? 'Switch off Creative Enterprise Zones' : 'Switch on Creative Enterprise Zones'}
+                {(creative === 'enabled')? 'Enterprise Zones on' : 'Creative Enterprise Zones off'}
             </button>
         </form>
     );

app/src/frontend/map/data-switcher.tsx

@@ -4,17 +4,23 @@ import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 interface DataLayerSwitcherProps {
-    currentDisplay: string;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
-    const { darkLightTheme } = useDisplayPreferences();
+    const { showLayerSelection, showOverlayList, resetLayersAndHideTheirList, darkLightTheme } = useDisplayPreferences();
+    const handleSubmit = (evt) => {
+        evt.preventDefault();
+        if (showLayerSelection === 'enabled') {
+            resetLayersAndHideTheirList(evt)
+        } else {
+            showOverlayList(evt)
+        }
+    }
     return (
-        <form className={`data-switcher map-button ${darkLightTheme}`} onSubmit={props.onSubmit}>
+        <form className={`data-switcher map-button ${darkLightTheme}`} onSubmit={handleSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}
+                {(showLayerSelection === 'enabled')? 'Clear layer options' : 'Show layer options'}
             </button>
         </form>
     );

app/src/frontend/map/flood-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const FloodSwitcher: React.FC<{}> = () => {
     const { flood, floodSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`flood-switcher map-button ${darkLightTheme}`} onSubmit={floodSwitch}>
+        <form className={`flood-switcher map-button ${flood}-state ${darkLightTheme}`} onSubmit={floodSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(flood === 'enabled')? 'Switch off Flood Zones' : 'Switch on Flood Zones'}
+                {(flood === 'enabled')? 'Flood Zones on' : 'Flood Zones of'}
             </button>
         </form>
     );

app/src/frontend/map/historic-data-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const HistoricDataSwitcher: React.FC<{}> = (props) => {
     const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`historic-data-switcher map-button ${darkLightTheme}`} onSubmit={historicDataSwitch}>
+        <form className={`historic-data-switcher map-button ${historicData}-state ${darkLightTheme}`} onSubmit={historicDataSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(historicData === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
+                {(historicData === 'enabled')? 'The OS 1890s Historical Map on' : 'The OS 1890s Historical Map off'}
             </button>
         </form>
     );

app/src/frontend/map/housing-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const HousingSwitcher: React.FC<{}> = () => {
     const { housing, housingSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`housing-switcher map-button ${darkLightTheme}`} onSubmit={housingSwitch}>
+    <form className={`housing-switcher map-button ${housing}-state ${darkLightTheme}`} onSubmit={housingSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
-            {(housing === 'enabled')? 'Switch off Housing Zones' : 'Switch on Housing Zones'}
+            {(housing === 'enabled')? 'Housing Zones on' : 'Housing Zones off'}
         </button>
     </form>
     );

app/src/frontend/map/layers/building-base-layer-all-zoom.tsx

@@ -14,6 +14,6 @@ export function BuildingBaseLayerAllZoom({ theme }: {theme: MapTheme}) {
                 url={getTileLayerUrl(tileset)}
                 minZoom={1}
                 maxZoom={109}
-                detectRetina={true}
+                detectRetina={false}
             />;
 }

app/src/frontend/map/layers/building-base-layer.tsx

@@ -14,6 +14,6 @@ export function BuildingBaseLayer({ theme }: {theme: MapTheme}) {
                 url={getTileLayerUrl(tileset)}
                 minZoom={14}
                 maxZoom={19}
-                detectRetina={true}
+                detectRetina={false}
             />;
 }

app/src/frontend/map/layers/building-data-layer.tsx

@@ -11,6 +11,6 @@ export function BuildingDataLayer({tileset, revisionId} : { tileset: BuildingMap
                 url={getTileLayerUrl(tileset, {rev: revisionId})}
                 minZoom={9}
                 maxZoom={19}
-                detectRetina={true}
+                detectRetina={false}
             />;
 }

app/src/frontend/map/layers/building-highlight-layer.tsx

@@ -11,6 +11,6 @@ export function BuildingHighlightLayer({selectedBuildingId, baseTileset}: {selec
                 url={getTileLayerUrl('highlight', {highlight: `${selectedBuildingId}`, base: baseTileset})}
                 minZoom={13}
                 maxZoom={19}
-                detectRetina={true}
+                detectRetina={false}
             />;
 }

app/src/frontend/map/layers/building-numbers-layer.tsx

@@ -9,6 +9,6 @@ export function BuildingNumbersLayer({revisionId}: {revisionId: string}) {
                 url={getTileLayerUrl('number_labels', {rev: revisionId})}
                 minZoom={17}
                 maxZoom={19}
-                detectRetina={true}
+                detectRetina={false}
             />;
 }

app/src/frontend/map/layers/city-base-map-layer.tsx

@@ -31,7 +31,7 @@ export function CityBaseMapLayer({ theme }: { theme: MapTheme }) {
         attribution={attribution}
         maxNativeZoom={18}
         maxZoom={19}
-        detectRetina={true}
+        detectRetina={false}
         className={theme_class}
     />;
 }

app/src/frontend/map/layers/housing-boundary-layer.tsx

@@ -16,7 +16,7 @@ export function HousingBoundaryLayer() {
     if(housing == "enabled") {
         return boundaryGeojson &&
         <GeoJSON 
-        attribution="Housing Zones from <a href=https://data.london.gov.uk/dataset/housing_zones>London Datastore</a>. The boundaries are based on Ordnance Survey mapping and the data is published under Ordnance Survey's 'presumption to publish'. Contains OS data © Crown copyright and database rights 2019. Greater London Authority - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'"
+        attribution="Housing Zones from <a href=https://data.london.gov.uk/dataset/housing_zones>London Datastore</a>. The boundaries are based on Ordnance Survey mapping and the data is published under Ordnance Survey's 'presumption to publish'. Contains OS data © Crown copyright and database rights 2019. The Greater London Authority - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'"
         data={boundaryGeojson}
         style={{color: '#FF8000', fill: true, weight: 1, opacity: 0.6}}
     />;

app/src/frontend/map/layers/parcel-boundary-layer.tsx

@@ -22,16 +22,8 @@ export function ParcelBoundaryLayer() {
         style={{color: '#ff0', fill: false, weight: 1}}
        /* minNativeZoom={17}*/
     />;
-    } else if (parcel == "disabled") {
-        return <div></div>
-        // do not display anything
-        return boundaryGeojson &&
-        <GeoJSON 
-        data={boundaryGeojson}
-        style={{color: '#0f0', fill: false, weight: 1}} />
     } else {
-        return boundaryGeojson &&
+        return <div></div>
-        <GeoJSON data={boundaryGeojson} style={{color: '#0f0', fill: true}}/>;
     }
 }
 

app/src/frontend/map/layers/vista-boundary-layer.tsx

@@ -16,7 +16,7 @@ export function VistaBoundaryLayer() {
     if(vista == "enabled") {
         return boundaryGeojson &&
         <GeoJSON 
-        attribution=' London Views Management Framework (LVMF) – Extended background vistas from <a href=https://data.london.gov.uk/dataset/london-views-management-framework-lvmf-extended-background-vistas>London Datastore</a>: <a href=https://creativecommons.org/licenses/by/4.0/legalcode>CC-BY-SA 4.0</a> by Greater London Authority (GLA)'
+        attribution=' London Views Management Framework (LVMF) – Extended background vistas from <a href=https://data.london.gov.uk/dataset/london-views-management-framework-lvmf-extended-background-vistas>London Datastore</a>: <a href=https://creativecommons.org/licenses/by/4.0/legalcode>CC-BY-SA 4.0</a> by the Greater London Authority (GLA)'
         data={boundaryGeojson}
         style={{color: '#0f0', fill: true, weight: 1, opacity: 0.6}}
     />;

app/src/frontend/map/map-button.css

@@ -17,6 +17,10 @@
 .map-button .btn {
     margin: 0;
     min-width: 310px;
+    color: #191b1d;
+}
+.map-button .btn:hover {
+    color: #fff;
 }
 .map-button.night .btn {
     color: #fff;
@@ -24,25 +28,55 @@
     border-color: #343a40;
 }
 .map-button.night .btn:hover {
-    color: #343a40;
+    color: #d4d7da;
     background-color: transparent;
     background-image: none;
     border-color: #343a40;
 }
+.map-button.disabled-state,
+.map-button.disabled-state .btn{
+    background-color: #df7474;
+}
+.map-button.night.disabled-state,
+.map-button.night.disabled-state .btn{
+    background-color: #b03f3f;
+}
+.map-button.disabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.night.disabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.enabled-state {
+    color: #75e775;
+    background-color: #75e775;
+}
+.map-button.enabled-state .btn{
+    background-color: #75e775;
+}
+.map-button.night.enabled-state {
+    color: #448844;
+    background-color: #448844;
+}
+.map-button.night.enabled-state .btn{
+    background-color: #448844;
+}
+.map-button.enabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.night.enabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
 @media (max-width: 990px){
     .map-button {
         visibility: hidden;
     }
 }
 
-.reset-switcher {
-    top: 37px;
-    margin-right: 60px;
-}
-.reset-switcher .btn {
-    min-width: 280px;
-}
-
 .theme-switcher {
     top: 77px;
 }

app/src/frontend/map/map.tsx

@@ -5,8 +5,6 @@ import 'leaflet/dist/leaflet.css';
 import './map.css';
 
 import { apiGet } from '../apiHelpers';
-import { HelpIcon } from '../components/icons';
-import { Category } from '../config/categories-config';
 import { initialMapViewport, mapBackgroundColor, MapTheme, LayerEnablementState } from '../config/map-config';
 
 import { Building } from '../models/building';
@@ -31,7 +29,6 @@ import { Legend } from './legend';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
 import DataLayerSwitcher from './data-switcher';
-import { ResetSwitcher } from './reset-switcher';
 import { BoroughSwitcher } from './borough-switcher';
 import { ParcelSwitcher } from './parcel-switcher';
 import { FloodSwitcher } from './flood-switcher';
@@ -64,8 +61,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
     categoryMapDefinitions,
     children
 }) => {
-    const { darkLightTheme, darkLightThemeSwitch } = useDisplayPreferences();
+    const { darkLightTheme, darkLightThemeSwitch, showLayerSelection } = useDisplayPreferences();
-    const [dataLayers, setDataLayers] = useState<LayerEnablementState>('disabled');
     const [position, setPosition] = useState(initialMapViewport.position);
     const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
@@ -88,18 +84,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
         [onBuildingAction],
     )
 
-    const layerSwitch = useCallback(
-        (e) => {
-            e.preventDefault();
-            const newDisplayState = (dataLayers === 'enabled')? 'disabled' : 'enabled';
-            setDataLayers(newDisplayState);
-        },
-        [dataLayers],
-    )
-
-    const hasSelection = selectedBuildingId != undefined;
-    const isEdit = ['edit', 'multi-edit'].includes(mode);
-
     return (
         <div className="map-container">
             <MapContainer
@@ -174,11 +158,10 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                 mode !== 'basic' &&
                 <>
                     <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={onMapColourScale}/>
-                    <ResetSwitcher/>
                     <ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
-                    <DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
+                    <DataLayerSwitcher />
                     {
-                        (dataLayers == "enabled") ?
+                        (showLayerSelection == "enabled") ?
                         <>
                             <BoroughSwitcher/>
                             <ParcelSwitcher/>

app/src/frontend/map/parcel-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const ParcelSwitcher: React.FC<{}> = () => {
     const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`parcel-switcher map-button ${darkLightTheme}`} onSubmit={parcelSwitch}>
+        <form className={`parcel-switcher map-button ${parcel}-state ${darkLightTheme}`} onSubmit={parcelSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
-                {(parcel === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
+                {(parcel === 'enabled')? 'Parcel overlay (sample) on' : 'Parcel overlay (sample) off'}
             </button>
         </form>
     );

app/src/frontend/map/reset-switcher.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import './map-button.css';
-import { useDisplayPreferences } from '../displayPreferences-context';
-
-export const ResetSwitcher: React.FC<{}> = () => {
-    const { resetLayers, darkLightTheme, anyLayerModifiedState } = useDisplayPreferences();
-    if(anyLayerModifiedState()) {
-        return (
-            <form className={`reset-switcher map-button ${darkLightTheme}`} onSubmit={resetLayers}>
-                <button className="btn btn-outline btn-outline-dark"
-                    type="submit">
-                    {"Reset layers"}
-                </button>
-            </form>
-            );
-    } else {
-        return <></>
-    }
-}

app/src/frontend/map/vista-switcher.tsx

@@ -6,10 +6,10 @@ import { useDisplayPreferences } from '../displayPreferences-context';
 export const VistaSwitcher: React.FC<{}> = () => {
     const { vista, vistaSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`vista-switcher map-button ${darkLightTheme}`} onSubmit={vistaSwitch}>
+    <form className={`vista-switcher map-button ${vista}-state ${darkLightTheme}`} onSubmit={vistaSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
-            {(vista === 'enabled')? 'Switch off Protected Vistas' : 'Switch on Protected Vistas'}
+            {(vista === 'enabled')? 'Protected Vistas on' : 'Protected Vistas off'}
         </button>
     </form>
     );

app/src/tiles/dataDefinition.ts

@@ -191,13 +191,6 @@ const LAYER_QUERIES = {
             OR planning_heritage_at_risk_url <> ''
             OR planning_in_apa_url <> ''
             `,
-    empty_map: `
-        SELECT
-            geometry_id
-        FROM
-            buildings
-        WHERE
-            sust_dec IS NOT NULL`,
     conservation_area: `
         SELECT
             geometry_id

etl/planning_data/obtain_livestream_data_and_load_into_database.py

@@ -39,6 +39,7 @@ def load_data_into_database(cursor, data):
             if entry['_source']['description'] != None:
                 description = entry['_source']['description'].strip()
             application_id = entry['_source']['lpa_app_no']
+            application_id_with_borough_identifier = entry['_source']['id']
             decision_date = parse_date_string_into_date_object(entry['_source']['decision_date'])
             last_synced_date = parse_date_string_into_date_object(entry['_source']['last_synced'])
             uprn = entry['_source']['uprn']
@@ -65,8 +66,8 @@ def load_data_into_database(cursor, data):
                 "status": status,
                 "status_before_aliasing": status_before_aliasing,
                 "status_explanation_note": status_explanation_note,
-                "data_source": "Greater London Authority's Planning London DataHub",
+                "data_source": "the Greater London Authority's Planning London DataHub",
-                "data_source_link": None,
+                "data_source_link": "https://www.london.gov.uk/programmes-strategies/planning/digital-planning/planning-london-datahub",
                 "address": address_data.planning_data_entry_to_address(entry),
             }
             if entry["address"] != None:
@@ -87,7 +88,7 @@ def load_data_into_database(cursor, data):
                 print("last_synced_date is treated as invalid:", entry["last_synced_date"])
                 entry["last_synced_date"] = None
 
-            if "Hackney" in entry["application_id"]:
+            if "Hackney" in application_id_with_borough_identifier:
                 if entry["application_url"] != None:
                     if "https://" not in entry["application_url"]:
                         entry["application_url"] = "https://developmentandhousing.hackney.gov.uk" + entry["application_url"]