CIMSymbol Composite Bubble - PictureMarkerSymbol Gets Cut Off During Map Rotation or at Specific Zoom Levels

Question

Title: CIMSymbol Composite Bubble - PictureMarkerSymbol Gets Cut Off During Map Rotation or at Specific Zoom Levels

I've created a composite bubble symbol using CIMSymbol, which consists of two main components:

* Left: An icon using CIMPictureMarker

* Right: A countdown timer, composed of:

* A background using CIMVectorMarker

* Countdown digits where each digit is an individual CIMPictureMarker

Problem:
The CIMPictureMarker symbols (icon  & the digits) are being cut off or clipped at during map rotation or certain zoom levels.

* Figure 1: Shows the correct, fully rendered symbol.

* Figure 2: Shows the same symbol with digits & icon partially cut off.

Suspected Cause:
I suspect the issue may be related to the offsets I've applied to position the digital images, but I'm not sure about the underlying reason why this would cause clipping.

I've included my code snippet below.
https://codepen.io/zhe-wang/pen/GgodmoG

Could you please help me identify the root cause? Thank you!

ZheWang66369 · Answer

By the way, initially I wanted to use CIMTextSymbol to display the countdown timer, but since CIMSymbol doesn't work correctly in Feature Layer(https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/cimsymbol-not-working-correctly-i...), I had to choose PictureMarkerSymbol to display the countdown instead.

ZheWang66369 · Answer

Hi,

Thanks for your response and questions. Here are the clarifications:

* JavaScript SDK Version:
I am currently using version 4.29 of the JavaScript SDK. I have tested with version 4.33, which can reproduce the bug. I can not download 4.34, which are typically available 3-4 weeks after release.

* Symbol Offset Details:
The offsetY I'm using is 14, and the offsetX values are 36, 46, 56, 66, 76. Additionally, I've updated the CodePen by replacing the variables with fixed values(https://codepen.io/zhe-wang/pen/GgodmoG).

Let me know if you need further details or if there’s anything else we can test.

Thanks for your support!

AnneFitz · Answer

Hi, this seems like a bug, but could you please clarify a couple things:

* What version of the JavaScript SDK are you using? Does the issue go away if you update to the latest 4.34? Or is there a version where this worked as expected?
* How much of an offset are you applying to the symbol? Your codepen is using a variable to set the offset but it would help me to know a range of where the problem begins to appear.

Thanks!