Dom.setTransform clarification question

[ferdicus]

Just going through the code and checking the DOM method setTransform

Wouldn't this also overwrite user set transform related styles - like for example scale?

Thanks in advance

[HarelM]

Can you be more specific?

[ferdicus]

sure, thanks for your interest

When working with Popups, one can get a reference to specific popups via the getElement popup instance method.
This will get you the, let's call it popup container, a div element with the class maplibregl-popup among others.
This container wraps two other elements - divs with the classes maplibregl-popup-tip (which will render the anchor arrow) and maplibregl-popup-content which holds the actual content of the popup the user may pass into the popup.

Now, when getting the popup container (the one with class maplibregl-popup) one will notice, that there are also styles applied for the correct positioning on the popup via transform: translate(X Y).

Users might want to apply custom transform styles, like scale or rotate on top of the translate values that maplibre applies.

Sorry, that was long winded, however now we arrived to the contentious part:
These custom styles would be overwritten by the setTransform method when applied by maplibre on an update.
I'd assume, that this would be most notably when using "always open" popups and especially when manipulating the map like zooming / panning.

Hope this helps to clarify what i meant by the initial post.
Thanks

[HarelM]

Ahh, OK, now I understand the initial statement.
The popup itself is an out of the box solution to most use cases.
The anchor and content are calculated for every map movement and are placed in the right location according to where the marker is and the map's canvas, for example when the popup's point is in the corner like so:

If you need a different behavior, I guess your best bet would be to write your implementation of the popup/marker with the relevant css.
I'm not aware of a better way to move an html element that resides on the canvas besides using translate.

Another option is to apply custom transformation, somewhat similar to what we recently introduced with the marker's opacity, where there's a default behavior and you can override it using an API call.

[ferdicus]

thanks for your reply HarelM, much appreciated.

i think we're still sending on different wave-lengths :)

I'm aware of how it works, i'm just stating, that,
when a user wants to augment the popups translate style (imagine it being transform: translate(-50%, -100%) translate(510.785px, 320.809px);) with an additional translate property, like scale (imagine it now being transform: translate(-50%, -100%) translate(510.785px, 320.809px) scale(0.779272); ) that scale will most likely be overwritten on the popups next update via .setTransform.

i just wanted to raise a bit of awareness/ ask if this is intended behavior, because i ran into this when working with popups that are open at all times

thanks again for all the time you already took on reading and replying 🙇🏿

[HarelM]

I fully understand.
"Intended" is a strong word :-)
The intention is for this to work properly for most use cases (those that don't set scale or something else).
It was not designed to support scale or other transformations, but that doesn't mean it shouldn't.
As stated above, we has a similar issue with the opacity which was fixed/updated recently, and a similar approach can be done for scale or other transformations I guess.

[ferdicus]

i see, thanks for your patience and replies 🙇🏿