-
Notifications
You must be signed in to change notification settings - Fork 1
/
MapControls.tsx
46 lines (41 loc) · 1.19 KB
/
MapControls.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React from 'react';
import { ReactElement } from 'react';
import { MapComponent } from '../utils/types';
import MapControl from './MapControl';
interface Props {
components: MapComponent[];
}
interface Positions {
bottomleft: ReactElement[],
bottomright: ReactElement[],
topleft: ReactElement[],
topright: ReactElement[],
}
export const MapControls: React.FC<Props> = (props) => {
const {components} = props;
const groups = components.reduce(
(acc : Positions, c) => {
acc[c.position].push(<MapControl component={c} key={c.key} />);
return acc;
},
{
bottomleft: [],
bottomright: [],
topleft: [],
topright: [],
}
);
return (
<div className='leaflet-control-container'>
<div className='leaflet-top leaflet-left' style={{display: 'flex'}}>
{groups.topleft}
</div>
<div className='leaflet-top leaflet-right'>{groups.topright}</div>
<div className='leaflet-bottom leaflet-left'>
{groups.bottomleft}
</div>
<div className='leaflet-bottom leaflet-right'>{groups.bottomright}</div>
</div>
);
};
export default MapControls;