import { Coordinate } from 'ol/coordinate'; import { Component, createEffect, 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 { getMap, getState } from '../map'; import { Overlay } from 'ol'; import { fromLonLat } from 'ol/proj'; interface Props {} const Finder: Component = (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 latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/; const latLonMatch = searchString().match(latLonRegExp); if (!!latLonMatch) { 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, }); } if (!!coordinates) { setOpen(false); if (popup === undefined) { popup = new Overlay({ element: document.getElementById('popup'), positioning: 'center-center', }); } popup.setMap(getMap()); popup.setPosition(fromLonLat(coordinates)); getMap()?.addOverlay(popup); navigate( `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${ getState().rotation }` ); } }; const popupCloseHandler = () => { popup.setMap(null); }; return ( <>
{ setOpen(true); }} >
{ setOpen(false); }} open={open()} title={t('search')} > ); }; export default Finder;