enable first map switching button

app/src/frontend/building/building-view.tsx

@@ -4,6 +4,7 @@ import { useAuth } from '../auth-context';
 import { categoriesConfig, Category } from '../config/categories-config';
 import { categoryUiConfig } from '../config/category-ui-config';
 import { Building, UserVerified } from '../models/building';
+import { BuildingMapTileset } from '../config/tileserver-config';
 
 import BuildingNotFound from './building-not-found';
 
@@ -14,6 +15,8 @@ interface BuildingViewProps {
     user_verified?: any;
     onBuildingUpdate: (buildingId: number, updatedData: Building) => void;
     onUserVerifiedUpdate: (buildingId: number, updatedData: UserVerified) => void;
+    mapColourScale: BuildingMapTileset;
+    onMapColourScale: (x: BuildingMapTileset) => void;
 }
 
 /**
@@ -45,6 +48,8 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
         intro={intro}
         inactive={inactive}
         user={user}
+        mapColourScale={props.mapColourScale}
+        onMapColourScale={props.onMapColourScale}
     />; 
 };
 

app/src/frontend/building/data-container.tsx

@@ -9,6 +9,7 @@ import ErrorBox from '../components/error-box';
 import InfoBox from '../components/info-box';
 import { compareObjects } from '../helpers';
 import { Building, BuildingEdits, BuildingUserAttributes, UserVerified } from '../models/building';
+import { BuildingMapTileset } from '../config/tileserver-config';
 import { User } from '../models/user';
 
 import ContainerHeader from './container-header';
@@ -34,6 +35,9 @@ interface DataContainerProps {
     user_verified?: any;
     onBuildingUpdate: (buildingId: number, updatedData: Building) => void;
     onUserVerifiedUpdate: (buildingId: number, updatedData: UserVerified) => void;
+
+    mapColourScale: BuildingMapTileset;
+    onMapColourScale: (x: BuildingMapTileset) => void;
 }
 
 interface DataContainerState {
@@ -43,6 +47,8 @@ interface DataContainerState {
     currentBuildingId: number;
     currentBuildingRevisionId: number;
     buildingEdits: BuildingEdits;
+    mapColourScale: BuildingMapTileset;
+    onMapColourScale: (x: BuildingMapTileset) => void;
 }
 
 export type DataContainerType = React.ComponentType<DataContainerProps>;
@@ -66,7 +72,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                 keys_to_copy: {},
                 buildingEdits: {},
                 currentBuildingId: undefined,
-                currentBuildingRevisionId: undefined
+                currentBuildingRevisionId: undefined,
+                mapColourScale: undefined,
+                onMapColourScale: undefined
             };
 
             this.handleChange = this.handleChange.bind(this);
@@ -108,7 +116,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                     keys_to_copy: categoryKeys,
                     buildingEdits: {},
                     currentBuildingId: newBuildingId,
-                    currentBuildingRevisionId: newBuildingRevisionId
+                    currentBuildingRevisionId: newBuildingRevisionId,
+                    mapColourScale: props.mapColourScale,
+                    onMapColourScale: props.onMapColourScale
                 };
             }
 
@@ -361,6 +371,8 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                                 onSaveAdd={undefined}
                                 onSaveChange={undefined}
                                 user_verified={[]}
+                                mapColourScale={undefined}
+                                onMapColourScale={undefined}
                             />
                         </Fragment> :
                         this.props.building != undefined ?
@@ -413,6 +425,8 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                                     onSaveChange={this.handleSaveChange}
                                     user_verified={this.props.user_verified}
                                     user={this.props.user}
+                                    mapColourScale={this.props.mapColourScale}
+                                    onMapColourScale={this.props.onMapColourScale}
                                 />
                             </form> :
                             <InfoBox msg="Select a building to view data"></InfoBox>

app/src/frontend/building/data-containers/category-view-props.ts

@@ -1,4 +1,5 @@
 import { Building, BuildingAttributes } from '../../models/building';
+import { BuildingMapTileset } from '../config/tileserver-config';
 
 interface CopyProps {
     copying: boolean;
@@ -38,6 +39,9 @@ interface CategoryViewProps {
 
     user_verified: any;
     user?: any;
+
+    mapColourScale: BuildingMapTileset;
+    onMapColourScale: (x: BuildingMapTileset) => void;
 }
 
 export {

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

@@ -18,6 +18,7 @@ import PlanningDataOfficialDataEntry from '../data-components/planning-data-entr
 import { CategoryViewProps } from './category-view-props';
 import { Category } from '../../config/categories-config';
 import { useDisplayPreferences } from '../../displayPreferences-context';
+import { processParam } from '../../../api/parameters';
 
 const currentTimestamp = new Date().valueOf();
 const milisecondsInYear = 1000 * 60 * 60 * 24 * 365;
@@ -48,6 +49,10 @@ function isArchived(item) {
 }
 
 const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
+    const switchToExpectedApplicationMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('community_expected_planning_application_total')
+    }    
     const { flood, floodSwitchOnClick, housing, housingSwitchOnClick, creative, creativeSwitchOnClick, vista, vistaSwitchOnClick } = useDisplayPreferences();
     const communityLinkUrl = `/${props.mode}/${Category.Community}/${props.building.building_id}`;
     return (
@@ -132,7 +137,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     mode={props.mode}
                     copy={props.copy}
                 />
-                <button className="map-switcher-inline btn btn-outline btn-outline-dark" > {/*onClick={floodSwitchOnClick}*/}
+                <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToExpectedApplicationMapStyle}> 
                     {'Click here to switch map key to this info'}
                 </button>
             </DataEntryGroup>

app/src/frontend/map-app.tsx

@@ -161,6 +161,8 @@ export const MapApp: React.FC<MapAppProps> = props => {
                                     user_verified={userVerified ?? {}}
                                     onBuildingUpdate={handleBuildingUpdate}
                                     onUserVerifiedUpdate={handleUserVerifiedUpdate}
+                                    mapColourScale={mapColourScale}
+                                    onMapColourScale={setMapColourScale}
                                 />
                             </Route>
                         </Switch>