antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

navigate items with browser

Browse Source
This commit is contained in:
Anton 2023-09-14 13:47:07 +02:00
parent 60427cb3d7
commit 8c23b3fcba
3 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -14,7 +14,7 @@
"prop-types": "^15.8.1",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"react-router-dom": "^6.11.2",
"react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1",
"react-toastify": "^9.1.3",
"tributejs": "^5.1.3",
@ -245,11 +245,11 @@
}
},
"node_modules/@remix-run/router": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
"integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==",
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
"integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
"engines": {
"node": ">=14"
"node": ">=14.0.0"
}
},
"node_modules/@trysound/sax": {
@ -3809,29 +3809,29 @@
}
},
"node_modules/react-router": {
"version": "6.11.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
"integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==",
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
"integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
"dependencies": {
"@remix-run/router": "1.6.2"
"@remix-run/router": "1.9.0"
},
"engines": {
"node": ">=14"
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.11.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz",
"integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==",
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
"integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
"dependencies": {
"@remix-run/router": "1.6.2",
"react-router": "6.11.2"
"@remix-run/router": "1.9.0",
"react-router": "6.16.0"
},
"engines": {
"node": ">=14"
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",

2
package.json
View File

@ -47,7 +47,7 @@
"prop-types": "^15.8.1",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"react-router-dom": "^6.11.2",
"react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1",
"react-toastify": "^9.1.3",
"tributejs": "^5.1.3",

50
src/Components/Map/Layer.tsx
View File

@ -10,7 +10,7 @@ import { useFilterTags, useSearchPhrase } from './hooks/useFilter'
import { useGetItemTags } from './hooks/useTags'
import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
import { Popup } from 'leaflet'
import { useLocation } from 'react-router-dom';
export const Layer = (props: LayerProps) => {
@ -26,6 +26,8 @@ export const Layer = (props: LayerProps) => {
const addPopup = useAddPopup();
const leafletRefs = useLeafletRefs();
let location = useLocation();
const searchPhrase = useSearchPhrase();
const map = useMap();
@ -37,33 +39,47 @@ export const Layer = (props: LayerProps) => {
props.api && setItemsApi(props);
}, [props.data, props.api])
const openPopup = () => {
if (window.location.pathname.split("/")[1] == props.name) {
const id = window.location.pathname.split("/")[2]
const marker = leafletRefs[id]?.marker;
if (marker && marker != null) {
marker !== null && props.clusterRef?.current?.zoomToShowLayer(marker, () => {
marker.openPopup();
});
}
}
}
useMapEvents({
popupopen: (e) => {
const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item;
if(item?.layer?.name == props.name ) {
window.history.pushState({},"",`/${props.name}/${item.id}`)
document.title = document.title.split("-")[0] + " - " + item.name;
if (item?.layer?.name == props.name) {
window.history.pushState({}, "", `/${props.name}/${item.id}`)
document.title = document.title.split("-")[0] + " - " + item.name;
document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text);
}
},
})
const openPopup = () => {
console.log(window.location);
if (window.location.pathname.split("/").length <= 2) {
console.log("close");
map.closePopup();
}
else {
if (window.location.pathname.split("/")[1] == props.name) {
if (window.location.pathname.split("/")[2]) {
const id = window.location.pathname.split("/")[2]
const marker = leafletRefs[id]?.marker;
if (marker && marker != null) {
marker !== null && props.clusterRef?.current?.zoomToShowLayer(marker, () => {
marker.openPopup();
});
}
}
}
}
}
useEffect(() => {
openPopup();
}, [leafletRefs])
}, [leafletRefs, location])
return (