pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve placement of map controls and popovers (fixes #272)

Browse source
This commit is contained in:
Paul Bienkowski 2022-09-12 17:16:35 +02:00
parent fc930fe433
commit c1c3797eb8
4 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/Map/index.tsx
View file

@ -6,6 +6,7 @@ import ReactMapGl, {
WebMercatorViewport, WebMercatorViewport,
ScaleControl, ScaleControl,
NavigationControl, NavigationControl,
AttributionControl,
} from "react-map-gl"; } from "react-map-gl";
import turfBbox from "@turf/bbox"; import turfBbox from "@turf/bbox";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
@ -63,12 +64,14 @@ function Map({
children, children,
boundsFromJson, boundsFromJson,
baseMapStyle, baseMapStyle,
hasToolbar,
...props ...props
}: { }: {
viewportFromUrl?: boolean; viewportFromUrl?: boolean;
children: React.ReactNode; children: React.ReactNode;
boundsFromJson: GeoJSON.Geometry; boundsFromJson: GeoJSON.Geometry;
baseMapStyle: string; baseMapStyle: string;
hasToolbar?: boolean;
}) { }) {
const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT); const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT);
const [viewportUrl, setViewportUrl] = useViewportFromUrl(); const [viewportUrl, setViewportUrl] = useViewportFromUrl();
@ -141,12 +144,14 @@ function Map({
{...viewport} {...viewport}
{...props} {...props}
className={classnames(styles.map, props.className)} className={classnames(styles.map, props.className)}
attributionControl={false}
> >
<NavigationControl style={{ left: 10, top: 10 }} /> <AttributionControl style={{ top: 0, right: 0 }} />
<NavigationControl style={{ left: 16, top: hasToolbar ? 64 : 16 }} />
<ScaleControl <ScaleControl
maxWidth={200} maxWidth={200}
unit="metric" unit="metric"
style={{ left: 10, bottom: 10 }} style={{ left: 16, bottom: 16 }}
/> />
{children} {children}

6
frontend/src/pages/MapPage/index.tsx
View file

@ -211,12 +211,12 @@ function MapPage({ login }) {
</div> </div>
)} )}
<div className={styles.map}> <div className={styles.map}>
<Map viewportFromUrl onClick={onClick}> <Map viewportFromUrl onClick={onClick} hasToolbar>
<Button <Button
style={{ style={{
position: "absolute", position: "absolute",
left: 44, left: 16,
top: 9, top: 16,
}} }}
primary primary
icon="bars" icon="bars"

5
frontend/src/pages/MapPage/styles.module.less
View file

@ -25,10 +25,9 @@
.mapInfoBox { .mapInfoBox {
position: absolute; position: absolute;
right: 0; right: 16px;
top: 0; top: 32px;
max-height: 100%; max-height: 100%;
width: 36rem; width: 36rem;
overflow: auto; overflow: auto;
margin: 20px;
} }

2
frontend/src/pages/TrackPage/TrackPage.module.less
View file

@ -9,7 +9,7 @@
.details.details { .details.details {
position: absolute; position: absolute;
width: 320px; width: 320px;
top: 16px; top: 32px;
right: 16px; right: 16px;
max-height: calc(100% - 32px); max-height: calc(100% - 32px);
} }