Markers with custom HTML elements and terrain intersections

[sirflyingv]

From discussion #1782

maplibre-gl-js version: 2.4.0

browser: Chrome 106.0.5249.119

Steps to Trigger Behavior

1. Create custom HTML element for markers, that is relatively big (>30px side) and has plain bottom (square panel for example)
2. Add some markers in area with some mountains or hills and 3d terrain layer
3. Move camera in different dimensions

Link to Demonstration

https://youtu.be/6zqEOcTH2Pw

Expected Behavior

Custom marker element will have full opacity at most time, beside when camera obviously hides behind mountain. With default droplet markers and stuff like that works fine. Or Marker having parameter to set ignore terrain collisions, always full opacity or some threshold regulating.

Actual Behavior

At most of camera positions markers opacity sets to 0.2.

[prozessor13]

Hello, this is related to this issue: https://github.com/maplibre/maplibre-gl-js/issues/1134

[prozessor13]

For a hotfix, you can increase the 20 value in line https://github.com/maplibre/maplibre-gl-js/blob/main/src/ui/marker.ts#L483

[sirflyingv]

For a hotfix, you can increase the 20 value in line https://github.com/maplibre/maplibre-gl-js/blob/main/src/ui/marker.ts#L483

Yep, I put 200 and it works as I expected originally https://www.youtube.com/watch?v=6QXEJuJGMg0

[HarelM]

I've assigned a S bounty to the linked issue: #1134. Link to parent Bounty: https://github.com/maplibre/maplibre/issues/189

[ivanklymenkodev2024]

I resolved the issue in this code. The default opacityWhenCovered is 0.2. This causes the markers' opacity to become 0.2 when rendering the map. this.marker = new MLMarker((ment: this.element, offset: markerOffset, opacityWhenCovered: '1.0' })

[HarelM]

Is this issue still relevant? I think the linked issue was resolved.