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

Add hotfix for basemap - set to plain color

Browse Source
This commit is contained in:
Maciej Ziarkowski 2021-05-04 17:17:14 +01:00
parent 3daa00ef65
commit 1ee6a7581e
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/frontend/config/map-config.ts
View File

@ -5,3 +5,8 @@ export const defaultMapPosition = {
}; };
export type MapTheme = 'light' | 'night'; export type MapTheme = 'light' | 'night';
export const mapBackgroundColor: Record<MapTheme, string> = {
light: '#F0EEEB',
night: '#162639'
};

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

@ -1,5 +1,5 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment, useEffect } from 'react';
import { AttributionControl, MapContainer, ZoomControl, useMapEvent, Pane } from 'react-leaflet'; import { AttributionControl, MapContainer, ZoomControl, useMapEvent, Pane, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import './map.css'; import './map.css';
@ -8,7 +8,7 @@ import { apiGet } from '../apiHelpers';
import { HelpIcon } from '../components/icons'; import { HelpIcon } from '../components/icons';
import { categoryMapsConfig } from '../config/category-maps-config'; import { categoryMapsConfig } from '../config/category-maps-config';
import { Category } from '../config/categories-config'; import { Category } from '../config/categories-config';
import { defaultMapPosition, MapTheme } from '../config/map-config'; import { defaultMapPosition, mapBackgroundColor, MapTheme } from '../config/map-config';
import { Building } from '../models/building'; import { Building } from '../models/building';
import { CityBaseMapLayer } from './layers/city-base-map-layer'; import { CityBaseMapLayer } from './layers/city-base-map-layer';
@ -97,13 +97,14 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
attributionControl={false} attributionControl={false}
> >
<ClickHandler onClick={this.handleClick} /> <ClickHandler onClick={this.handleClick} />
<MapBackgroundColor theme={this.state.theme} />
<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} /> */} {/* temporarily disable the base map due to OS account issues */}
<BuildingBaseLayer theme={this.state.theme} /> <BuildingBaseLayer theme={this.state.theme} />
</Pane> </Pane>
@ -158,4 +159,13 @@ function ClickHandler({ onClick }: {onClick: (e) => void}) {
return null; return null;
} }
function MapBackgroundColor({ theme}: {theme: MapTheme}) {
const map = useMap();
useEffect(() => {
map.getContainer().style.backgroundColor = mapBackgroundColor[theme];
});
return null;
}
export default ColouringMap; export default ColouringMap;