Table of Contents

VR Map - OpenStreetMap goes WebVR

The following slides are available in this presentation:

VR Map: Using OpenStreetMap Data in WebVR

Simple GeoData Visualization with A-Frame

Robert Kaiser, "KaiRo" <>
Mozilla Tech Speaker


  • Created for a presentation at DACHFest 2018 in Munich.
  • Written in HTML 5 with CSS 3 and JavaScript.
  • Navigation via links on all slides, via access keys (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys
  • Contents
  • Lizenziert unter CC-BY-SA, 04-11/2018 Robert Kaiser - "Mozilla", "Firefox" and their logos are trademarks of Mozilla Foundation.


VR headset user

WebVR & WebXR

VR headset user

VR Map

VR Map in 2D

VR Map in 2D

Code Basics

VR Headset user with Mozilla logos

A-Frame - XR Made Simple

A-Frame - aframe-io Example:
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 0 0" …>
    <a-animation attribute="rotation" … to="0 360 0"></a-animation>
  <a-cylinder position="1 0.75 1" …></a-cylinder>
  <a-plane ></a-plane>
  <a-sky color="#ECECEC"></a-sky>

edit/view - More at

Code Details

VR Headset user with Mozilla logos

Objectives - Recap

VR headset user

Make It Your Own



VR Map in 2D