a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enable/disable layer buttons

Browse Source
This commit is contained in:
Mateusz Konieczny 2022-12-06 10:41:32 +01:00
parent 6ad6c7f11b
commit b17b7922b6
11 changed files with 90 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/frontend/map/borough-switcher.css
View File

@ -9,7 +9,7 @@
.borough-switcher {
z-index: 1000;
position: absolute;
top: 117px;
top: 157px;
right: 10px;
float: right;
background: white;

2
app/src/frontend/map/conservation-switcher.css
View File

@ -9,7 +9,7 @@
.conservation-switcher {
z-index: 1000;
position: absolute;
top: 317px;
top: 357px;
right: 10px;
float: right;
background: white;

2
app/src/frontend/map/creative-switcher.css
View File

@ -9,7 +9,7 @@
.creative-switcher {
z-index: 1000;
position: absolute;
top: 197px;
top: 237px;
right: 10px;
float: right;
background: white;

37
app/src/frontend/map/data-switcher.css Normal file
View File

@ -0,0 +1,37 @@
.data-theme {
filter: grayscale(100%) invert(1);
}
.data-theme {
filter: none;
}
.data-switcher {
z-index: 1000;
position: absolute;
top: 117px;
right: 10px;
float: right;
background: white;
border-radius: 4px;
}
.data-switcher .btn {
margin: 0;
min-width: 280px;
}
.data-switcher.night .btn {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
.data-switcher.night .btn:hover {
color: #343a40;
background-color: transparent;
background-image: none;
border-color: #343a40;
}
@media (max-width: 990px){
.data-switcher {
visibility: hidden;
}
}

19
app/src/frontend/map/data-switcher.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './data-switcher.css';
interface DataLayerSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => (
<form className={`data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Switch off layer listing' : 'Switch on layer listing'}
</button>
</form>
);
export default DataLayerSwitcher;

2
app/src/frontend/map/flood-switcher.css
View File

@ -9,7 +9,7 @@
.flood-switcher {
z-index: 1000;
position: absolute;
top: 237px;
top: 277px;
right: 10px;
float: right;
background: white;

2
app/src/frontend/map/historic-data-switcher.css
View File

@ -9,7 +9,7 @@
.historic-data-switcher {
z-index: 1000;
position: absolute;
top: 357px;
top: 397px;
right: 10px;
float: right;
background: white;

2
app/src/frontend/map/housing-switcher.css
View File

@ -9,7 +9,7 @@
.housing-switcher {
z-index: 1000;
position: absolute;
top: 157px;
top: 197px;
right: 10px;
float: right;
background: white;

35
app/src/frontend/map/map.tsx
View File

@ -30,6 +30,7 @@ import { BuildingHighlightLayer } from './layers/building-highlight-layer';
import { Legend } from './legend';
import SearchBox from './search-box';
import ThemeSwitcher from './theme-switcher';
import DataLayerSwitcher from './data-switcher';
import BoroughSwitcher from './borough-switcher';
import ParcelSwitcher from './parcel-switcher';
import FloodSwitcher from './flood-switcher';
@ -57,6 +58,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
children
}) => {
const [theme, setTheme] = useState<MapTheme>('night');
const [dataLayers, setDataLayers] = useState<LayerEnablementState>('disabled');
{/* TODO start change remaining ones */}
const [borough, setBorough] = useState<LayerEnablementState>('enabled');
const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
@ -98,6 +100,15 @@ export const ColouringMap : FC<ColouringMapProps> = ({
[theme],
)
const layerSwitch = useCallback(
(e) => {
e.preventDefault();
const newDisplayState = (dataLayers === 'enabled')? 'disabled' : 'enabled';
setDataLayers(newDisplayState);
},
[dataLayers],
)
{/* change remaining ones */}
const boroughSwitch = useCallback(
(e) => {
@ -243,16 +254,22 @@ export const ColouringMap : FC<ColouringMapProps> = ({
}
<Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/>
<ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
<DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
{
(dataLayers == "enabled") ?
<>
<BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
<ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
<FloodSwitcher />
<ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
<HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
<VistaSwitcher />
<HousingSwitcher />
<CreativeSwitcher />
</>
: <></>
}
{/* TODO change remaining ones*/}
<BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
<ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
<FloodSwitcher />
<ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
<HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
<VistaSwitcher />
<HousingSwitcher />
<CreativeSwitcher />
<SearchBox onLocate={handleLocate} />
</>
}

2
app/src/frontend/map/parcel-switcher.css
View File

@ -9,7 +9,7 @@
.parcel-switcher {
z-index: 1000;
position: absolute;
top: 397px;
top: 437px;
right: 10px;
float: right;
background: white;

2
app/src/frontend/map/vista-switcher.css
View File

@ -9,7 +9,7 @@
.vista-switcher {
z-index: 1000;
position: absolute;
top: 277px;
top: 317px;
right: 10px;
float: right;
background: white;