Maps in Augmented Reality with JavaScript

Published Nov 02, 2018

At the TimeMachine conference, the MapTiler Team introduced the very first application showing maps in augmented reality running from the browser without a need to install any mobile app. No need to have a flagship Apple device, it runs on any mobile phone. Try it now!

Three simple steps to get maps in AR on your phone

Step 1: Open on your phone or tablet: maptiler.com/ar

Step 2: Point your camera at the printed sheet or at the picture below

Step3: Watch the magic!

The application works entirely with your computer screen, but you will get even better results if you print the sheet (in colors or on a monochrome printer).

In both cases, you will get a map of Venice you can zoom in and work with as with any other map. The date on the top shows the depicted year as the city development progress during the last 1000 years. It is a prototype of the TimeMachine Atlas project, which has been just announced.

The technology behind this application

Our AR app is in the phase of a tech demo for now, but you can already start building your own with our maps from MapTiler Cloud service. It offers global map data in vector format and hosting for own geodata. They can be turned into tiles using MapTiler Desktop and then uploaded to MapTiler Cloud, styled and used in any application with open-source JavaScript libraries or mobile SDKs.

Our current AR app is built around AR.js library, which is an open-source project using WebGL and WebRTC technology. The same code will run in the future also on devices with native AR support (ARCore & ARKit), once they are exposed via WebVR because our code runs directly in a web browser.

We used modified Mapbox GL JS library for displaying the map. Let us know if you are our customer and want to utilize the code in your project.

Try the Augmented Reality on your device now

The AR application runs on every mobile device with a camera using just the web browsers. Try it yourself at maptiler.com/ar!