topic CIMSymbol not working in SceneView (3D) in ArcGIS JavaScript Maps SDK Questions

CIMSymbol not working in SceneView (3D)

michaelpoa — Tue, 04 Apr 2023 11:55:29 GMT

In 2D (mapView) my CIMSymbol is looking fine (with a custom font*)

*custom font and my esri config:

esriConfig.fontsUrl = './assets/font/';

When switching to 3D the CIM symbol can't find the custom font? And it looks like:

Is this a known issue?

MY CIMSymbol:

{
    "type": "cim",
    "data": {
        "type": "CIMSymbolReference",
        "symbol": {
            "type": "CIMPointSymbol",
            "symbolLayers": [
                {
                    "type": "CIMVectorMarker",
                    "enable": true,
                    "anchorPoint": {
                        "x": 0,
                        "y": 0
                    },
                    "anchorPointUnits": "Relative",
                    "dominantSizeAxis3D": "Y",
                    "size": 40,
                    "billboardMode3D": "FaceNearPlane",
                    "frame": {
                        "xmin": -20,
                        "ymin": -20,
                        "xmax": 20,
                        "ymax": 20
                    },
                    "markerGraphics": [
                        {
                            "type": "CIMMarkerGraphic",
                            "geometry": {
                                "x": 0,
                                "y": 0
                            },
                            "textString": "\ue928",
                            "symbol": {
                                "type": "CIMTextSymbol",
                                "fontFamilyName": "apica-font",
                                "height": 40,
                                "horizontalAlignment": "Center",
                                "symbol": {
                                    "type": "CIMPolygonSymbol",
                                    "symbolLayers": [
                                        {
                                            "type": "CIMSolidFill",
                                            "enable": true,
                                            "color": [
                                                27,
                                                36,
                                                61,
                                                255
                                            ]
                                        }
                                    ]
                                },
                                "billboardMode3D": "FaceNearPlane",
                                "depth3D": 3,
                                "verticalAlignment": "Center"
                            }
                        },
                        {
                            "type": "CIMMarkerGraphic",
                            "geometry": {
                                "x": 0,
                                "y": 0
                            },
                            "textString": "\ue90D",
                            "symbol": {
                                "type": "CIMTextSymbol",
                                "fontFamilyName": "apica-font",
                                "height": 11.200000000000001,
                                "horizontalAlignment": "Center",
                                "symbol": {
                                    "type": "CIMPolygonSymbol",
                                    "symbolLayers": [
                                        {
                                            "type": "CIMSolidFill",
                                            "enable": true,
                                            "color": [
                                                255,
                                                255,
                                                255,
                                                255
                                            ]
                                        }
                                    ]
                                },
                                "billboardMode3D": "FaceNearPlane",
                                "depth3D": 3,
                                "verticalAlignment": "Center"
                            }
                        }
                    ],
                    "scaleSymbolsProportionally": true,
                    "respectFrame": true,
                    "colorLocked": true
                }
            ]
        }
    }
}

Re: CIMSymbol not working in SceneView (3D)

michaelpoa — Thu, 06 Apr 2023 09:15:03 GMT

You can reproduce the issue using this repo:

https://github.com/michaelkeesdev/arcgis-js

npm install + npm start

When chaning MapView to SceneView (app.component.ts) you will reproduce the issue

You should know about this,
@AnneFitz

Re: CIMSymbol not working in SceneView (3D)

michaelpoa — Thu, 06 Apr 2023 09:18:32 GMT

Maybe the answer?

The possible values for fontFamilyName property on CIMTextSymbol are dependent upon if you working with a MapView or SceneView. See the Labeling guide page for detailed explanation. Unsupported fonts will fall back to Arial Unicode MS Regular in MapView and sans-serif in SceneView.

Re: CIMSymbol not working in SceneView (3D)

AnneFitz — Wed, 12 Apr 2023 22:18:41 GMT

Hi @michaelpoa - the fonts are a bit different between MapView and SceneView. To bring in custom fonts in a 2D MapView, you would use the esriConfig.fontsUrl property, but in a 3D SceneView, you would use CSS @font-face instead, and bring in the font data from web font (woff or ttf). Check out the labeling guide page for more information.

With that being said, I think there is a bug with our CIMSymbol implementation in 3D with icon fonts. We are investigating it further and hope to have a fix in an upcoming release. Thanks!

Re: CIMSymbol not working in SceneView (3D)

AnneFitz — Wed, 19 Apr 2023 23:57:44 GMT

We have a fix for this issue in the upcoming (4.27) release. You can test it out on our development /next version of the API.

Here's an example using FontAwesome in a CIMSymbol in a SceneView: https://codepen.io/annefitz/pen/eYPpxpj?editors=1000 Notice how the font is defined within the CSS @font-face , then is used within the CIMSymbol.