diff --git a/src/components/finder/Finder.module.css b/src/components/finder/Finder.module.css index b2ea16d..5f3ebc6 100644 --- a/src/components/finder/Finder.module.css +++ b/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: '✖'; +} diff --git a/src/components/finder/Finder.tsx b/src/components/finder/Finder.tsx index 2f6cfed..5f76ecc 100644 --- a/src/components/finder/Finder.tsx +++ b/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) => { 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) => { + ); }; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 995fdae..a3711b8 100644 --- a/src/components/map/Map.tsx +++ b/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 = () => { + ); };