Still implementing <Finder>

src/components/finder/Finder.module.css

@@ -5,3 +5,45 @@
   margin-left: calc(100% - 230px) !important;
   z-index: 1;
 }
+.ol_popup {
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol_popup:after,
+.ol_popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol_popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol_popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol_popup_closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol_popup_closer:after {
+  content: '✖';
+}

src/components/finder/Finder.tsx

@@ -1,5 +1,5 @@
 import { Coordinate } from 'ol/coordinate';
-import { Component, createSignal } from 'solid-js';
+import { Component, createEffect, createSignal } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 
 import SearchIcon from '@suid/icons-material/Search';
@@ -9,7 +9,9 @@ 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';
+import { getMap, getState } from '../map';
+import { Overlay } from 'ol';
+import { fromLonLat } from 'ol/proj';
 
 interface Props {}
 
@@ -40,6 +42,14 @@ const Finder: Component<Props> = (props) => {
 
     if (!!coordinates) {
       setOpen(false);
+      const popup = new Overlay({
+        element: document.getElementById('popup'),
+        positioning: 'center-center',
+        pos: fromLonLat(coordinates),
+      });
+      popup.setPosition(fromLonLat(coordinates));
+      getMap()?.addOverlay(popup);
+
       navigate(
         `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
           getState().rotation
@@ -81,6 +91,10 @@ const Finder: Component<Props> = (props) => {
           <TextField onChange={searchStringChangeHandler} />
         </Box>
       </Dialog>
+      <div id='popup' class={style.ol_popup}>
+        <a href='#' id='popup-closer' class={style.ol_popup_closer}></a>
+        <div id='popup-content'>Popup content</div>
+      </div>
     </>
   );
 };

src/components/map/Map.tsx

@@ -15,7 +15,7 @@ import DragRotate from 'ol/interaction/DragRotate';
 
 import 'ol/ol.css';
 import './Map.css';
-import { Collection } from 'ol';
+import { Collection, Overlay } from 'ol';
 import { Point } from 'ol/geom';
 import { Style, Icon } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
@@ -297,6 +297,7 @@ const Map: Component = () => {
       <Account />
       <AllGpxes map={getMap} />
       <Infos />
+      
     </div>
   );
 };