From c0ad25240db7ee679893815237aca920e3b73b4e Mon Sep 17 00:00:00 2001 From: Vincent Schaffer Date: Sat, 17 Jul 2021 17:30:03 -0400 Subject: [PATCH 1/4] added filter css --- app/src/frontend/map/theme-switcher.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/src/frontend/map/theme-switcher.css b/app/src/frontend/map/theme-switcher.css index 19187414..eaa78dcb 100644 --- a/app/src/frontend/map/theme-switcher.css +++ b/app/src/frontend/map/theme-switcher.css @@ -1,3 +1,11 @@ +.night-theme { + filter: grayscale(100%) invert(1); +} + +.light-theme { + filter: none; +} + .theme-switcher { z-index: 1000; position: absolute; From 611772efa8831f0984274ebf18ba8b93c7f62e46 Mon Sep 17 00:00:00 2001 From: Vincent Schaffer Date: Sat, 17 Jul 2021 17:49:38 -0400 Subject: [PATCH 2/4] intergrated night filter --- .../map/layers/city-base-map-layer.tsx | 15 +++++--- app/src/frontend/map/map.tsx | 36 +++++++++---------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/app/src/frontend/map/layers/city-base-map-layer.tsx b/app/src/frontend/map/layers/city-base-map-layer.tsx index 315b7573..ce57f513 100644 --- a/app/src/frontend/map/layers/city-base-map-layer.tsx +++ b/app/src/frontend/map/layers/city-base-map-layer.tsx @@ -9,25 +9,30 @@ const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r'; * Base raster layer for the map. * @param theme map theme */ -export function CityBaseMapLayer({theme}: {theme: MapTheme}) { +export function CityBaseMapLayer({ theme }: { theme: MapTheme }) { /** * Ordnance Survey maps - UK / London specific * (replace with appropriate base map for other cities/countries) */ const apiKey = OS_API_KEY; - const layer = theme === 'light' ? 'Light_3857' : 'Night 3857'; - + + // Note that OS APIs does not provide dark theme + const layer = theme === 'light' ? 'Light_3857' : 'Light_3857'; + + // In either theme case, we will use OS's light theme, but add our own filter + const theme_class = theme === 'light' ? "light-theme" : "night-theme"; + const baseUrl = `https://api.os.uk/maps/raster/v1/zxy/${layer}/{z}/{x}/{y}.png?key=${apiKey}`; const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines. OS licence'; - + return ; } diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index 0c37feac..f7cc4e18 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -51,7 +51,7 @@ class ColouringMap extends Component { this.themeSwitch = this.themeSwitch.bind(this); } - handleLocate(lat: number, lng: number, zoom: number){ + handleLocate(lat: number, lng: number, zoom: number) { this.setState({ position: [lat, lng], zoom: zoom @@ -69,8 +69,8 @@ class ColouringMap extends Component { themeSwitch(e) { e.preventDefault(); - const newTheme = (this.state.theme === 'light')? 'night' : 'light'; - this.setState({theme: newTheme}); + const newTheme = (this.state.theme === 'light') ? 'night' : 'light'; + this.setState({ theme: newTheme }); } render() { @@ -99,7 +99,7 @@ class ColouringMap extends Component { @@ -107,29 +107,29 @@ class ColouringMap extends Component { { tileset && - + } { this.props.selectedBuildingId && - + } - + { this.props.mode !== 'basic' && @@ -141,7 +141,7 @@ class ColouringMap extends Component { } - {/* */} + } @@ -150,13 +150,13 @@ class ColouringMap extends Component { } } -function ClickHandler({ onClick }: {onClick: (e) => void}) { +function ClickHandler({ onClick }: { onClick: (e) => void }) { useMapEvent('click', (e) => onClick(e)); - + return null; } -function MapBackgroundColor({ theme}: {theme: MapTheme}) { +function MapBackgroundColor({ theme }: { theme: MapTheme }) { const map = useMap(); useEffect(() => { map.getContainer().style.backgroundColor = mapBackgroundColor[theme]; From 6551d9742f7524176877300d1f6f77ee2c337bbb Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Fri, 3 Dec 2021 20:32:54 +0100 Subject: [PATCH 3/4] revert part of whitespace changes --- app/src/frontend/map/map.tsx | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index f7cc4e18..fb98a708 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -51,7 +51,7 @@ class ColouringMap extends Component { this.themeSwitch = this.themeSwitch.bind(this); } - handleLocate(lat: number, lng: number, zoom: number) { + handleLocate(lat: number, lng: number, zoom: number){ this.setState({ position: [lat, lng], zoom: zoom @@ -69,8 +69,8 @@ class ColouringMap extends Component { themeSwitch(e) { e.preventDefault(); - const newTheme = (this.state.theme === 'light') ? 'night' : 'light'; - this.setState({ theme: newTheme }); + const newTheme = (this.state.theme === 'light')? 'night' : 'light'; + this.setState({theme: newTheme}); } render() { @@ -99,7 +99,7 @@ class ColouringMap extends Component { @@ -107,29 +107,29 @@ class ColouringMap extends Component { { tileset && - + } { this.props.selectedBuildingId && - + } - + { this.props.mode !== 'basic' && @@ -150,13 +150,13 @@ class ColouringMap extends Component { } } -function ClickHandler({ onClick }: { onClick: (e) => void }) { +function ClickHandler({ onClick }: {onClick: (e) => void}) { useMapEvent('click', (e) => onClick(e)); - + return null; } -function MapBackgroundColor({ theme }: { theme: MapTheme }) { +function MapBackgroundColor({ theme}: {theme: MapTheme}) { const map = useMap(); useEffect(() => { map.getContainer().style.backgroundColor = mapBackgroundColor[theme]; From a0111a190b5a2c4ad5b38c2027b8bdbc4a5af34c Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Wed, 8 Dec 2021 17:50:49 +0100 Subject: [PATCH 4/4] Simplify code Co-authored-by: Tom Russell --- app/src/frontend/map/layers/city-base-map-layer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/frontend/map/layers/city-base-map-layer.tsx b/app/src/frontend/map/layers/city-base-map-layer.tsx index ce57f513..bfa58f4e 100644 --- a/app/src/frontend/map/layers/city-base-map-layer.tsx +++ b/app/src/frontend/map/layers/city-base-map-layer.tsx @@ -18,7 +18,7 @@ export function CityBaseMapLayer({ theme }: { theme: MapTheme }) { const apiKey = OS_API_KEY; // Note that OS APIs does not provide dark theme - const layer = theme === 'light' ? 'Light_3857' : 'Light_3857'; + const layer = 'Light_3857'; // In either theme case, we will use OS's light theme, but add our own filter const theme_class = theme === 'light' ? "light-theme" : "night-theme";