(Re)Implementing the map chooser.

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;