Access FeatureLayer label innerHTML in JS API 4.0

FilipJung — Sat, 11 Dec 2021 08:21:57 GMT

Hi,

I wonder if there is possibility to access and change the innerHTML of labels on FeatureLayer.

The approach described here: http://bl.ocks.org/asizer/44e68f03679004094262 does not work because LableLayer is not in 4.0.

Code snippet was:

labelsLayerNode = labelsLayerNode || labelsLayer.getNode();
            if (!labelsLayerNode) {
                return;
            }
            // find text labels in the labelsLayer svg element
            var textLabels = dojoQuery('text', labelsLayerNode);
            // cycle through each label and add a new row on the dollar sign.
            // TODO: ignore empty strings so they don't cause unnecessary newlines.
            arrayUtil.forEach(textLabels, function(lbl) {
                var fieldArr = lbl.innerHTML.split('$');
                // only format these labels if there's more than one field here
                if (fieldArr.length > 1) {
                    lbl.innerHTML = fieldArr[0];
                    for (var i = 1; i < fieldArr.length; i++) {
                        // create a tspan for each subsequent field
                        var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
                        tspan.setAttributeNS(null, 'x', lbl.getAttributeNS(null, 'x'));
                        tspan.setAttributeNS(null, 'dy', '1.5em');
                        tspan.innerHTML = fieldArr[i];
                        lbl.appendChild(tspan);
                    }
                }
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The task is to split the label to multiple lines and set different colors for each line (in 4.0 there is no problem to do the line spliting:

labelExpressionInfo: {
 value: '{OBJECTID}\n{OBJECTID}'
 },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but what about the different colors?

Thanks for help.

Filip

topic Access FeatureLayer label innerHTML in JS API 4.0 in ArcGIS JavaScript Maps SDK Questions

Access FeatureLayer label innerHTML in JS API 4.0