diff --git a/package-lock.json b/package-lock.json index 728369ae..70f00bab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@types/offscreencanvas": "^2019.7.1", "axios": "^1.6.5", "leaflet": "^1.9.4", + "leaflet.locatecontrol": "^0.79.0", "prop-types": "^15.8.1", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", @@ -2904,6 +2905,11 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, + "node_modules/leaflet.locatecontrol": { + "version": "0.79.0", + "resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.79.0.tgz", + "integrity": "sha512-h64QIHFkypYdr90lkSfjKvPvvk8/b8UnP3m9WuoWdp5p2AaCWC0T1NVwyuj4rd5U4fBW3tQt4ppmZ2LceHMIDg==" + }, "node_modules/leaflet.markercluster": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", diff --git a/package.json b/package.json index b53c926b..aefc99c3 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@types/offscreencanvas": "^2019.7.1", "axios": "^1.6.5", "leaflet": "^1.9.4", + "leaflet.locatecontrol": "^0.79.0", "prop-types": "^15.8.1", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx new file mode 100644 index 00000000..be537ff8 --- /dev/null +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -0,0 +1,53 @@ +import * as React from 'react' +import * as L from 'leaflet' +import { useMap } from 'react-leaflet' +import 'leaflet.locatecontrol' + +import 'leaflet.locatecontrol/dist/L.Control.Locate.css' +import { useEffect, useRef, useState } from 'react' + +// Converts leaflet.locatecontrol to a React Component +export const LocateControl = () => { + + const map = useMap(); + + // prevent react18 from calling useEffect twice + const init = useRef(false) + + + const [lc, setLc] = useState(null); + const [active, setActive] = useState(false); + const [loading, setLoading] = useState(false); + + + useEffect(() => { + if (!init.current) { + //@ts-ignore + setLc(L.control.locate().addTo(map)); + init.current = true; + } + }, []) + + return (<> +
+ +
{ + if (active) { + lc.stop(); + setActive(false); + } + else { + lc.start(); + setActive(true); + } + + }}> + + + +
+
) + +} + + diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index b1bb2d83..fc2a56ba 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -10,6 +10,7 @@ import { useTags } from '../../hooks/useTags'; import { useItems } from '../../hooks/useItems'; import { useLeafletRefs } from '../../hooks/useLeafletRefs'; import { getValue } from '../../../../Utils/GetValue'; +import { LocateControl } from './LocateControl'; @@ -58,16 +59,19 @@ export const SearchControl = ({ clusterRef }) => { return (<> {!(windowDimensions.height < 500) &&
- setValue(e.target.value)} - onFocus={() => setHideSuggestions(false)} - onBlur={async () => { - setTimeout(() => { - setHideSuggestions(true); - }, 200); - }} /> - {value.length > 0 && } +
+ setValue(e.target.value)} + onFocus={() => setHideSuggestions(false)} + onBlur={async () => { + setTimeout(() => { + setHideSuggestions(true); + }, 200); + }} /> + +
+ {value.length > 0 && } {hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 || value.length == 0 ? "" :
{tagsResults.length > 0 && @@ -110,7 +114,7 @@ export const SearchControl = ({ clusterRef }) => { {Array.from(geoResults).length > 0 && (itemsResults.length > 0 || tagsResults.length > 0) &&
} {Array.from(geoResults).map((geo) => (
- + diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css index e071945e..50477fd9 100644 --- a/src/Components/Map/UtopiaMap.css +++ b/src/Components/Map/UtopiaMap.css @@ -20,6 +20,10 @@ display: none; } + .leaflet-control-locate { + display: none; + } + .leaflet-data-marker { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat; diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 4e28abb5..8b714538 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -20,6 +20,7 @@ import { QuestControl } from "./Subcomponents/Controls/QuestControl"; import { Control } from "./Subcomponents/Controls/Control"; import { Outlet } from "react-router-dom"; import { TagsControl } from "./Subcomponents/Controls/TagsControl"; +import { LocateControl } from "./Subcomponents/Controls/LocateControl"; export interface MapEventListenerProps { @@ -40,6 +41,7 @@ function UtopiaMap({ children } : UtopiaMapProps) { + let meta = document.getElementsByTagName('meta') const [metaTags, setMetaTags] = useState>(meta);