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

intergrated night filter

Browse Source
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
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 = 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}
/>; />;
} }

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

@ -51,7 +51,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
this.themeSwitch = this.themeSwitch.bind(this); this.themeSwitch = this.themeSwitch.bind(this);
} }
handleLocate(lat: number, lng: number, zoom: number){ handleLocate(lat: number, lng: number, zoom: number) {
this.setState({ this.setState({
position: [lat, lng], position: [lat, lng],
zoom: zoom zoom: zoom
@ -69,8 +69,8 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
themeSwitch(e) { themeSwitch(e) {
e.preventDefault(); e.preventDefault();
const newTheme = (this.state.theme === 'light')? 'night' : 'light'; const newTheme = (this.state.theme === 'light') ? 'night' : 'light';
this.setState({theme: newTheme}); this.setState({ theme: newTheme });
} }
render() { render() {
@ -99,7 +99,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
<Pane <Pane
key={this.state.theme} key={this.state.theme}
name={'cc-base-pane'} name={'cc-base-pane'}
style={{zIndex: 50}} style={{ zIndex: 50 }}
> >
<CityBaseMapLayer theme={this.state.theme} /> <CityBaseMapLayer theme={this.state.theme} />
<BuildingBaseLayer theme={this.state.theme} /> <BuildingBaseLayer theme={this.state.theme} />
@ -115,7 +115,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
<Pane <Pane
name='cc-overlay-pane' name='cc-overlay-pane'
style={{zIndex: 300}} style={{ zIndex: 300 }}
> >
<CityBoundaryLayer /> <CityBoundaryLayer />
<BuildingNumbersLayer revisionId={this.props.revisionId} /> <BuildingNumbersLayer revisionId={this.props.revisionId} />
@ -129,7 +129,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
</Pane> </Pane>
<ZoomControl position="topright" /> <ZoomControl position="topright" />
<AttributionControl prefix=""/> <AttributionControl prefix="" />
</MapContainer> </MapContainer>
{ {
this.props.mode !== 'basic' && this.props.mode !== 'basic' &&
@ -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>
} }
@ -150,13 +150,13 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
} }
} }
function ClickHandler({ onClick }: {onClick: (e) => void}) { function ClickHandler({ onClick }: { onClick: (e) => void }) {
useMapEvent('click', (e) => onClick(e)); useMapEvent('click', (e) => onClick(e));
return null; return null;
} }
function MapBackgroundColor({ theme}: {theme: MapTheme}) { function MapBackgroundColor({ theme }: { theme: MapTheme }) {
const map = useMap(); const map = useMap();
useEffect(() => { useEffect(() => {
map.getContainer().style.backgroundColor = mapBackgroundColor[theme]; map.getContainer().style.backgroundColor = mapBackgroundColor[theme];