(Re)Implementing the map chooser.

src/components/back-forward/BackForward.module.css

@@ -1,6 +1,5 @@
 .common {
-  --opacity: 0.6;
-  --ion-background-color: white;
+  opacity: 1;
   position: fixed !important;
   top: 6px;
   z-index: 1;

src/components/get-location/GetLocation.module.css

@@ -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;

src/components/gpx-import/GpxImport.module.css

@@ -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 {

src/components/gpx/styles.ts

@@ -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],
 });
 

src/components/map-tile-provider/MapTileProvider.module.css

@@ -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);
+}

src/components/map-tile-provider/MapTileProvider.tsx

@@ -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;

src/components/map/Map.tsx

@@ -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>
   );