(Re)Implementing the map chooser.
This commit is contained in:
vdv committed
1 parent
f10fa11348
commit
42d66ecfa5
11 files changed
+180
-113
No files matched your search
@@ -1,6 +1,5 @@
|
||||
.common {
|
||||
--opacity: 0.6;
|
||||
--ion-background-color: white;
|
||||
opacity: 1;
|
||||
position: fixed !important;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.getLocation {
|
||||
--opacity: 0.6;
|
||||
--ion-background-color: white;
|
||||
opacity: 1;
|
||||
margin-left: calc(50% - 20px) !important;
|
||||
position: fixed !important;
|
||||
z-index: 1;
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
.container {
|
||||
position: fixed !important;
|
||||
top: 6px;
|
||||
margin-left: calc(100% - 80px) !important;
|
||||
margin-left: calc(100% - 100px) !important;
|
||||
z-index: 1;
|
||||
}
|
||||
.label {
|
||||
--opacity: 0.6;
|
||||
--ion-background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.inputFile {
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { Circle, Fill, Text, Icon, Stroke, Style } from 'ol/style';
|
||||
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
|
||||
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
|
||||
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
|
||||
import wptIcon from '../../icons/location-pin-svgrepo-com-red.svg';
|
||||
import { Feature } from 'ol';
|
||||
|
||||
const trackStrokeStyle = new Stroke({
|
||||
color: 'blue',
|
||||
width: 2,
|
||||
width: 3,
|
||||
|
||||
});
|
||||
|
||||
const trtksegStartImageStyle = new Icon({
|
||||
@@ -26,7 +27,7 @@ const trtksegFinishImageStyle = new Icon({
|
||||
const wptImageStyle = new Icon({
|
||||
src: wptIcon,
|
||||
scale: 0.1,
|
||||
opacity: 0.8,
|
||||
opacity: 0.9,
|
||||
anchor: [0.5, 1],
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
.control {
|
||||
opacity: 1;
|
||||
position: fixed !important;
|
||||
top: 0px;
|
||||
margin-left: calc(100% - 70px) !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
background-color: rgba(14, 116, 144, 0.7);
|
||||
color: white;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
@@ -1,6 +1,19 @@
|
||||
import OSM from 'ol/source/OSM';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import { Component } from 'solid-js';
|
||||
import { Component, createSignal, For } from 'solid-js';
|
||||
|
||||
import style from './MapTileProvider.module.css';
|
||||
import LayersIcon from '@suid/icons-material/Layers';
|
||||
import CloseIcon from '@suid/icons-material/Close';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
} from '@suid/material';
|
||||
import { useNavigate, useParams } from '@solidjs/router';
|
||||
|
||||
interface TileProvider {
|
||||
name: string;
|
||||
@@ -58,7 +71,58 @@ export const mapTileProviders: TileProviders = {
|
||||
};
|
||||
|
||||
const MapTilesProvider: Component<{}> = (props) => {
|
||||
return <div></div>;
|
||||
const [open, setOpen] = createSignal(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const params = useParams();
|
||||
|
||||
const handleChange = (ev: any) => {
|
||||
navigate(
|
||||
`/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}`
|
||||
);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={style.control}>
|
||||
<IconButton onClick={handleClickOpen}>
|
||||
<LayersIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Dialog onClose={handleClose} open={open()} class={style.dialog}>
|
||||
<DialogTitle class={style.title}>
|
||||
<div class={style['title-text']}>Choose your map</div>
|
||||
<IconButton onClick={handleClose} class={style.close}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<RadioGroup
|
||||
defaultValue={params.provider}
|
||||
class={style.body}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<For each={Object.keys(mapTileProviders)}>
|
||||
{(p: string) => (
|
||||
<FormControlLabel
|
||||
value={p}
|
||||
control={<Radio />}
|
||||
label={mapTileProviders[p].name}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</RadioGroup>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapTilesProvider;
|
||||
+23
-49
@@ -23,7 +23,7 @@ import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
|
||||
import { Back, Forward } from '../back-forward';
|
||||
import GpxImport from '../gpx-import';
|
||||
import AllGpxes from '../all-gpxes';
|
||||
import { mapTileProviders } from '../map-tile-provider';
|
||||
import MapTileProvider, { mapTileProviders } from '../map-tile-provider';
|
||||
|
||||
const [getState, setState] = createSignal({
|
||||
lon: 0,
|
||||
@@ -44,14 +44,10 @@ const Map: Component = () => {
|
||||
|
||||
createEffect(() => {
|
||||
console.log({
|
||||
caller: 'Map',
|
||||
params: JSON.stringify({
|
||||
provider: params.provider,
|
||||
lon: params.lon,
|
||||
lat: params.lat,
|
||||
rotation: params.rotation,
|
||||
zoom: params.zoom,
|
||||
}),
|
||||
caller: 'Map / setState',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
});
|
||||
setState({
|
||||
provider: params.provider,
|
||||
@@ -61,6 +57,14 @@ const Map: Component = () => {
|
||||
zoom: +params.zoom,
|
||||
});
|
||||
const map = getMap();
|
||||
|
||||
const layers = map?.getLayers();
|
||||
const tileLayer = layers?.item(0) as TileLayer<any> | undefined;
|
||||
if (tileLayer?.get('provider') !== params.provider) {
|
||||
tileLayer?.set('provider', params.provider, true);
|
||||
tileLayer?.setSource(mapTileProviders[params.provider].source);
|
||||
}
|
||||
|
||||
const view = map?.getView();
|
||||
view?.animate({
|
||||
center: [getState().lon, getState().lat],
|
||||
@@ -128,61 +132,30 @@ const Map: Component = () => {
|
||||
console.log({
|
||||
caller: 'Map / changeListener',
|
||||
event,
|
||||
params,
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
map,
|
||||
});
|
||||
};
|
||||
|
||||
const tileLayer = new TileLayer({
|
||||
source: mapTileProviders[params.provider].source,
|
||||
});
|
||||
tileLayer.set('provider', params.provider, true);
|
||||
|
||||
const olMap = new OlMap({
|
||||
view: new View({
|
||||
center: [+getState().lon, +getState().lat],
|
||||
zoom: +getState().zoom,
|
||||
rotation: +getState().rotation,
|
||||
}),
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: mapTileProviders[params.provider].source,
|
||||
}),
|
||||
new VectorLayer({ source: new VectorSource() }),
|
||||
],
|
||||
layers: [tileLayer, new VectorLayer({ source: new VectorSource() })],
|
||||
target: target,
|
||||
controls: new Collection<Control>([
|
||||
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>
|
||||
// ),
|
||||
// }),
|
||||
]),
|
||||
});
|
||||
olMap.on(['moveend'], changeListener);
|
||||
@@ -197,6 +170,7 @@ const Map: Component = () => {
|
||||
<Forward />
|
||||
<Back />
|
||||
<GpxImport />
|
||||
<MapTileProvider />
|
||||
<AllGpxes map={getMap} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="297" height="297" >
|
||||
<g color='red' fill='red' >
|
||||
<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
|
||||
c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
|
||||
C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
|
||||
c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
|
||||
<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
|
||||
c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
|
||||
c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
|
||||
C179.265,127.948,165.464,141.901,148.5,141.901z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1014 B |
Reference in new issue
Block a user