feat: support custom HTML/SVG element markers in MapLibre
All checks were successful
CI / Build and Test (push) Successful in 37s
CI / Build and Test (pull_request) Successful in 33s

Add Element, Anchor, and Rotation fields to the Marker struct so users
can render custom icons (ships, circles, buildings) instead of the
default pin. When Element is set, Color is ignored and the raw HTML/SVG
is injected as the marker's DOM element.

Update the example to demonstrate a static ship SVG marker with rotation
and a signal-driven vehicle marker using a custom SVG circle.
This commit is contained in:
Ryan Hamamura
2026-02-20 10:38:12 -10:00
parent cbc5022e0d
commit e6dc8c27fd
3 changed files with 47 additions and 3 deletions

View File

@@ -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,`
}