Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Moving controls out of the ol map object.

This commit is contained in:
Eric van der Vlist 2022-11-27 12:12:22 +01:00
parent 83e14932a4
commit 7f571882de
4 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/back-forward/BackForward.module.css
View File

@ -3,6 +3,7 @@
--ion-background-color: white; --ion-background-color: white;
position: fixed !important; position: fixed !important;
top: 6px; top: 6px;
z-index: 1;
} }
.back { .back {

1
src/components/get-location/GetLocation.module.css
View File

@ -3,5 +3,6 @@
--ion-background-color: white; --ion-background-color: white;
margin-left: calc(50% - 20px) !important; margin-left: calc(50% - 20px) !important;
position: fixed !important; position: fixed !important;
z-index: 1;
bottom: 6px; bottom: 6px;
} }

1
src/components/gpx-import/GpxImport.module.css
View File

@ -2,6 +2,7 @@
position: fixed !important; position: fixed !important;
top: 6px; top: 6px;
margin-left: calc(100% - 80px) !important; margin-left: calc(100% - 80px) !important;
z-index: 1;
} }
.label { .label {
--opacity: 0.6; --opacity: 0.6;

75
src/components/map/Map.tsx
View File

@ -137,39 +137,39 @@ const Map: Component = () => {
new Attribution({ collapsible: true }), new Attribution({ collapsible: true }),
new Rotate(), new Rotate(),
new ScaleLine({ bar: true }), new ScaleLine({ bar: true }),
// @ts-ignore // // @ts-ignore
new Control({ // new Control({
// @ts-ignore // // @ts-ignore
element: ( // element: (
<div> // <div>
<GetLocation /> // <GetLocation />
</div> // </div>
), // ),
}), // }),
new Control({ // new Control({
// @ts-ignore // // @ts-ignore
element: ( // element: (
<div> // <div>
<Back /> // <Back />
</div> // </div>
), // ),
}), // }),
new Control({ // new Control({
// @ts-ignore // // @ts-ignore
element: ( // element: (
<div> // <div>
<Forward /> // <Forward />
</div> // </div>
), // ),
}), // }),
new Control({ // new Control({
// @ts-ignore // // @ts-ignore
element: ( // element: (
<div> // <div>
<GpxImport /> // <GpxImport />
</div> // </div>
), // ),
}), // }),
]), ]),
}); });
olMap.on(['moveend'], changeListener); olMap.on(['moveend'], changeListener);
@ -178,7 +178,14 @@ const Map: Component = () => {
}); });
// @ts-ignore // @ts-ignore
return <div class='ol-map' ref={target} />; return (
<div class='ol-map' ref={target}>
<GetLocation />
<Forward />
<Back />
<GpxImport />
</div>
);
}; };
export default Map; export default Map;