Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 00:55:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

map styling

Browse Source
This commit is contained in:
Simon Martens
2025-09-28 12:20:57 +02:00
parent e8855a6c3c
commit baa950d092
4 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
views/assets/scripts.js
View File

@@ -690,7 +690,7 @@ class K extends HTMLElement {
} }
render() { render() {
this.innerHTML = ` this.innerHTML = `
<div class="map-container relative w-full aspect-[5/7] overflow-hidden rounded border border-slate-200 bg-slate-100"> <div class="map-container relative w-full aspect-[5/7] overflow-hidden bg-slate-100">
<div class="transform-wrapper absolute top-0 left-0 w-full h-auto origin-top-left"> <div class="transform-wrapper absolute top-0 left-0 w-full h-auto origin-top-left">
<img src="/assets/Europe_laea_location_map.svg" alt="Map of Europe" class="block w-full h-auto"> <img src="/assets/Europe_laea_location_map.svg" alt="Map of Europe" class="block w-full h-auto">
<div class="points-container absolute top-0 left-0 w-full h-full"></div> <div class="points-container absolute top-0 left-0 w-full h-full"></div>
@@ -713,7 +713,7 @@ class K extends HTMLElement {
if (l.x >= 0 && l.x <= 100 && l.y >= 0 && l.y <= 100) { if (l.x >= 0 && l.x <= 100 && l.y >= 0 && l.y <= 100) {
n.push(l); n.push(l);
const c = document.createElement("div"); const c = document.createElement("div");
c.className = "map-point absolute w-1 h-1 bg-red-200 border border-red-300 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer", c.style.left = `${l.x}%`, c.style.top = `${l.y}%`, c.style.transformOrigin = "center"; c.className = "map-point absolute w-1 h-1 bg-red-200 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:bg-red-400 hover:z-30", c.style.left = `${l.x}%`, c.style.top = `${l.y}%`, c.style.transformOrigin = "center";
const d = `${s.name}${s.toponymName && s.toponymName !== s.name ? ` (${s.toponymName})` : ""}`; const d = `${s.name}${s.toponymName && s.toponymName !== s.name ? ` (${s.toponymName})` : ""}`;
c.dataset.placeId = s.id, c.dataset.tooltipText = d, c.addEventListener("mouseenter", (u) => this.showTooltip(u)), c.addEventListener("mouseleave", () => this.hideTooltip()), c.addEventListener("mousemove", (u) => this.updateTooltipPosition(u)), c.addEventListener("click", (u) => this.scrollToPlace(u)), this.pointsContainer.appendChild(c), this.mapPoints.set(s.id, c); c.dataset.placeId = s.id, c.dataset.tooltipText = d, c.addEventListener("mouseenter", (u) => this.showTooltip(u)), c.addEventListener("mouseleave", () => this.hideTooltip()), c.addEventListener("mousemove", (u) => this.updateTooltipPosition(u)), c.addEventListener("click", (u) => this.scrollToPlace(u)), this.pointsContainer.appendChild(c), this.mapPoints.set(s.id, c);
} }
@@ -764,16 +764,16 @@ class K extends HTMLElement {
}, 50)); }, 50));
} }
setPointActive(e) { setPointActive(e) {
e.className = "map-point absolute w-1.5 h-1.5 bg-red-500 border border-red-700 rounded-full shadow-md -translate-x-1/2 -translate-y-1/2 transition-all duration-300 opacity-100 saturate-100 z-20 cursor-pointer hover:w-2 hover:h-2 hover:z-30"; e.className = "map-point absolute w-1.5 h-1.5 bg-red-500 border border-red-700 rounded-full shadow-md -translate-x-1/2 -translate-y-1/2 transition-all duration-300 opacity-100 saturate-100 z-20 cursor-pointer hover:w-2 hover:h-2 hover:bg-red-600 hover:z-30";
} }
setPointInactive(e) { setPointInactive(e) {
e.className = "map-point absolute w-1 h-1 bg-red-200 border border-red-300 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:z-30"; e.className = "map-point absolute w-1 h-1 bg-red-200 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:bg-red-400 hover:z-30";
} }
showTooltip(e) { showTooltip(e) {
const i = e.target.dataset.tooltipText; const i = e.target.dataset.tooltipText;
this.tooltip && i && (this.tooltipTimeout && clearTimeout(this.tooltipTimeout), this.tooltip.textContent = i, this.updateTooltipPosition(e), this.tooltipTimeout = setTimeout(() => { this.tooltip && i && (this.tooltipTimeout && clearTimeout(this.tooltipTimeout), this.tooltip.textContent = i, this.updateTooltipPosition(e), this.tooltipTimeout = setTimeout(() => {
this.tooltip.classList.remove("opacity-0"), this.tooltip.classList.add("opacity-100"); this.tooltip.classList.remove("opacity-0"), this.tooltip.classList.add("opacity-100");
}, 1e3)); }, 500));
} }
hideTooltip() { hideTooltip() {
this.tooltipTimeout && (clearTimeout(this.tooltipTimeout), this.tooltipTimeout = null), this.tooltip && (this.tooltip.classList.remove("opacity-100"), this.tooltip.classList.add("opacity-0")); this.tooltipTimeout && (clearTimeout(this.tooltipTimeout), this.tooltipTimeout = null), this.tooltip && (this.tooltip.classList.remove("opacity-100"), this.tooltip.classList.add("opacity-0"));
@@ -814,7 +814,7 @@ class K extends HTMLElement {
const o = n.getBoundingClientRect(), r = this.mapElement.getBoundingClientRect(), l = o.left - r.left + o.width / 2, c = o.top - r.top + o.height / 2; const o = n.getBoundingClientRect(), r = this.mapElement.getBoundingClientRect(), l = o.left - r.left + o.width / 2, c = o.top - r.top + o.height / 2;
this.tooltip.style.left = `${l}px`, this.tooltip.style.top = `${c}px`, this.tooltipTimeout = setTimeout(() => { this.tooltip.style.left = `${l}px`, this.tooltip.style.top = `${c}px`, this.tooltipTimeout = setTimeout(() => {
this.tooltip.classList.remove("opacity-0"), this.tooltip.classList.add("opacity-100"); this.tooltip.classList.remove("opacity-0"), this.tooltip.classList.add("opacity-100");
}, 1e3); }, 500);
} }
} else i === "hide" && (this.tooltipTimeout && (clearTimeout(this.tooltipTimeout), this.tooltipTimeout = null), this.tooltip && (this.tooltip.classList.remove("opacity-100"), this.tooltip.classList.add("opacity-0")), n.classList.remove("w-2", "h-2"), n.className.includes("bg-red-500") ? n.classList.add("w-1.5", "h-1.5") : n.classList.add("w-1", "h-1"), n.style.zIndex = ""); } else i === "hide" && (this.tooltipTimeout && (clearTimeout(this.tooltipTimeout), this.tooltipTimeout = null), this.tooltip && (this.tooltip.classList.remove("opacity-100"), this.tooltip.classList.add("opacity-0")), n.classList.remove("w-2", "h-2"), n.className.includes("bg-red-500") ? n.classList.add("w-1.5", "h-1.5") : n.classList.add("w-1", "h-1"), n.style.zIndex = "");
} }

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

7
views/routes/ort/overview/body.gohtml
View File

@@ -84,7 +84,7 @@
{{- /* Sidebar */ -}} {{- /* Sidebar */ -}}
<div class="lg:col-span-2 sticky top-0 self-start"> <div class="lg:col-span-2 sticky top-0 self-start">
{{- /* Top Section - Title, Description, Search */ -}} {{- /* Top Box - Header and Search */ -}}
<div class="bg-slate-50 p-6 border-b border-slate-200 filter-sidebar"> <div class="bg-slate-50 p-6 border-b border-slate-200 filter-sidebar">
<h1 class="text-2xl font-bold text-slate-800 mb-2">Orte</h1> <h1 class="text-2xl font-bold text-slate-800 mb-2">Orte</h1>
<p class="text-slate-600 mb-6"> <p class="text-slate-600 mb-6">
@@ -107,10 +107,9 @@
</div> </div>
</div> </div>
{{- /* Bottom Section - Map */ -}} {{- /* Bottom Box - Map Only */ -}}
<div class="bg-white p-6"> <div class="bg-white rounded-b">
<places-map data-places="{{ .model.PlacesJSON }}" class="w-full"></places-map> <places-map data-places="{{ .model.PlacesJSON }}" class="w-full"></places-map>
</div> </div>
</div> </div>
</div> </div>

18
views/transform/places.js
View File

@@ -396,7 +396,7 @@ export class PlacesMap extends HTMLElement {
render() { render() {
this.innerHTML = ` this.innerHTML = `
<div class="map-container relative w-full aspect-[5/7] overflow-hidden rounded border border-slate-200 bg-slate-100"> <div class="map-container relative w-full aspect-[5/7] overflow-hidden bg-slate-100">
<div class="transform-wrapper absolute top-0 left-0 w-full h-auto origin-top-left"> <div class="transform-wrapper absolute top-0 left-0 w-full h-auto origin-top-left">
<img src="/assets/Europe_laea_location_map.svg" alt="Map of Europe" class="block w-full h-auto"> <img src="/assets/Europe_laea_location_map.svg" alt="Map of Europe" class="block w-full h-auto">
<div class="points-container absolute top-0 left-0 w-full h-full"></div> <div class="points-container absolute top-0 left-0 w-full h-full"></div>
@@ -454,7 +454,7 @@ export class PlacesMap extends HTMLElement {
pointPositions.push(position); pointPositions.push(position);
const point = document.createElement('div'); const point = document.createElement('div');
point.className = 'map-point absolute w-1 h-1 bg-red-200 border border-red-300 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer'; point.className = 'map-point absolute w-1 h-1 bg-red-200 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:bg-red-400 hover:z-30';
point.style.left = `${position.x}%`; point.style.left = `${position.x}%`;
point.style.top = `${position.y}%`; point.style.top = `${position.y}%`;
point.style.transformOrigin = 'center'; point.style.transformOrigin = 'center';
@@ -593,12 +593,12 @@ export class PlacesMap extends HTMLElement {
setPointActive(point) { setPointActive(point) {
// Active state: larger, full color, full opacity, higher z-index // Active state: larger, full color, full opacity, higher z-index
point.className = 'map-point absolute w-1.5 h-1.5 bg-red-500 border border-red-700 rounded-full shadow-md -translate-x-1/2 -translate-y-1/2 transition-all duration-300 opacity-100 saturate-100 z-20 cursor-pointer hover:w-2 hover:h-2 hover:z-30'; point.className = 'map-point absolute w-1.5 h-1.5 bg-red-500 border border-red-700 rounded-full shadow-md -translate-x-1/2 -translate-y-1/2 transition-all duration-300 opacity-100 saturate-100 z-20 cursor-pointer hover:w-2 hover:h-2 hover:bg-red-600 hover:z-30';
} }
setPointInactive(point) { setPointInactive(point) {
// Inactive state: small light red dots, no opacity effects // Inactive state: small light red dots, no border
point.className = 'map-point absolute w-1 h-1 bg-red-200 border border-red-300 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:z-30'; point.className = 'map-point absolute w-1 h-1 bg-red-200 rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2 transition-all duration-300 z-10 cursor-pointer hover:w-1.5 hover:h-1.5 hover:bg-red-400 hover:z-30';
} }
showTooltip(event) { showTooltip(event) {
@@ -615,11 +615,11 @@ export class PlacesMap extends HTMLElement {
this.tooltip.textContent = tooltipText; this.tooltip.textContent = tooltipText;
this.updateTooltipPosition(event); this.updateTooltipPosition(event);
// Show tooltip after 1 second delay // Show tooltip after 0.5 second delay
this.tooltipTimeout = setTimeout(() => { this.tooltipTimeout = setTimeout(() => {
this.tooltip.classList.remove('opacity-0'); this.tooltip.classList.remove('opacity-0');
this.tooltip.classList.add('opacity-100'); this.tooltip.classList.add('opacity-100');
}, 1000); }, 500);
} }
} }
@@ -715,11 +715,11 @@ export class PlacesMap extends HTMLElement {
this.tooltip.style.left = `${x}px`; this.tooltip.style.left = `${x}px`;
this.tooltip.style.top = `${y}px`; this.tooltip.style.top = `${y}px`;
// Show tooltip after 1 second delay // Show tooltip after 0.5 second delay
this.tooltipTimeout = setTimeout(() => { this.tooltipTimeout = setTimeout(() => {
this.tooltip.classList.remove('opacity-0'); this.tooltip.classList.remove('opacity-0');
this.tooltip.classList.add('opacity-100'); this.tooltip.classList.add('opacity-100');
}, 1000); }, 500);
} }
} else if (action === 'hide') { } else if (action === 'hide') {
// Clear any pending tooltip timeout // Clear any pending tooltip timeout