feat: support custom HTML/SVG element markers in MapLibre (#10)

maplibre/js.go

@@ -179,10 +179,25 @@ func initScript(m *Map) string {
 // markerBodyJS generates JS to add a marker, assuming `map` is in scope.
 func markerBodyJS(mapID, markerID string, mk Marker) string {
 	var b strings.Builder
+
+	if mk.Element != "" {
+		b.WriteString(fmt.Sprintf(
+			`var _mkEl=document.createElement('div');_mkEl.innerHTML=%s;`,
+			jsonStr(mk.Element)))
+	}
+
 	opts := "{"
-	if mk.Color != "" {
+	if mk.Element != "" {
+		opts += `element:_mkEl.firstElementChild||_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 {
+		opts += fmt.Sprintf(`rotation:%s,`, formatFloat(mk.Rotation))
+	}
 	if mk.Draggable {
 		opts += `draggable:true,`
 	}

maplibre/types.go

@@ -302,6 +302,19 @@ type Marker struct {
 	Draggable bool
 	Popup     *Popup
 
+	// Element is raw HTML/SVG used as a custom marker instead of the
+	// default pin. When set, Color is ignored.
+	// Do not pass untrusted user input without sanitizing it first.
+	Element string
+
+	// Anchor controls which part of the element sits at the coordinate.
+	// Values: "center" (default for custom elements), "bottom" (default
+	// for the pin), "top", "left", "right", "top-left", etc.
+	Anchor string
+
+	// Rotation is clockwise degrees. Useful for directional icons (ships, vehicles).
+	Rotation float64
+
 	// Signal-backed position. When set, signals drive marker position reactively.
 	// Initial position is read from the signal values. LngLat is ignored when signals are set.
 	// If Draggable is true, drag updates write back to these signals.