intergrated night filter
This commit is contained in:
parent
c0ad25240d
commit
611772efa8
@ -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}
|
||||||
/>;
|
/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user