Select to view content in your preferred language

CIMSymbol not working in SceneView (3D)

2279
4
04-04-2023 04:55 AM
michaelkdev
New Contributor III

HI


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

custom font item.png

*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:

michaelkdev_0-1680608470115.png


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
}
]
}
}
}

 

0 Kudos
4 Replies
michaelkdev
New Contributor III

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 

0 Kudos
michaelkdev
New Contributor III

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.
0 Kudos
AnneFitz
Esri Regular Contributor

Hi @michaelkdev - 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!

0 Kudos
AnneFitz
Esri Regular Contributor

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.