Difference in symbol rendering between ArcGIS JavaScript and Online Map Viewer

JulienHenchoz

Our client has been preparing layers and previewing them using ArcGIS Online Map Viewer. 

We are now integrating them in our website using the ArcGIS SDK for Javascript (4.25), calling them using FeatureLayers, and I find there are major differences in the way symbols are rendered in the JS FeatureLayers.

For example in the attached screenshots, the vertical stripes appear thick in the Online Map Viewer while they are a single pixel wide in the JS version.

I attached another example when the thickness of lines is off, and some directional arrows are lost.

After a thorough dive into the documentation, I could find some ways to partly affect the rendering of symbols in JS (using layer.renderer), but with very few options (basically colors and thickness of outlines).

Is there a way to get a consistent rendering between the Online Map Viewer and the Javascript maps ? If not, is there any workaround that could allows us to get a result closer to the one in the Map Viewer ?

Thank you for your help!

arcgis_javascript.png

mapviewer.png

example2.jpg

JulienHenchoz

Thank you for your replies!

After digging deeper, I could fix my problem by using "ImageryLayers" instead of FeatureLayers. When using those, the rendering is exactly the same as on ArcGIS Pro and on the Online Map Viewer.

I ended up loading both : an ImageryLayer for rendering, and a FeatureLayer with opacity=0 to benefit from dynamic data and stats.

It relates quite a bit to this thread https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/symbol-is-rendered-differently-between/m-p/420812

Bottom line was that the layers I was seeing in ArcGIS Pro and on the Online Map Viewer were generated server-side, while the FeatureLayers loaded using the JS API were rendered in the client side, with quite a lot of limitations, leading to some symbols being simplified or simply dropped.

Hope this helps someone having the same issue!