From 8feaa6bd1590b97fdccfd3da7a0418c6fd619934 Mon Sep 17 00:00:00 2001 From: Conrad Schulz Date: Wed, 1 Jul 2026 13:55:52 +0000 Subject: [PATCH] fix: pin tip at iconAnchor position (h/2, not h-1) mapbox-lib.js: iconAnchor = [w/2, h/2] (image center) Previous: tipY=h-1 -> anchor at y=35, tip at y=69 -> pin floated above click Fix: tipY=h/2 -> anchor and tip coincide exactly Reduce r=w*0.33 to keep slim shape (r/d=0.41 -> 24deg opening) Bottom canvas half is transparent --- docs/ADMIN.md | 1 + .../prompts/2026-07-01_marker-api_session.md | 14 ++++++++++++++ docs/history/summary/PROJECT_CONTEXT.md | 2 +- services/marker-api/main.go | 19 ++++++++++--------- 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/docs/ADMIN.md b/docs/ADMIN.md index 72ad46a..cb89e21 100644 --- a/docs/ADMIN.md +++ b/docs/ADMIN.md @@ -238,6 +238,7 @@ docker compose logs -f tileserver # Raster-Rendering - API Root: `http://localhost:9984` - Endpunkt: `/styles/v4/marker/{type}+{hexcolor}(@{scale}x).png` - Typen: `pin-s` (20×50px), `pin-m` (30×70px), `pin-l` (35×90px) @1x – exakte Kartographer-Maße (mapbox-lib.js `sizes`); weißer Rand + Innenpunkt, 85% opak +- Ankerpunkt: Nadelspitze liegt bei Pixel (w/2, h/2) = `iconAnchor` in mapbox-lib.js → geografische Koordinate zeigt exakt auf Spitze - Image neu bauen: `docker compose build marker-api && docker compose up -d marker-api` - CI: Forgejo baut + pusht automatisch bei Änderungen in `services/marker-api/` diff --git a/docs/history/prompts/2026-07-01_marker-api_session.md b/docs/history/prompts/2026-07-01_marker-api_session.md index 729c621..516db3c 100644 --- a/docs/history/prompts/2026-07-01_marker-api_session.md +++ b/docs/history/prompts/2026-07-01_marker-api_session.md @@ -113,6 +113,20 @@ Geometry-Fix: r=35.5% der Breite, tipY=97.5%, Spitze passt jetzt sauber in die C ### Prompt 13 «Das sieht aber immer noch komisch aus...» +### Prompt 16 +«Besser aber nicht perfekt. und gibt es eine möglichkeit das der angewählte punkt auch die spitze der nadel ist? gerade fühlt es sich so an als wäre die mitte des markers der fixierte punkt...» + +### Antwort 16 +mapbox-lib.js setzt `iconAnchor = [w/2, h/2]` = Bildmitte, nicht Spitze. + +Fix: Spitze bei `tipY = h/2` gezeichnet, untere Canvas-Hälfte bleibt transparent. +Damit fällt `iconAnchor=[15,35]` exakt auf die Nadelspitze. + +Geometrie: r = w*0.33 (schlanker Kreis), cy = r+1, tipY = h/2 +→ r/d = 10/24 ≈ 0.41 → 24° Öffnungswinkel (Google-Maps-ähnlich) + +Verifiziert: pin-m@2x = 60×140px, Spitze bei y=70 = Ankerpunkt. + ### Prompt 15 «Ich habe immer zwischen den tests den gesamten browser cache geleert das kann es nicht sein!» diff --git a/docs/history/summary/PROJECT_CONTEXT.md b/docs/history/summary/PROJECT_CONTEXT.md index 009c666..f3b6fac 100644 --- a/docs/history/summary/PROJECT_CONTEXT.md +++ b/docs/history/summary/PROJECT_CONTEXT.md @@ -1,6 +1,6 @@ # PROJECT_CONTEXT – rd13_tile_server -**Letzte Aktualisierung:** 2026-07-01 – ✅ **Marker-API**: Go-Service für Maptiler-kompatible Marker-Endpunkte (`/styles/v4/marker/*`). Maße exakt nach Kartographer mapbox-lib.js: pin-m=30×70px (@1x)/60×140px (@2x). Weißer Rand + Innenpunkt (A=255). Ursache der Verzerrung: Größen-Mismatch (27×41→30×70 CSS-Stretch). Forgejo CI baut + pusht Image. +**Letzte Aktualisierung:** 2026-07-01 – ✅ **Marker-API**: Go-Service. Maße nach Kartographer mapbox-lib.js (pin-m=30×70/@1x). Spitze bei tipY=h/2 damit iconAnchor=[w/2,h/2] exakt auf Nadelspitze zeigt. Untere Canvas-Hälfte transparent. r=w*0.33 → r/d=0.41 → 24°. Weißer Rand+Punkt. Forgejo CI. --- diff --git a/services/marker-api/main.go b/services/marker-api/main.go index 8aaab64..00a8089 100644 --- a/services/marker-api/main.go +++ b/services/marker-api/main.go @@ -167,17 +167,18 @@ func generateMarker(pinType, hexColor string, scale float64) ([]byte, error) { h = 15 } - // Geometrie für 30×70 (@1x) / 60×140 (@2x): - // - Kreis füllt fast die ganze Breite (r≈47% width) - // - iconAnchor=[w/2, h/2] in mapbox-lib.js → Anker liegt bei y=35 im Tail - // - Spitze bei y≈h-1: 34px unterhalb des Ankers (deutlich sichtbar) + // mapbox-lib.js setzt: iconAnchor = [w/2, h/2] + // → geografische Koordinate liegt bei Pixel (w/2, h/2) = Bildmitte + // → Spitze MUSS bei tipY = h/2 liegen, untere Hälfte bleibt transparent + // + // r muss entsprechend kleiner sein: r = w*0.33 → r/d = 10/(35-11) ≈ 0.41 → 24° Öffnung cx := w / 2 - r := w * 0.47 // r≈14px (@1x): Kreis fast so breit wie Canvas - cy := r + 1.0 // cy≈15: Kreis berührt fast den oberen Rand - tipY := h - 1.0 // Spitze 1px vom unteren Rand + r := w * 0.33 // schlanker Kreis; r/d ≈ 0.41 @ tipY=h/2 + cy := r + 1.0 // Kreis nahe Oberkante + tipY := h / 2 // Spitze an Ankerpunkt [w/2, h/2] → zeigt exakt auf Koordinate - borderW := math.Max(1.5, w*0.06) // weißer Rand - innerR := r * 0.36 // weißer Innenpunkt + borderW := math.Max(1.5, w*0.06) + innerR := r * 0.36 // Füllfarbe: 85% opak; Rand und Punkt: vollständig weiß fillBase := hexToColor(hexColor)