A WebVR demo that presents OpenStreetMap data in a virtual reality environment right inside the browser.
The VR environment is built with Mozilla's A-Frame library, with some components added to the default set, and sometimes reaching to Three.js underneath to achieve some things that A-Frame doesn't support by itself.
Currently, three types of objects are being displayed:
- Tiles: The ground layer is using OpenStreetMap Mapnik tiles via KaiRo's tilecache server. Each tiles uses a single , sized appropriately for tiles at the given coordinates.
- Trees:
node
s withnatural=tree
tags are rendered as trees, taking into accountheight
,circumference
anddiameter_crown
for sizing as well asleaf_type
for using a standardneedleleaved
orbroadleaved
(for everything else) tree template. - Buildings: Any
way
orrelation
with abuilding
tag is rendered as a building. Its outline (with appropriate holes if required) is extruded to theheight
(orbuilding:levels
multiplied by 3), with a default height of 15m (or outline length divided by 5 if that's smaller).min_height
andbuilding:min_level
as well asbuilding:colour
are respected, but building parts or roofs are not supported (yet).
General limitations:
- The initial center coordinate set is hardcoded. While the code supports GPS coordinates from around the world, the default right now is just outside KaiRo's front door in Vienna, Austria.
- Only a small area is loaded by default and no further data is added as you move around.
git clone https://github.com/plepe/vrmap
cd vrmap
npm install
cp config.yml-dist config.yml
npm run start
Browse to http://localhost:3000
VRMap uses a main process and a worker thread, which have to be compiled separately. Using watch (watchify), the files will be compiled with debug information; also the compiled files will be updated when the source code changes.
npm run watch-main & npm run watch-worker & npm run start
Browse to http://localhost:3000
Open the developer tools of your browser for debug messages.