ryan/via
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix: prevent custom element markers from rendering upside down (#15)
All checks were successful
CI / Build and Test (push) Successful in 37s
Details

Browse Source
This commit was merged in pull request #15.
This commit is contained in:
ryan
2026-02-20 21:33:27 +00:00
parent ae32da77df
commit 15fda48844
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
maplibre/js.go
View File

@@ -180,24 +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.RotationSignal != nil {
// 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.Rotation != 0 {
} else if mk.RotationSignal == nil && mk.Rotation != 0 {
opts += fmt.Sprintf(`rotation:%s,`, formatFloat(mk.Rotation))
}
if mk.Draggable {
@@ -214,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);`)
@@ -262,7 +277,17 @@ func markerEffectExpr(mapID, markerID string, mk Marker) string {
`if(m&&m._via_markers[%[2]s]){`+
`m._via_markers[%[2]s].setLngLat([lng,lat])`,
jsonStr(mapID), jsonStr(markerID)))
if mk.RotationSignal != nil {
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(`}`)