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

Merge pull request #696 from colouring-london/feature/night_mode

Browse Source 
Restoring dark mode for map, better for presenting collected data
This commit is contained in:
Mateusz Konieczny 2021-12-08 17:56:56 +01:00 committed by GitHub
commit a1ebda8273
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/frontend/map/layers/city-base-map-layer.tsx
View File

@ -9,25 +9,30 @@ const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r';
* Base raster layer for the map. * Base raster layer for the map.
* @param theme map theme * @param theme map theme
*/ */
export function CityBaseMapLayer({theme}: {theme: MapTheme}) { export function CityBaseMapLayer({ theme }: { theme: MapTheme }) {
/** /**
* Ordnance Survey maps - UK / London specific * Ordnance Survey maps - UK / London specific
* (replace with appropriate base map for other cities/countries) * (replace with appropriate base map for other cities/countries)
*/ */
const apiKey = OS_API_KEY; const apiKey = OS_API_KEY;
const layer = theme === 'light' ? 'Light_3857' : 'Night 3857';
// Note that OS APIs does not provide dark theme
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";
const baseUrl = `https://api.os.uk/maps/raster/v1/zxy/${layer}/{z}/{x}/{y}.png?key=${apiKey}`; 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. <a href=/ordnance-survey-licence.html>OS licence</a>'; const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines. <a href=/ordnance-survey-licence.html>OS licence</a>';
return <TileLayer return <TileLayer
key={theme} /* needed because TileLayer.key is not mutabe in react-leaflet v3 */
url={baseUrl} url={baseUrl}
attribution={attribution} attribution={attribution}
maxNativeZoom={18} maxNativeZoom={18}
maxZoom={19} maxZoom={19}
detectRetina={true} detectRetina={true}
className={theme_class}
/>; />;
} }

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

@ -144,7 +144,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
</div> </div>
} }
<Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/> <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/>
{/* <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={theme} /> */} <ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
<SearchBox onLocate={handleLocate} /> <SearchBox onLocate={handleLocate} />
</> </>
} }

8
app/src/frontend/map/theme-switcher.css
View File

@ -1,3 +1,11 @@
.night-theme {
filter: grayscale(100%) invert(1);
}
.light-theme {
filter: none;
}
.theme-switcher { .theme-switcher {
z-index: 1000; z-index: 1000;
position: absolute; position: absolute;