Starting to implement a <Finder> component.

src/components/finder/Finder.module.css

@@ -0,0 +1,7 @@
+.control {
+  opacity: 1;
+  position: fixed !important;
+  top: 0px;
+  margin-left: calc(100% - 230px) !important;
+  z-index: 1;
+}

src/components/finder/Finder.tsx

@@ -0,0 +1,88 @@
+import { Coordinate } from 'ol/coordinate';
+import { Component, createSignal } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+
+import SearchIcon from '@suid/icons-material/Search';
+import { useI18n } from '@solid-primitives/i18n';
+import proj4 from 'proj4';
+
+import style from './Finder.module.css';
+import { Box, IconButton, TextField } from '@suid/material';
+import Dialog from '../dialog';
+import { getState } from '../map';
+
+interface Props {}
+
+const Finder: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false);
+  const [searchString, setSearchString] = createSignal('');
+  const navigate = useNavigate();
+  const [t, { add, locale, dict }] = useI18n();
+
+  const searchStringChangeHandler = (event: any) => {
+    setSearchString(event.target.value);
+  };
+
+  const submitHandler = () => {
+    let coordinates: Coordinate | undefined = undefined;
+    const utmRegExp = /([0-6]?[0-9])\s*([C-X])\s*([0-9]+)\s*([0-9]+)/;
+    const utmMatch = searchString().match(utmRegExp);
+    if (!!utmMatch) {
+      const utm = `+proj=utm +zone=${utmMatch[1]}`;
+      coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
+    }
+    console.log({
+      caller: 'Finder / submitHandler',
+      searchString: searchString(),
+      isUtm: utmMatch,
+      coordinates,
+    });
+
+    if (!!coordinates) {
+      setOpen(false);
+      navigate(
+        `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
+          getState().rotation
+        }`
+      );
+    }
+  };
+
+  return (
+    <>
+      <div class={style.control}>
+        <IconButton
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          <SearchIcon />
+        </IconButton>
+      </div>
+      <Dialog
+        closeHandler={() => {
+          setOpen(false);
+        }}
+        open={open()}
+        title={t('search')}
+      >
+        <Box
+          component='form'
+          sx={{
+            width: '100%',
+            '& .MuiTextField-root': { m: 1, width: '100%' },
+            paddingTop: '5px',
+          }}
+          noValidate
+          autoComplete='off'
+          onSubmit={submitHandler}
+          method='dialog'
+        >
+          <TextField onChange={searchStringChangeHandler} />
+        </Box>
+      </Dialog>
+    </>
+  );
+};
+
+export default Finder;

src/components/finder/index.ts

@@ -0,0 +1 @@
+export { default } from './Finder';

src/components/map/Map.tsx

@@ -42,6 +42,7 @@ import { debounce } from 'lodash';
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
 import Account from '../account';
 import { Overlays } from '../overlays/Overlays';
+import Finder from '../finder';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -285,6 +286,7 @@ const Map: Component = () => {
     // @ts-ignore
     <div class='ol-map' ref={target}>
       <Overlays map={getMap} />
+      <Finder />
       <GetLocation />
       <Forward />
       <Back />

src/i18n/en.ts

@@ -73,6 +73,8 @@ const dict = {
   no: 'no',
 
   deleteTrack: 'Delete this track',
+
+  search: 'Search',
 };
 
 export default dict;

src/i18n/fr.ts

@@ -79,6 +79,8 @@ const dict = {
   no: 'non',
 
   deleteTrack: 'Supprimer cette trace',
+
+  search: 'Chercher',
 };
 
 export default dict;