buttons in the community section

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

@@ -18,6 +18,22 @@ import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-e
 * Community view/edit section
 */
 const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
+    const switchToLikesMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('likes')
+    }
+    const switchToLocalSignificanceMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('community_local_significance_total')
+    }
+   const switchToExpectedApplicationMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('community_expected_planning_application_total')
+    }
+    const switchToPublicOwnershipMapStyle = (e) => {
+        e.preventDefault();
+        props.onMapColourScale('community_in_public_ownership')
+    }
     const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
     return <>
         <InfoBox type='warning'>
@@ -38,6 +54,9 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 copy={props.copy}
 
             />
+            <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToLikesMapStyle}> 
+                {'Click here to switch map key to this info'}
+            </button>
             <LogicalDataEntry
                 slug='community_type_worth_keeping'
                 title={buildingUserFields.community_type_worth_keeping.title}
@@ -81,7 +100,9 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 mode={props.mode}
                 copy={props.copy}
             />
-
+            <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToLocalSignificanceMapStyle}> 
+                {'Click here to switch map key to this info'}
+            </button>
             <UserOpinionEntry
                 slug='community_expected_planning_application'
                 title={buildingUserFields.community_expected_planning_application.title}
@@ -92,6 +113,9 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 mode={props.mode}
                 copy={props.copy}
             />
+            <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToExpectedApplicationMapStyle}> 
+                {'Click here to switch map key to this info'}
+            </button>
             <InfoBox>You can click and colour any other building on the map as well.</InfoBox>
         </div>
 
@@ -150,6 +174,9 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
             mode={props.mode}
             copy={props.copy}
         />
+        <button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToPublicOwnershipMapStyle}> 
+            {'Click here to switch map key to this info'}
+        </button>
         <Verification
                 slug="community_public_ownership"
                 allow_verify={props.user !== undefined && props.building.community_public_ownership !== null && !props.edited}