Select to view content in your preferred language

Access FeatureLayer label innerHTML in JS API 4.0

533
0
11-11-2016 08:03 AM
FilipJung
Frequent Contributor

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

0 Kudos
0 Replies