diff --git a/src/three/Space.tsx b/src/three/Space.tsx index 7a3e8b8..18bf4bb 100644 --- a/src/three/Space.tsx +++ b/src/three/Space.tsx @@ -22,6 +22,8 @@ function Building({ const [hovered, setHovered] = useState(false); const [clicked, setClicked] = useState(false); const [hoverPos, setHoverPos] = useState(null); + const [showTranslations, setShowTranslations] = useState(false); + const [showAdditionalInfo, setShowAdditionalInfo] = useState(false); return ( { @@ -43,32 +45,265 @@ function Building({ rotation={[-Math.PI / 2, 0, 0]} > - + {(hovered || clicked) && hoverPos && ( - +
-
{JSON.stringify(tags)}
+
+ {tags.name || "Building Information"} +
+ {["building", "height", "building:levels", "amenity", "denomination"].map( + (key) => + tags[key] && + (key !== "building" || tags[key] !== "yes") && ( +
+ + {key === "building" + ? "Type" + : key === "height" + ? "Height" + : key === "building:levels" + ? "Levels" + : key === "amenity" + ? "Facility" + : key === "denomination" + ? "Denomination" + : key.replace(/_/g, " ")} + : + + + {key === "height" ? `${tags[key]} m` : tags[key]} + +
+ ) + )} + {[ + "addr:street", + "addr:housenumber", + "addr:district", + "addr:city", + "addr:postcode", + ].some((key) => tags[key]) && ( +
+
+ Address +
+
+ {[ + [tags["addr:street"], tags["addr:housenumber"]].filter(Boolean).join(" "), + tags["addr:district"], + tags["addr:city"], + tags["addr:postcode"], + ] + .filter(Boolean) + .join(", ")} +
+
+ )} + {Object.entries(tags).filter( + ([key]) => + ![ + "building", + "name", + "height", + "building:levels", + "source", + "amenity", + "denomination", + ].includes(key) && + !key.startsWith("addr:") && + !key.startsWith("name:") && + !key.startsWith("alt_name:") + ).length > 0 && ( +
+
setShowAdditionalInfo(!showAdditionalInfo)} + > + Additional Information + {showAdditionalInfo ? "▲" : "▼"} +
+ {showAdditionalInfo && ( +
+ {Object.entries(tags) + .filter( + ([key]) => + ![ + "building", + "name", + "height", + "building:levels", + "source", + "amenity", + "denomination", + ].includes(key) && + !key.startsWith("addr:") && + !key.startsWith("name:") && + !key.startsWith("alt_name:") + ) + .map(([key, value]) => { + if ( + key === "description" || + (typeof value === "string" && value.length > 80) + ) { + return ( +
+
+ {key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ")} +
+
+ {String(value)} +
+
+ ); + } + return ( +
+ + {key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ")}: + + + {String(value)} + +
+ ); + })} +
+ )} +
+ )} + {Object.entries(tags).filter(([key]) => key.startsWith("name:")).length > 0 && ( +
+
setShowTranslations(!showTranslations)} + > + Name Translations + {showTranslations ? "▲" : "▼"} +
+ {showTranslations && ( +
+ {Object.entries(tags) + .filter(([key]) => key.startsWith("name:")) + .map(([key, value]) => ( +
+ + {key.replace("name:", "").toUpperCase()}: + + {String(value)} +
+ ))} +
+ )} +
+ )}
)} @@ -116,9 +351,7 @@ function Roads({ area }: { area: any }) { return new THREE.Vector3(v.x, 0.1, -v.y); }); - const lineGeometry: any = new THREE.BufferGeometry().setFromPoints( - points - ); + const lineGeometry: any = new THREE.BufferGeometry().setFromPoints(points); return ; })} @@ -160,8 +393,7 @@ export function Export() { const exportGLB = () => { const sceneClone = scene.clone(true); sceneClone.traverse((child) => { - if (child.userData && child.userData.skipExport === true) - child.parent?.remove(child); + if (child.userData && child.userData.skipExport === true) child.parent?.remove(child); if ((child as any).isHtml === true) child.parent?.remove(child); }); const exporter = new GLTFExporter(); @@ -219,9 +451,7 @@ export function Space() { }> = []; areas.forEach((bld: any) => { if (!bld.geometry || bld.geometry.length < 3) return; - const shapePoints = bld.geometry.map((pt: any) => - project(pt.lat, pt.lng) - ); + const shapePoints = bld.geometry.map((pt: any) => project(pt.lat, pt.lng)); if (!shapePoints[0].equals(shapePoints[shapePoints.length - 1])) shapePoints.push(shapePoints[0]); const shape = new THREE.Shape(shapePoints); @@ -248,13 +478,7 @@ export function Space() { return ( - + {buildingsData.map((item, index) => ( - + );