Setting the fontFamily dynamically

[bjvesely]

Does anybody know how to dynamically set the fontFamily in the TextLayer? I have data coming into that will specify the fontFamily.

Thank you for your help,

[AdriSolid]

Here you have an example, you should be able to set the new layer props to the deck instance using setProps method.

Hope it helps!

[bjvesely]

Thank you for your help and responding. One question, I have tried using the updateTriggers function to update the rendering options such as fontFamily or background color, but it does not work. It only seems to work for updating data accessors such as getText. Are there any examples of updating the rendering options using the updateTriggers function? I have been unable to find any.

[Pessimistress]

Only accessors (get*) need updateTriggers. Other props take effect when they are changed. When you ask for help, it's generally a good idea to include a code sample. I can't tell you what is wrong with "it does not work".

[bjvesely]

Here is my implementation of the TextLayer. Thank you in advance for any help you can give.

new TextLayer({
id: this.id + "-child",
data: this.props.data,
sizeUnits: "meters",
pickable: true,
autoHighlight: true,
fontFamily: this.props.font,
fontWeight: (this.props.fontWeight != null ? this.props.fontWeight : "normal"),
getText: (d) => (d.text),
getPosition: (d) => d.coordinates,
getSize: (d) => d.properties.fontSize,
getColor: (d) => d.properties.color,
getAlignmentBaseline: (d) => d.properties.base,
getTextAnchor: (d) => d.properties.anchor,
getFilterValue(d) {
return d.properties.visible;
},
filterRange: [1, 1],
extensions: [new DataFilterExtension({filterSize: 1})],
updateTriggers: {
getFilterValue: [d => d.properties.visible],
},
}),

[bjvesely]

Hi. it is set in "fontFamily: this.props.font", the font is sent through a JSON message where the font is is under properties tag similar to getSize: (d) => d.properties.fontSize

The properties part of the JSON message is below

{
"properties": {
"visible": 1,
"base": "bottom",
"scale": 3,
"rotation": 0,
"fontSize": 30,
"color": [255, 255, 255],
"fontWeight": "normal",
"font": "serif",
"pattern": "solid",
"style": [0, 0],
"width": 1,
"level": 0
},
}

[Pessimistress]

The layer construction code is fine. I suggest you log the layer object and inspect its props.fontFamily to see what value is actually passed to it.

[Pessimistress]

And just FYI the way you are using updateTriggers is wrong. You should read the example in the updateTriggers documentation.

[bjvesely]

Thank you for responding. Is there any examples on how to "log the layer object and inspect it"? I am a little new to deckgl

[Pessimistress]

console.log(layer)