fix: prevent custom element markers from rendering upside down (#15)

internal/examples/maplibre/main.go

@@ -1,6 +1,8 @@
 package main
 
 import (
+	"fmt"
+	"math"
 	"math/rand"
 	"strconv"
 	"sync"
@@ -24,6 +26,55 @@ var (
 	}
 )
 
+// shipState tracks a ship lerping along a loop of waypoints.
+type shipState struct {
+	lng, lat  float64
+	waypoints [][2]float64 // [lng, lat] pairs
+	wpIdx     int          // index of next target waypoint
+	progress  float64      // 0..1 toward next waypoint
+	speed     float64      // progress increment per tick
+}
+
+func (s *shipState) tick() {
+	s.progress += s.speed
+	for s.progress >= 1 {
+		s.progress -= 1
+		s.wpIdx = (s.wpIdx + 1) % len(s.waypoints)
+	}
+	from := s.waypoints[(s.wpIdx-1+len(s.waypoints))%len(s.waypoints)]
+	to := s.waypoints[s.wpIdx]
+	s.lng = from[0] + (to[0]-from[0])*s.progress
+	s.lat = from[1] + (to[1]-from[1])*s.progress
+}
+
+// heading returns clockwise degrees from north (for SVG rotation).
+func (s *shipState) heading() float64 {
+	from := s.waypoints[(s.wpIdx-1+len(s.waypoints))%len(s.waypoints)]
+	to := s.waypoints[s.wpIdx]
+	dx := to[0] - from[0]
+	dy := to[1] - from[1]
+	// atan2 gives angle from +X axis; convert to CW from north
+	return math.Mod(math.Atan2(dx, dy)*180/math.Pi+360, 360)
+}
+
+var (
+	fleetOnce sync.Once
+	fleet     struct {
+		mu    sync.RWMutex
+		ships [3]shipState
+	}
+)
+
+const shipSVG = `<svg width="48" height="28" viewBox="0 0 80 44" xmlns="http://www.w3.org/2000/svg">` +
+	`<path d="M2 30 L10 42 L70 42 L78 30 Z" fill="#1b3a5c"/>` +
+	`<rect x="12" y="24" width="56" height="6" rx="1" fill="#2c5f8a"/>` +
+	`<rect x="18" y="14" width="46" height="10" rx="1" fill="#2c5f8a" stroke="#1b3a5c" stroke-width="0.5"/>` +
+	`<rect x="8" y="12" width="9" height="12" rx="1" fill="#d5dfe8" stroke="#2c5f8a" stroke-width="0.5"/>` +
+	`<rect x="9.5" y="13" width="6" height="4" rx="0.5" fill="#85c1e9"/>` +
+	`<rect x="10" y="4" width="5" height="8" rx="0.5" fill="#1b3a5c"/>` +
+	`<rect x="9.5" y="2" width="6" height="3" rx="0.5" fill="#c0392b"/>` +
+	`</svg>`
+
 func main() {
 	v := via.New()
 	v.Config(via.Options{
@@ -48,6 +99,50 @@ func main() {
 		}()
 	})
 
+	// Fleet of ships following waypoint loops through SF Bay.
+	fleetOnce.Do(func() {
+		fleet.ships = [3]shipState{
+			{ // Golden Gate → Alcatraz → Pier 39 → back out
+				waypoints: [][2]float64{
+					{-122.478, 37.819}, {-122.423, 37.827},
+					{-122.410, 37.809}, {-122.423, 37.827},
+				},
+				speed: 0.03,
+			},
+			{ // Oakland → Treasure Island → Angel Island → loop
+				waypoints: [][2]float64{
+					{-122.330, 37.795}, {-122.370, 37.823},
+					{-122.432, 37.860}, {-122.370, 37.823},
+				},
+				speed: 0.02,
+			},
+			{ // Sausalito → Pier 39 ferry route
+				waypoints: [][2]float64{
+					{-122.480, 37.859}, {-122.435, 37.840},
+					{-122.410, 37.809}, {-122.435, 37.840},
+				},
+				speed: 0.025,
+			},
+		}
+		// Set initial positions.
+		for i := range fleet.ships {
+			s := &fleet.ships[i]
+			s.lng = s.waypoints[0][0]
+			s.lat = s.waypoints[0][1]
+			s.wpIdx = 1
+		}
+		go func() {
+			for {
+				time.Sleep(time.Second)
+				fleet.mu.Lock()
+				for i := range fleet.ships {
+					fleet.ships[i].tick()
+				}
+				fleet.mu.Unlock()
+			}
+		}()
+	})
+
 	v.Page("/", func(c *via.Context) {
 		m := maplibre.New(c, maplibre.Options{
 			Style:  "https://demotiles.maplibre.org/style.json",
@@ -75,24 +170,29 @@ func main() {
 			},
 		})
 
-		// Custom SVG container ship marker (static)
-		m.AddMarker("ship", maplibre.Marker{
-			LngLat: maplibre.LngLat{Lng: -122.38, Lat: 37.80},
-			Element: `<svg width="48" height="28" viewBox="0 0 80 44" xmlns="http://www.w3.org/2000/svg">` +
-				`<path d="M2 30 L10 42 L70 42 L78 30 Z" fill="#1b3a5c"/>` +
-				`<rect x="12" y="24" width="56" height="6" rx="1" fill="#2c5f8a"/>` +
-				`<rect x="18" y="14" width="46" height="10" rx="1" fill="#2c5f8a" stroke="#1b3a5c" stroke-width="0.5"/>` +
-				`<rect x="8" y="12" width="9" height="12" rx="1" fill="#d5dfe8" stroke="#2c5f8a" stroke-width="0.5"/>` +
-				`<rect x="9.5" y="13" width="6" height="4" rx="0.5" fill="#85c1e9"/>` +
-				`<rect x="10" y="4" width="5" height="8" rx="0.5" fill="#1b3a5c"/>` +
-				`<rect x="9.5" y="2" width="6" height="3" rx="0.5" fill="#c0392b"/>` +
-				`</svg>`,
-			Anchor:   "center",
-			Rotation: 45,
-			Popup: &maplibre.Popup{
-				Content: "<strong>MSC Adriatica</strong><p>Container vessel — heading NE</p>",
-			},
-		})
+		// Animated container ships following waypoint routes
+		shipNames := [3]string{"MSC Adriatica", "Evergreen Harmony", "Maersk Aurora"}
+		type shipSignals struct{ lng, lat, rot *via.Signal }
+		var ships [3]shipSignals
+
+		fleet.mu.RLock()
+		for i, s := range fleet.ships {
+			ships[i].lng = c.Signal(s.lng)
+			ships[i].lat = c.Signal(s.lat)
+			// SVG bow points right (east), so subtract 90° from the north-based heading.
+			ships[i].rot = c.Signal(s.heading() - 90)
+			m.AddMarker(fmt.Sprintf("ship-%d", i), maplibre.Marker{
+				LngSignal:      ships[i].lng,
+				LatSignal:      ships[i].lat,
+				RotationSignal: ships[i].rot,
+				Element:        shipSVG,
+				Anchor:         "center",
+				Popup: &maplibre.Popup{
+					Content: fmt.Sprintf("<strong>%s</strong>", shipNames[i]),
+				},
+			})
+		}
+		fleet.mu.RUnlock()
 
 		// Custom SVG vehicle marker — reads shared Go state
 		vehicleLng := c.Signal(-122.43)
@@ -113,6 +213,15 @@ func main() {
 			vehicle.mu.RUnlock()
 			vehicleLng.SetValue(lng)
 			vehicleLat.SetValue(lat)
+
+			fleet.mu.RLock()
+			for i, s := range fleet.ships {
+				ships[i].lng.SetValue(s.lng)
+				ships[i].lat.SetValue(s.lat)
+				ships[i].rot.SetValue(s.heading() - 90)
+			}
+			fleet.mu.RUnlock()
+
 			c.SyncSignals()
 		})
 

maplibre/js.go

@@ -180,22 +180,30 @@ func initScript(m *Map) string {
 func markerBodyJS(mapID, markerID string, mk Marker) string {
 	var b strings.Builder
 
+	// Use a wrapper div for custom elements so MapLibre rotates the div
+	// while we can independently flip the inner element to prevent inversion.
 	if mk.Element != "" {
 		b.WriteString(fmt.Sprintf(
-			`var _mkEl=document.createElement('div');_mkEl.innerHTML=%s;`,
+			`var _mkEl=document.createElement('div');`+
+				`_mkEl.style.display='inline-block';_mkEl.style.lineHeight='0';`+
+				`_mkEl.innerHTML=%s;`,
 			jsonStr(mk.Element)))
 	}
 
 	opts := "{"
 	if mk.Element != "" {
-		opts += `element:_mkEl.firstElementChild||_mkEl,`
+		opts += `element:_mkEl,`
 	} else if mk.Color != "" {
 		opts += fmt.Sprintf(`color:%s,`, jsonStr(mk.Color))
 	}
 	if mk.Anchor != "" {
 		opts += fmt.Sprintf(`anchor:%s,`, jsonStr(mk.Anchor))
 	}
-	if mk.Rotation != 0 {
+	// When both Element and RotationSignal are set, skip initial rotation
+	// in opts — we apply it post-creation with flip normalization.
+	if mk.RotationSignal != nil && mk.Element == "" {
+		opts += fmt.Sprintf(`rotation:%s,`, mk.RotationSignal.String())
+	} else if mk.RotationSignal == nil && mk.Rotation != 0 {
 		opts += fmt.Sprintf(`rotation:%s,`, formatFloat(mk.Rotation))
 	}
 	if mk.Draggable {
@@ -212,6 +220,15 @@ func markerBodyJS(mapID, markerID string, mk Marker) string {
 			opts, formatFloat(mk.LngLat.Lng), formatFloat(mk.LngLat.Lat)))
 	}
 
+	// Apply initial rotation with flip normalization for custom elements.
+	if mk.RotationSignal != nil && mk.Element != "" {
+		b.WriteString(fmt.Sprintf(
+			`var _r=%s,_f=_r>90||_r<-90;if(_f)_r=_r>0?_r-180:_r+180;`+
+				`mk.setRotation(_r);`+
+				`var _ch=_mkEl.firstElementChild;if(_ch&&_f)_ch.style.transform='scaleX(-1)';`,
+			mk.RotationSignal.String()))
+	}
+
 	if mk.Popup != nil {
 		b.WriteString(popupConstructorJS(*mk.Popup, "pk"))
 		b.WriteString(`mk.setPopup(pk);`)
@@ -250,14 +267,31 @@ func dragendHandlerJS(mapID, markerID string, mk Marker) string {
 func markerEffectExpr(mapID, markerID string, mk Marker) string {
 	// Read signals before the guard so Datastar tracks them as dependencies
 	// even when the map/marker hasn't loaded yet on first evaluation.
-	return fmt.Sprintf(
-		`var lng=$%s,lat=$%s;`+
-			`var m=window.__via_maps&&window.__via_maps[%s];`+
-			`if(m&&m._via_markers[%s]){`+
-			`m._via_markers[%s].setLngLat([lng,lat])}`,
-		mk.LngSignal.ID(), mk.LatSignal.ID(),
-		jsonStr(mapID), jsonStr(markerID), jsonStr(markerID),
-	)
+	var b strings.Builder
+	b.WriteString(fmt.Sprintf(`var lng=$%s,lat=$%s;`, mk.LngSignal.ID(), mk.LatSignal.ID()))
+	if mk.RotationSignal != nil {
+		b.WriteString(fmt.Sprintf(`var rot=$%s;`, mk.RotationSignal.ID()))
+	}
+	b.WriteString(fmt.Sprintf(
+		`var m=window.__via_maps&&window.__via_maps[%s];`+
+			`if(m&&m._via_markers[%[2]s]){`+
+			`m._via_markers[%[2]s].setLngLat([lng,lat])`,
+		jsonStr(mapID), jsonStr(markerID)))
+	if mk.RotationSignal != nil && mk.Element != "" {
+		// Normalize rotation to [-90,90] and horizontally flip the inner
+		// element when |rotation| > 90° to prevent upside-down markers.
+		b.WriteString(fmt.Sprintf(
+			`;var _mk=m._via_markers[%[1]s],_f=rot>90||rot<-90;`+
+				`if(_f)rot=rot>0?rot-180:rot+180;`+
+				`_mk.setRotation(rot);`+
+				`var _ch=_mk.getElement().firstElementChild;`+
+				`if(_ch)_ch.style.transform=_f?'scaleX(-1)':''`,
+			jsonStr(markerID)))
+	} else if mk.RotationSignal != nil {
+		b.WriteString(fmt.Sprintf(`;m._via_markers[%s].setRotation(rot)`, jsonStr(markerID)))
+	}
+	b.WriteString(`}`)
+	return b.String()
 }
 
 // addMarkerJS generates a self-contained IIFE to add a marker post-render.

maplibre/maplibre.go

@@ -122,13 +122,18 @@ func (m *Map) Element(extra ...h.H) h.H {
 		}
 	}
 
-	// Hidden inputs for signal-backed marker position writeback (drag → signal)
+	// Hidden inputs for signal-backed marker position/rotation writeback
 	for _, me := range m.markers {
 		if me.marker.LngSignal != nil && me.marker.LatSignal != nil {
 			children = append(children,
 				h.Input(h.Type("hidden"), me.marker.LngSignal.Bind()),
 				h.Input(h.Type("hidden"), me.marker.LatSignal.Bind()),
 			)
+			if me.marker.RotationSignal != nil {
+				children = append(children,
+					h.Input(h.Type("hidden"), me.marker.RotationSignal.Bind()),
+				)
+			}
 		}
 	}
 

maplibre/types.go

@@ -313,6 +313,7 @@ type Marker struct {
 	Anchor string
 
 	// Rotation is clockwise degrees. Useful for directional icons (ships, vehicles).
+	// Ignored when RotationSignal is set.
 	Rotation float64
 
 	// Signal-backed position. When set, signals drive marker position reactively.
@@ -320,6 +321,9 @@ type Marker struct {
 	// If Draggable is true, drag updates write back to these signals.
 	LngSignal *via.Signal
 	LatSignal *via.Signal
+
+	// RotationSignal drives marker rotation reactively. When set, Rotation is ignored.
+	RotationSignal *via.Signal
 }
 
 // Popup describes a map popup.