<Finder> now supports UTM and lat lon.

This commit is contained in:
Eric van der Vlist 2023-01-31 21:39:07 +01:00
parent eec319b918
commit bd700d8782
1 changed files with 48 additions and 19 deletions

View File

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