ArcGIS Maps SDK for JavaScript

Watercolor your city (on the web, no paint involved)

I dare to say that everyone loves watercolor. It’s beautiful to look at and it gives a warm, fuzzy feeling. For those of us without much watercolor talent, John Nelson comes to the rescue: we can apply the styles he created to our own data in ArcGIS Pro and then we can share them to ArcGIS Online as a web tile layer (disclaimer: the symbology is not supported if we publish them as a vector tile layer or as feature layer).

The city of Cambridge, Massachusetts publishes as open data all the data needed to create a basemap (and much more). So I loaded it in ArcGIS Pro and applied some of the watercolor styles. I modified a bit the styles, I always go for more saturated colors in 3D to compensate for the lighting that sometimes makes the basemap slightly darker.

A screenshot of ArcGIS Pro, where watercolor styles are applied.

I grouped all of the basemap layers and I published the group layer as a web tile layer. In SceneViewer I then added the buildings, the trees and the labels for the parks. Let me tell you about two small tweaks I made:

Tweak no 1: I added John Nelson’s paper texture layer (and like any good cartographer, I added it twice to make the effect even stronger) and grouped it together with the watercolor tile layer. On the watercolor layer I set the blend mode to ‘multiply’ and like this I get the “this map is painted on a paper” effect.

Same image of watercolor basemap with and without a paper texture

Tweak no 2: With drawings/watercolor we move away from realism and dive into an abstract world. My abstract world usually gets a lot of light, so I set the “virtual lighting mode” by unchecking the “Sun position by date and time” in the Daylight widget. I also disabled the shadows because they are too dark and don’t play well with the transparent trees.

The image shows a visualization of a city using virtual lighting and realistic lighting.

With this webscene, I created a small web application that shows a possible proposal for a park in Cambridge, Massachusetts. I think such project proposals work great with this style. You can interact with the application below or explore the web application in full screen here.

Thank you to Cambridge’s GIS team for making all these awesome datasets available. And in case you make some nice basemaps using their data or use this tutorial for some watercolor web projects, I’d love to know!


About the author

Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.

Notify of
Inline Feedbacks
View all comments

Next Article

Accessibility essentials for GIS and mapping

Read this article