Select to view content in your preferred language

Trying to recreate John Nelson's fantasy style in JS

569
3
10-25-2022 12:27 PM
GeoJason
Emerging Contributor

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. 

0 Kudos
3 Replies
AnneFitz
Esri Regular Contributor

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!

GeoJason
Emerging Contributor

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:

GeoJason_0-1667957238573.png

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

GeoJason_1-1667957427258.png

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 

GeoJason_2-1667957640940.png

Here it is after it renders

GeoJason_3-1667957732774.png

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

0 Kudos
AnneFitz
Esri Regular Contributor

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!

0 Kudos