Fitting the Alps into an App

Recently, we faced a peculiar dilemma: We wanted to provide a mobile app prototype with an attractive basemap for overview purposes. Our prototype app is focused on Switzerland and we wanted (almost needed, really) to incorporate elevation information in the form of at least a shaded relief. For the intent of this blog post it suffices to say that we wanted to show some real-time position on top of the basemap. The app was geared towards an international audience that doesn’t necessarily have a mobile data plan nor WiFi access at the time when they want to use the app. What gives?

Since our app audience wouldn’t have the opportunity to download basemap data on the go, we thought further: But a) we deemed requiring an additional large (WiFi) download before the first usage as a very unattractive option. On the other hand, we b) didn’t want to bloat the app download by packaging a huge amount of basemap data with it either. A shaded relief at a sensible, non-pixelated resolution wouldn’t come cheap in terms of payload though.

Vector tiles

Thankfully, the Esri ArcGIS Runtime SDK for Android  and ArcGIS Runtime SDK for iOS (Quartz Releases) offered a way out of our dilemma: since August 2015 Beta versions of the SDKs offer the capability of rendering vector base maps. The first production releases of these Quartz SDKs will be released in November 2016, Quartz Runtime SDKs for other platforms will follow soon (Esri ArcGIS Runtime SDKs). In a stroke of insight we came up with the plan to simply incorporate a compact vector version of a shaded relief map.

<audible gasp>

Actually, it’s not as crazy as it sounds: we were pretty sure we could discretize a shaded relief into a handful of classes, generalize it thoroughly (really thoroughly!) and arrive at something attractive and functional and smaller than tiles of a raster shaded relief.

Slimming down the data

The actual process involved an EBP-owned digital elevation model (as the official one is not yet open data, unfortunately, ahem). We computed a shaded relief and after several tries arrived at a promising discretization into merely 5 classes. Additionally, we computed and vectorized 3 elevation intervals, mainly to give the Swiss lowlands some additional elevation information. The workflow involved a mixture of tools: mainly ArcGIS for Desktop, choice functions from ET GeoWizard as well as a hint of FME. The final vector shaded relief comprises a total of 13,714 individual features after rigorous generalization of both spurious features and vertices (we had started out at 27,237).

Styling options

See the results for yourself. A coloured version of the basemap:

And with a set of freely available geodata overlaid (click for larger image):

This is how this version looks on a mobile device (click for large image; iPad Air template file CC-BY Netspy):

Besides these more colorful versions, you can generate a neutral basemap in gray shades to give more attention to the data displayed on it. A vector tiles package containing the basemap below is around 14 MB and thus suitable to be packaged together with the initial app download. In our conservative estimate, an identical image tiles basemap would – at least – multiply this value by 10.

Vectorized relief map: neutral colors for more attention on project data added on top
Vectorized relief map: neutral colors allow for more attention to the data we will put on it in the app

Good usability makes happy users

Not a perfect solution, but it serves our purposes for the prototype app really well and makes use of the latest technologies available from Esri for a light app payload.
Furthermore, vector data looks good at all zoom levels, not only at certain levels which the tiles are generated for, as you experience it with image tiles. As a bonus, the zoom and pan interactions are much smoother with vector tiles compared to image tiles.

With a bit more time on our hands we could certainly refine the process further and iron out remaining kinks. Let us know if you face similar challenges around app development, data munging or user interfaces and would welcome some innovative thinking from our team of analysts and developers. Get in touch!