From 611772efa8831f0984274ebf18ba8b93c7f62e46 Mon Sep 17 00:00:00 2001 From: Vincent Schaffer Date: Sat, 17 Jul 2021 17:49:38 -0400 Subject: [PATCH] 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];