https://hack.glam.opendata.ch/project/128

Swiss geodata (cartographic, topographic, toponymic), once Switzerland's most protected data (for reasons of military defence), have become freely available in the past years. At the same time webtech has greatly evolved. Today mobile webpages can access many of the hardware components built into modern smartphones, such as camera, gyroscope, and compass modules. This allows for coding Augmented Reality apps that will run in any web browser and on any smartphone.

MONT is a Augmented Reality web app coded in "vanilla" JS. It is a proof of concept in order to demonstrate that AR applications for mobile phones can be done just by using open technologies such as HTML 5 (CSS 3, Javascript ES 6).

Processing

After geolocating the app processes a digital height model of Switzerland and interpolates the current height above sea level. It then triangulates the mountain peak or hilltop in question (horizontally and vertically) and searches the mountain database in order to determine the precise peak the user is pointing to.

Tech

MONT is coded in Javascript only ("vanilla" JS, hence no external dependencies, no frameworks, no libraries, no third-party services of any kind). MONT is a so-called flat-file webapp, which means that the required data (digital height model, toponymy and georeferences) are stored in JS arrays (instead of a database) that are cached by the web browser, so that the app, once loaded, will also work in offline mode.

Data

• Digital height model of Switzerland (200m grid)
• Swiss geographical Names (georeferenced)

Compared to programming native applications for specific platforms, using web technologies has two major advantages.

1. Cross-platform compatibility: Functionality and design will work across all platforms, no matter what operating system (or device).
2. No app installation: Developers do not need any app distribution service or app store. As soon as the web app is uploaded to a web server, it is accessible to any user. A link or a qr code is everything needed.
   

Yet, there are a couple of downsides to the MONT project.

1. Compass heading (1): The HTML geolocation API according to the W3 web standard includes a heading property indicating the user's (i.e. the smartphone's) absolute orientation in degrees. Yet, despite of being part of the web standard this property has never been implemented. The heading property retrieved by the getCurrentPosition() method returns null.
2. Compass heading (2): iOS and Android handle web browser access to orientation data differently. While iOS delivers absolute compass data (by means of the non-standard webkitcompassheading property), Android only delivers rotation data that set 0 (i.e. North) to the direction the smartphone was heading towards when the page was loaded.
3. Sensor inaccuracy: Motion and compass sensors (magnetic compass module, motion sensors/gyroscope) built into modern smartphones are quite inaccurate. While there can be several mountain peaks within one single compass degree (especially given the MONT reach set to 20 kilometers), even a slight inaccuracy can lead to false results. This may change with future improvements to sensor technology.

Design

Iconography

Credits

Swiss Federal Office of Topography (swisstopo)

‍