Feature Layer incorrect rendering with webgl rendering and picture marker symbols

749
6
07-09-2018 12:52 PM
ToddAtkins
Occasional Contributor

I've got a feature layer on AGOL that users picture marker symbols for its symbology. If I enable webgl feature layer using 

"esri-featurelayer-webgl": 1

then the symbols do not all render correctly though they are correct in the legend:

Incorrect symbol rendering example with webgl

Disabling esri-featurelayer-webgl solves the issue but then breaks the labeling and feature highlights for popups which are required for the app I'm building here. The incorrect symbols appear as a mishmash of other symbols squished together. This is observed in both Chrome and Firefox on OS X.

Using JS API 4.8.

Any ideas here? Is this a bug in the API or something I'm doing wrong on the coding side?

0 Kudos
6 Replies
ReneRubalcava
Frequent Contributor

I was thinking it might be a CORS issue, but I don't think any symbol would show up in that case. If it were a CORS issue, you could try adding the domain to the esriConfig.request.corsEnabledServices array or use a Proxy to proxy the image request. WebGL is more particular about this than simple image source tags or SVG.

Can you check if you have any warnings related to CORS in the Chrome Dev console? Do you have a public layer item or webmap with this symbol? Maybe the URL to the picture to see if we can replicate?

Thanks

0 Kudos
ToddAtkins
Occasional Contributor

Rene, there's no cors warnings in the dev console and I wouldn't expect that since the feature layer is coming directly from AGOL.

Here's a link to a couple images that exhibit the issue:

Image the First

Image the Second

All we're doing is setting the symbology for the layer in AGOL and saving the layer there. The images are all originally from our dropbox folder.

The layer isn't public but let me see if I can setup a test case with a public layer.

0 Kudos
ToddAtkins
Occasional Contributor

And here's a public layer that demonstrates the issue. There's a single point east of I-35 near the OK/KS line.

const lyr = new FeatureLayer({
    url: 'https://services1.arcgis.com/aUqH6d4IMis39TBB/arcgis/rest/services/test_webgl_issues/FeatureServer/0',
    outFields: ['*'],
    opacity: 1.0,
    visible: true
}‍‍‍‍‍‍‍);‍‍‍‍‍‍‍‍‍‍‍‍‍‍

webgl render issues

The image file I used is this one: Logo

Thanks for having a look at this. I'm also using the js cli if that matters at all.

0 Kudos
ReneRubalcava
Frequent Contributor

Awesome thanks! I see it in that layer now. Passed it along to the right people and currently investigating, thanks!

ToddAtkins
Occasional Contributor

For anybody following this, Esri has filed two bugs related to this:

#BUG-000115988 Picture Marker Symbols in Feature Layer are unable to display with WebGL enabled when imageData of the symbol stored at REST Endpoint is lengthy.

#BUG-000115991 Picture marker symbols in FeatureLayer with WebGL enabled display as jumbled when using more than 10 unique value categories to symbolize points.

ToddAtkins
Occasional Contributor

Looks like 4.9 has solved the issues I was having with this.

0 Kudos