Trying to recreate John Nelson's fantasy style in JS

Question

I'm trying to recreate multiple images within a polygon using CIM on a geoJSON layer. It seems the JS API only takes the first base64 image and won't read anything past that. I am adding multiple CIMPicture fills underneath the CIMSymbolReference. I would like to avoid using multiple layers to do this. Has anyone had any luck with CIMPictureFill and applying multiple picture fills on one layer?

This is for a personal "fun" project and not production.

AnneFitz · Answer

Hi @GeoJason - I would love to hear if you've noticed any improvements in your app after updating to version 4.26 of the JavaScript SDK. We made some significant improvements to geometric effects (specifically buffer and offset) this past release. Let me know - thanks!

GeoJason · Answer

I created a fantasy world in ArcGIS Pro. I applied John Nelson's My Precious style to my project and I love the outcome. However, I want a dynamic map to share on my website. I struggled with the styling a lot and had to stray from the original John Nelson style for technical reasons. CIM in the JS API 4.x is just not quite there yet. Here are some sample pictures. 
John Nelson's style in ArcGIS Pro:

Note the beautiful coastal lines that look hand drawn...

CIMGeometricEffect buffer or offset creates really jagged line effects. I was able to use that offset jagged effect to create the color gradient off the coastlines. 
This is a quick screenshot of zooming into a coastline before the map re-renders. These lines

Here it is after it renders

When I clean up my code, I will share the CIM here in case others want to apply it to a JS map.

AnneFitz · Answer

Hi @GeoJason - here's an example of a polygon CIMSymbol with multiple CIMPictureFill symbol layers: https://codepen.io/annefitz/pen/YzvzOWm?editors=1000

Hope that helps – let me know if you have any further questions!