<Finder> now supports UTM and lat lon.

src/components/finder/Finder.tsx

@@ -18,35 +18,55 @@ interface Props {}
 const Finder: Component<Props> = (props) => {
   const [open, setOpen] = createSignal(false);
   const [searchString, setSearchString] = createSignal('');
+  const [popupContent, setPopupContent] = createSignal(<></>);
   const navigate = useNavigate();
   const [t, { add, locale, dict }] = useI18n();
-
+  let popup: Overlay | undefined;
   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 latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
-    const utmMatch = searchString().match(utmRegExp);
+    const latLonMatch = searchString().match(latLonRegExp);
-    if (!!utmMatch) {
+
-      const utm = `+proj=utm +zone=${utmMatch[1]}`;
+    if (!!latLonMatch) {
-      coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
+      coordinates = [+latLonMatch[2], +latLonMatch[1]];
+      setPopupContent(<>{latLonMatch[0]}</>);
+      console.log({
+        caller: 'Finder / submitHandler',
+        searchString: searchString(),
+        latLonMatch,
+        coordinates,
+      });
+    } else {
+      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]]);
+        setPopupContent(
+          <>{`${coordinates[0]}, ${coordinates[1]} (${utmMatch[0]})`}</>
+        );
+      }
+      console.log({
+        caller: 'Finder / submitHandler',
+        searchString: searchString(),
+        utmMatch,
+        coordinates,
+      });
     }
-    console.log({
-      caller: 'Finder / submitHandler',
-      searchString: searchString(),
-      isUtm: utmMatch,
-      coordinates,
-    });
 
     if (!!coordinates) {
       setOpen(false);
-      const popup = new Overlay({
+      if (popup === undefined) {
-        element: document.getElementById('popup'),
+        popup = new Overlay({
-        positioning: 'center-center',
+          element: document.getElementById('popup'),
-        pos: fromLonLat(coordinates),
+          positioning: 'center-center',
-      });
+        });
+      }
+      popup.setMap(getMap());
       popup.setPosition(fromLonLat(coordinates));
       getMap()?.addOverlay(popup);
 
@@ -58,6 +78,10 @@ const Finder: Component<Props> = (props) => {
     }
   };
 
+  const popupCloseHandler = () => {
+    popup.setMap(null);
+  };
+
   return (
     <>
       <div class={style.control}>
@@ -92,8 +116,13 @@ const Finder: Component<Props> = (props) => {
         </Box>
       </Dialog>
       <div id='popup' class={style.ol_popup}>
-        <a href='#' id='popup-closer' class={style.ol_popup_closer}></a>
+        <a
-        <div id='popup-content'>Popup content</div>
+          href='#'
+          id='popup-closer'
+          onclick={popupCloseHandler}
+          class={style.ol_popup_closer}
+        ></a>
+        <div id='popup-content'>{popupContent()}</div>
       </div>
     </>
   );