HI
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
}
]
}
}
}
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
Maybe the answer?
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!
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.