mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import * as React from 'react'
|
|
import * as L from 'leaflet'
|
|
import { useMap, useMapEvents } 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<any>(null);
|
|
const [active, setActive] = useState<boolean>(false);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
|
|
useEffect(() => {
|
|
if (!init.current) {
|
|
//@ts-ignore
|
|
setLc(L.control.locate().addTo(map));
|
|
init.current = true;
|
|
}
|
|
}, [])
|
|
|
|
useMapEvents({
|
|
locationfound: () => {
|
|
setLoading(false);
|
|
setActive(true);
|
|
},
|
|
})
|
|
|
|
return (<>
|
|
<div className="tw-card tw-h-12 tw-w-12 tw-bg-base-100 tw-shadow-xl tw-items-center tw-justify-center hover:tw-bg-slate-300 hover:tw-cursor-pointer tw-transition-all tw-duration-300 tw-ml-2">
|
|
|
|
<div className="tw-card-body tw-card tw-p-2 tw-h-10 tw-w-10 " onClick={() => {
|
|
if (active) {
|
|
lc.stop();
|
|
setActive(false);
|
|
}
|
|
else {
|
|
lc.start();
|
|
setLoading(true);
|
|
}
|
|
|
|
}}>{loading ? <span className="tw-loading tw-loading-spinner tw-loading-md tw-mt-1"></span> :
|
|
<svg fill={`${active? "#fc8702" : "currentColor"}`} viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" className='tw-mt-1 tw-p-[1px]'>
|
|
<path d="M30 14.75h-2.824c-0.608-5.219-4.707-9.318-9.874-9.921l-0.053-0.005v-2.824c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.824c-5.219 0.608-9.318 4.707-9.921 9.874l-0.005 0.053h-2.824c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.824c0.608 5.219 4.707 9.318 9.874 9.921l0.053 0.005v2.824c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.824c5.219-0.608 9.318-4.707 9.921-9.874l0.005-0.053h2.824c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0zM17.25 24.624v-2.624c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.624c-3.821-0.57-6.803-3.553-7.368-7.326l-0.006-0.048h2.624c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0h-2.624c0.57-3.821 3.553-6.804 7.326-7.368l0.048-0.006v2.624c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.624c3.821 0.57 6.803 3.553 7.368 7.326l0.006 0.048h-2.624c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.624c-0.571 3.821-3.553 6.803-7.326 7.368l-0.048 0.006z"></path>
|
|
</svg>}
|
|
|
|
</div>
|
|
</div></>)
|
|
|
|
}
|
|
|
|
|