topic Re: Issue with TextSymbol HaloSize in Chrome in ArcGIS JavaScript Maps SDK Questions

Issue with TextSymbol HaloSize in Chrome

YohanBienvenue — Thu, 12 Jan 2017 18:53:33 GMT

I'm having an issue with the Halo size of TextSymbols in Chrome. I haven't been able to see a pattern yet, but it happens frequently. Often the HaloSize seems to be 1 less then asked. For instance if I ask for a HaloSize of 1, some will be at 0. If I ask for a HaloSize of 2, some will be at 1. If I load the exact same graphics in Firefox, the Halos are fine.

Here's screenshots from our application. In this specific case we add TextSymbols to measure polygon segments. All properties are the same for each TextSymbol, except for the angle and actual text used. Note that the surface labels in the middle of each polygons never have this issue, only the ones along each polygon segments. In this shot there 3 symbols that lost their halo in Chrome.

(Although this might be a bug specific to Chrome, I still thought I'd ask here and see if others got the same issue.)

We're using the API 3.19

Chrome

Firefox

Thanks,

Yohan

UPDATE 2017-08-13

So I finally got some time to look at this issue again, at least to find a workaround. I ended just doing a lot of tests and compiling a list of the problem angles, then just increasing the halo size by 1 for those angles. Seems to work fine.

if (has("chrome")){
var problemAngles = [8, 11, 27, 28, 34, 37, 40, 43, 44, 46, 47, 50, 53, 56, 62, 63, 79, 82, 98, 101, 117, 118, 124, 127, 130, 133, 134, 136, 137, 140, 143, 146, 152, 153, 169, 172, 180, 188, 191, 207, 208, 214, 217, 220, 223, 224, 226, 227, 230, 233, 236, 242, 243, 259, 262, 278, 281, 297, 298, 304, 307, 310, 313, 314, 316, 317, 320, 323, 326, 332, 333, 349, 352];
var haloSize = problemAngles.indexOf(angle) > -1 ? 2 : 1;
}

Not that this list does not handle negative angles, but you can just add 180 when this is the case.

Hope this helps someone.

Re: Issue with TextSymbol HaloSize in Chrome

TomSellsted — Thu, 12 Jan 2017 19:41:16 GMT

Yohan,

Do you have an app that can be used to test? It would be helpful for diagnosing/replicating the problem. Is the text added as a label layer or just as graphics?

Regards,

Tom

Re: Issue with TextSymbol HaloSize in Chrome

YohanBienvenue — Thu, 12 Jan 2017 19:58:19 GMT

Tom,

No it's proprietary code and these labels are not available without an account to log in the application.

They are just Graphic objects. Here's the snippet of code that actually adds them to a GraphicsLayer:

var font = new Font("12pt");
font.setFamily("Arial");
font.setWeight(Font.WEIGHT_BOLD);
font.setDecoration("none");
font.setStyle(Font.STYLE_NORMAL);

var symbol = new TextSymbol(this.textInput.value);
symbol.setAlign(TextSymbol.ALIGN_MIDDLE);
symbol.setColor(new Color("#2A506F"));
symbol.setFont(font);
symbol.setText(distance.toFixed(2).replace('.', ',') + " " + aziUnits.codeToShortText(unitCode));
symbol.setHaloColor(new Color([255, 255, 255, 1]));
symbol.setHaloSize(1);
symbol.setAngle(angle);

// Add the measure label to the graphics layer
var textGraphic = new Graphic(m4, symbol);
textGraphic.tool = this.toolName;
textGraphic.m1 = m1; // We save m1 and m2 for distance recalculation when the unit is changed (See unit-change)
textGraphic.m2 = m2;
textGraphic.initial = {
mapScale: this.map.getScale(),
fontSize: font.size
};
//this.map.graphics.add(textGraphic);
this.drawGraphicsLayer.add(textGraphic);

Thanks again

Re: Issue with TextSymbol HaloSize in Chrome

TomSellsted — Thu, 12 Jan 2017 21:56:06 GMT

Yohan,

I was able to modify my measure widget Measure Widget 2.1 for Web App Builder to have a halo. It is pretty subtle but it appears to me, at certain angles the text halo disappears. You can experiment yourself with my widget at:

ArcGIS Web Application

I tried it in other browsers and the halo does appear to work properly.

Regards,

Tom

Re: Issue with TextSymbol HaloSize in Chrome

YohanBienvenue — Thu, 12 Jan 2017 22:28:39 GMT

Neat widget.

I really appreciate you testing this on your side and confirming this.

It's harder to see on your pale basemap, but yeah if I test it on a darker patch (for better contrast) I could clearly see you have the same issue at steeper angles. So at least now I know it's not something related to my code and there's probably not much I can do. I did notice it seems to happen more frequently at steep angles, but not all the time, and I can't see a specific pattern.

I think that In the end if it's really a Chrome bug and there's nothing I can do I'll probably just increase the halo size by 1. I'll still have some thinner halos when the bug happens, but at least I won't have text with no halos at all.

But if I do find some fix or workaround I'll let you know.

Thanks

Re: Issue with TextSymbol HaloSize in Chrome

TomSellsted — Thu, 12 Jan 2017 22:37:21 GMT

Yohan,

I also inspected the code for each of the text items and it all looks identical.

You are probably right. It is most likely a Chrome bug.

Regards,

Tom

Re: Issue with TextSymbol HaloSize in Chrome

KristianEkenes — Thu, 19 Jan 2017 21:42:52 GMT

We've seen problems with the textHalo in Chrome in certain scenarios and have a couple of open issues for it. This one looks slightly different though. Can you send a live test case so we can check it out further?

Thanks.

Re: Issue with TextSymbol HaloSize in Chrome

TomSellsted — Thu, 19 Jan 2017 22:01:26 GMT

Kristian,

I had posted a live example previously in this thread at:

ArcGIS Web Application

It is an example using my measure widget in WAB. Zoom in to a darker area of the basemap for better contrast. Select the line or polyline tool and start drawing. As you rotate the line you are drawing, you will see the text measurement with a halo. As you rotate you will see some angles have a smaller halo than others.

I hope this helps.

Regards,

Tom

Re: Issue with TextSymbol HaloSize in Chrome

KristianEkenes — Fri, 20 Jan 2017 00:18:33 GMT

Perfect. Thanks.

Re: Issue with TextSymbol HaloSize in Chrome

TomSellsted — Fri, 20 Jan 2017 00:36:44 GMT

You are welcome!