Custom Marker Overlaid by Default Pin in MaplibreGL JS Versions After 3.1.0

[r-follador]

I assume I'm missing something obvious, but I can't figure it out:

while upgrading from MaplibreGL JS 3.1.0 to any newer version, the default map pin is constantly overlaid over any custom markers defined with CSS.

maplibre-gl-js version: >3.1.0

browser: firefox, chromium

Observation

In Version 3.1.0 and earlier, I can define a custom map marker as follows:

In HTML:

<style>
.marker2d {
        display: block;
        border: none;
        border-radius: 50%;
        background-color: red;
        width: 70px;
        height: 70px;
        cursor: pointer;
        padding: 0;
    }
</style>

In the Script:

let el = document.createElement('div');
el.className = 'marker2d';
let marker = new maplibregl.Marker(el)
  		.setLngLat([12.4822, 41.8967])
  		.addTo(map);

This works, but since >3.1.0, the standard pin is still overlaid. How do I get rid of it?

Link to Demonstration

Actual Behaviour: Custom Pin overlaid: Example with version 4.1.0:
https://jsbin.com/riveyofiqe/edit?html,output

Expected behaviour: Example with version 3.1.0:
https://jsbin.com/qosatuxati/edit?html,output

[HarelM]

According to the changelog, this was a non documented way of creating a marker.
As of 3.2 you should use a marker constructor with no parameters and call addClassName.

In general, we try and document changes in the changelog.
Also, using typescript would have saved you some pain I believe.

[r-follador]

Thanks for your quick reply!
Please note that the Example in "Add custom icons with Markers" also uses the Marker constructor to pass a <div> element with the class assigned.

Anyway, using addClassName gives the same result: https://jsbin.com/nofayewoto/edit?html,output

let marker = new maplibregl.Marker()
        .setLngLat([12.4822, 41.8967])
        .addTo(map);
marker.addClassName('marker2d');

Is there any working example I can use as a guide?

[r-follador]

My bad, the example in "Add custom icons with Markers" actually works.
I need to pass the created <div> as an element in the constructor:

let el = document.createElement('div');
el.className = 'marker2d';
let marker = new maplibregl.Marker({element: el})
  		.setLngLat([12.4822, 41.8967])
  		.addTo(map);

See https://jsbin.com/danusugeqo/edit?html,output

Thanks for your help!! The other observation still stands, using addClassName keeps the default pin visible. I don't know if this is intended behaviour or not.

[HarelM]

True, addClassName only adds a class and does not remove the original class that adds the image.