fix: pin tip at iconAnchor position (h/2, not h-1)
Some checks failed
Build & Push marker-api / build (push) Failing after 5s

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
This commit is contained in:
Conrad Schulz 2026-07-01 13:55:52 +00:00
parent bedbe0f3f3
commit 8feaa6bd15
4 changed files with 26 additions and 10 deletions

View file

@ -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/`

View file

@ -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!»

View file

@ -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.
---

View file

@ -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)