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;
position: fixed !important;
top: 6px;
z-index: 1;
}
.back {

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

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

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

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

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

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