ArcGIS Online

How to add mist to terrain in ArcGIS Online

There are lots of reasons to cloak your terrain in a fluffy ephemeral layer of mist. It gives an overall sense of the slope and elevation trends in your view, it showcases meandering river valleys in a charming realism, hilltops peak through with clarity and drama…and it just provides a strange emotional buzz. Clarity through shrouding. Knowledge through obfuscation. It shouldn’t work, but it does.

Here’s how to wrap your ArcGIS Online map in an intriguing layer of fog…

0:00 Preview
0:11 Adding the elevation feed from Living Atlas
0:35 Inverting the grayscale gradient so white is at the bottom
1:06 Screen blend mode to en-mistify the elevation
1:30 Transparency and Gamma to tweak the effect

Here are some before-after examples of adding mist to ArcGIS Online (over the World Imagery basemap).

ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap with a hauntingly intriguing mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap with a terrain-informing mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap with a silky smooth mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap shrouded in a handsome mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap blanketed in a ghostly mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap boasting a cool mist effect.
ArcGIs Online imagery basemap without the glorious mist effect.
ArcGIs Online imagery basemap rocking a valley-clinging mist effect.

Give it a shot! You should know, that because the elevation layer is an image service it will fetch the whole map view as a single image. Unlike the rapid fetching of tiles, this might take a moment. But if rapid rendering performance isn’t your goal, then this tradeoff might be well worth it.

But if you are savvy with JavaScript, you can do all sorts of things with tiling and rendering. Check out this demo Yann Cabon, of the JavaScript API team, just shared with me: https://developers.arcgis.com/javascript/latest/sample-code/layers-imagerytilelayer/

And here’s a demo from Jeremy Bartley showing dynamic range rendering of tiles (I didn’t know you could do that!), using elevation data on the Iberian Peninsula: https://jsapi.maps.arcgis.com/apps/mapviewer/index.html?webmap=180fb4ca13e4477bb6a5f87ccefe1575

If you are wondering how to do this in ArcGIS Pro, here’s a one-minute video.

Always learning and frequently surprised! Have fun with this method and breathe some terrain energy into your maps.

Love, John

About the author

I have far too much fun looking for ways to understand and present data visually, hopefully driving product strategy and engaging users. I work in the ArcGIS Living Atlas team at Esri, pushing and pulling data in all sorts of absurd ways and then sharing the process. I also design user experiences for maps and apps. When I'm not doing those things, I'm chasing around toddlers and wrangling chickens, and generally getting into other ad-hoc adventures. Life is good. You might also like these Styles for ArcGIS Pro: esriurl.com/nelsonstyles

Connect:

Next Article

Harnessing the Power of Imagery: A Programmatic Approach

Read this article