How to create a 3D winter basemap with ArcGIS Maps SDK for JavaScript
I was recently investigating how to show a winter landscape in a 3D interactive web scene. I had a lot of inspiration from John Nelson's blog post and video on this topic, James Niehue's beautiful paintings of winter landscapes and, of course, nature itself:
My goal with this project was to create a basemap that sends across that feeling of winter. We don't want it to be realistic, but also not too artistic because the basemap shouldn't steal the show. On top of it we might want to add data for a snowshoe hike, or a ski resort. So here's what I came up with:
A video of the basemap. You can see the basemap in the web application here.
All right, if I've sparked your curiosity, let's see if I can get your attention: how can we create the basemap?
Short disclaimer at this point: we can't create it in ArcGIS SceneViewer (yet), it uses a custom layer that can only be created with ArcGIS Maps SDK for JavaScript.
In my experiments I played with a combination of white for the sun-lit areas and blue-purple for the areas in the shade. To achieve this effect, we can use an ImageryTileLayer with elevation data with a RasterStretchRenderer that goes from blue to white (see code on GitHub).
Next we want the terrain shading to have a purple hue. So we'll use the world terrain shading layer, load it in a BaseTileLayer and apply CSS filters on the tiles before they are drawn. We will rotate the hue by 190 degrees, to have a purple tone instead of the beige-gray color. We'll also apply saturation, to make it stand out more (see code on GitHub).
Optionally, we can generate a layer of trees for the displayed area and add 3D buildings (available from Swisstopo).
Click here to try out the live application: Winter landscape. Clone the GitHub repo and modify it to add your own data on top of it.. or just enable the snowy weather and the music and enjoy the virtual winter 🙂 In any case, I'd love to know how you used it.
Happy mapping,
Raluca