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

ZheWang66369

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 and  icon partially cut off.
  

  

   

  

   

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

I've included my code snippet below. Could you please help me identify the root cause? Thank you!

const symbol = new tf.map.ArcGIS.CIMSymbol({

            data:

            {

                type: "CIMSymbolReference",

                symbol:

                {

                    type: "CIMPointSymbol",

                    symbolLayers:

                        [{

                            name: "countdownTextHours",

                            isTimeParts : true,

                            type: "CIMPictureMarker",

                            enable: time.hours > 0,

                            size: offsetX * 2,

                            url: this._createTextImage(time.hours, fontcolor),

                            offsetX: 28 + additionalOffsetX,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            frame: frameValues

                        },{  name: "colon_left",

                            isTimeParts: true,

                            type: "CIMPictureMarker",

                            enable: time.hours > 0,

                            size: 10,

                            url: colonUrl,

                            offsetX: 38 + additionalOffsetX,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            frame: frameValues

                        },{

                            name: "countdownTextMinutes",

                            isTimeParts: true,

                            type: "CIMPictureMarker",

                            enable: true,

                            size: offsetX * 2,

                            url: this._createTextImage(time.minutes, fontcolor),

                            offsetX: 48 + additionalOffsetX,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            frame: frameValues,

                        },{  name: "colon_right",

                            isTimeParts: true,

                            type: "CIMPictureMarker",

                            enable: true,

                            size: 10,

                            url: colonUrl,

                            offsetX: 58 +additionalOffsetX,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            frame: frameValues

                        },{

                            name: "countdownTextSeconds",

                            isTimeParts: true,

                            type: "CIMPictureMarker",

                            enable: true,

                            size: offsetX * 2,

                            url: this._createTextImage(time.seconds, fontcolor),

                            offsetX: 68 + additionalOffsetX,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            frame: frameValues,

                        },{

                            name: "background",

                            type: "CIMVectorMarker",

                            enable: true,

                            size: BACKGROUND_SIZE,

                            offsetX: BACKGROUND_OFFSET_X,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            anchorPointUnits: "Relative",

                            frame: frameValues,

                            markerGraphics:

                            [

                                {

                                    type: "CIMMarkerGraphic",

                                    geometry:

                                    {

                                        rings: backgroundRings

                                    },

                                    symbol:

                                    {

                                        type: "CIMPolygonSymbol",

                                        symbolLayers:

                                            [

                                                {

                                                    type: "CIMSolidFill",

                                                    enable: true,

                                                    color: this.ArcGIS.Color.fromHex(backgroundColor).toJSON()

                                                },

                                            ]

                                    }

                                }

                            ],

                            scaleSymbolsProportionally: true,

                            respectFrame: true

                        },{

                            name: "border",

                            type: "CIMVectorMarker",

                            enable: true,

                            size: BACKGROUND_SIZE,

                            offsetX: BACKGROUND_OFFSET_X,

                            offsetY: offsetY,

                            anchorPoint: { x: 0, y: 0 },

                            anchorPointUnits: "Relative",

                            frame: frameValues,

                            markerGraphics:

                            [

                                {

                                    type: "CIMMarkerGraphic",

                                    geometry:

                                    {

                                        rings: borderRings

                                    },

                                    symbol:

                                    {

                                        type: "CIMPolygonSymbol",

                                        symbolLayers:

                                            [

                                                {

                                                    type: "CIMSolidFill",

                                                    enable: true,

                                                    color: borderColor

                                                },

                                            ]

                                    }

                                }

                            ],

                            scaleSymbolsProportionally: true,

                            respectFrame: true

                        },{

                            name: "bubblePicture",

                            type: "CIMPictureMarker",

                            enable: true,

                            anchorPoint: { x: 0, y: 0 },

                            anchorPointUnits: "Relative",

                            size: offsetX * 2,

                            url: url,

                            offsetX: offsetX,

                            offsetY: offsetY

                        }]

                }

            }

        });