I am seeing a symbology downgrade when creating a WebApp from a WebMap. Anybody would know why?

[RafaeldePedro]

Hello everyone,

I am quite new to setting up WebApps. After creating symbols on AGOL Map Viewer for a number of polygon features, as shown in the image attachment "legend_WebMap.png", about half of these were downgraded to a grey fill polygon when I created a WebApp with WebApp Builder - see image attachment "legend.WebApp.png". Should I have expected this to happen? I understand that AGOL won't handle some complex symbols created on ArcMap or ArcGIS Pro, but I created all these symbols on AGOL, so why would they not be displayed when on a WebApp?

While I'm at it, can anyone suggest tips or tricks to customize symbols a bit better in AGOL? If anyone here is i the field of Ecology in the UK, you'll see I am trying to replicate the symbology for Phase 1 Habitats. ESRI UK have developed a bespoke app and template - Sweet for ArcGIS, with official JNCC Phase 1 habitat symbols, and I wish there was a way I could manually create something remotely similar. 

Thank you everyone

[KenBuja · Accepted solution]

The symbology for the Map Viewer uses the 4.x version of ArcGIS API for Javascript which allows for hatching. Web AppBuilder uses ArcGIS API for Javascript 3.x, which cannot render hatching. If you use the map in Experience Builder (with uses 4.x), you should be able to see the hatching. If you use Map Viewer Classic, you won't be able to creating symbology with hatching, since it uses 3.x.

[JakeSkinner · Accepted solution]

@RafaeldePedro I was able to successfully publish a service with hatching symbology using ArcGIS Pro 2.9.2 with the style referenced in this document, and using Map Viewer Classic/Web AppBuilder.

[RafaeldePedro]

thank you for the link, I will take a look!