intergrated night filter

This commit is contained in:
Vincent Schaffer 2021-07-17 17:49:38 -04:00
parent c0ad25240d
commit 611772efa8
2 changed files with 28 additions and 23 deletions

View File

@ -16,18 +16,23 @@ export function CityBaseMapLayer({theme}: {theme: MapTheme}) {
* (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 = 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 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}
/>; />;
} }

View File

@ -141,7 +141,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
</div> </div>
} }
<Legend legendConfig={categoryMapDefinition?.legend} /> <Legend legendConfig={categoryMapDefinition?.legend} />
{/* <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} /> */} <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
<SearchBox onLocate={this.handleLocate} /> <SearchBox onLocate={this.handleLocate} />
</Fragment> </Fragment>
} }