Open Earth View

From OpenStreetMap Wiki
Jump to: navigation, search


Open Earth View is an open source and promising project. It aims to provide a full 3D web browsing of our world relying on Open Street Map data (and why not more).


TODO list and bug tracker


Web demo here.

Video demo here.

OpenEarthView.png ESB osm2x3d.png
OpenEarthView02.png StPetCat osm2x3d.png


The main idea of Open Earth View is to consider 3D world like Open Street Map for 2D world.

Open Street Map -> 2D tiles

Open Street Map -> Open Earth View -> 3D tiles

3D tiles is a 3D "block" with all 3D object element owning to this block.

Input data

Input data are:

  • *Open Street Map* (xml) for the raw data and for tile surface.
  • any *elevation data* web service (basically coming from SRTM, with web API access like with MapQuest).
  • *3D object* service, like
  • *textures database*.
  • *skybox* (for any "3D Open Street View" feature).


  • 3D tiles (geojson, X3D, X3D json)
  • X3D scene
  • three.js scene

Several components have been identified to reach the promising Open Earth View solution.

Concept 1 - OSM to 3D

OSMEdition.png => 3DRendering.png => 3DRendering02.png

From OSM data (OSM web service), we can extract third dimension infos:

  • building elevation
  • number of floors
  • roof elevation

osmx3d module provides data extraction tools to convert:

  • OSM to GeoJSON
  • GeoJSON to X3D json
  • X3D json to native X3D (xml)
  • GeoJSON data to Geo X3D json data (not yet implemented)
  • GeoJSON data to JSON Geometry format 4 (for three.js, not yet implemented)

Last version is running with nodejs.



GeoJSON format

An internal object format was required to collect all useful information from OSM data. GeoJSON standard did the job. So why not use it?

Example: Empire State Building in GeoJSON

X3D json format

Examples: Empire State Building in X3D json

Native X3D format

Examples: Empire State Building in X3D native (xml)

JSON Scene format 4

Examples: Coming soon...

Command Line Interface (CLI)

You can use converter from shell command line like this:

cd OpenEarthView/osm2x3d/script
cat ~/ESB_light.osm | osmToGeoJson.js
cat ~/ESB_light.osm | osmToX3dJson.js

Concept 2 - 3D tiles

The concept is to rely on "Component 1 - OSM to 3D" cutting world into 3D tiles (cube sharing the same surface as 2D tiles).

Open Street Map representation uses mainly 2D tiles (tile server), relying on:

  • parameters:
    • zoom,
    • latitude,
    • longitude
  • output format: jpg

Open Earth View representation uses mainly 3D tiles, relying on:

  • parameters:
    • zoom,
    • latitude,
    • longitude.
  • output formats:
    • GeoJSON
    • X3D
    • geo X3D JSON

Web service

X3D data requesting the web service like this:

Old version (C++):
* X3D output:

New version (node.js):
* geojson output:
* X3D output    :
* X3DJSON output:

Concept 3 - Level Of Detail (LOD)

The goal is to define what information we are ready to take into account for a given representation.

For instance, if you quickly navigate above New York at about 5000 meters high, you don't need to know the boundaries of the 6th floor of a little building...

The American Institute of Architects (2008), the CityGML standard (Open Geospatial Consortium, 2012) or the BLOM geomatics company defines about five LoDs.

A summary here:

As illustrations:

Standard LOD 0 LOD 1 LOD 2 LOD 3 LOD 4 LOD 5
The American Institute of Architects LoD100.png LoD200.png LoD300.png LoD400.png LoD500.png
CityGML standard CityGML LoD1.png CityGML LoD2.png CityGML LoD3.png CityGML LoD4.png
BLOM3D BlomLOD1.png BlomLOD2.png BlomLOD3.png BlomLOD4.png
Open Earth View
Ground tile X
Bounding box X
Roofs X
Elevation grid X
Textures X
Floors X
Transparency X
SVG indoor X
Zoom level <16 16 17 18 19 >19


LOD convention are already managed by x3dom js lib:


Concept 4 - Ground elevation

Raw data can come from Shuttle Radar Topography Mission database or from more "local" database (national, regional, or from a specific town...).

For instance, MapQuest provides an easy way to request elevation info from it's Open Elevation Service.


Concept 5 - Textures

Relying on OSM key/value solution, the property to use would be building:facade:image.

building:facade:image key would match to an url that would be the texture to apply to a whole building or only on a building part.

Here is a suggestion to be able to add textures to buildings:

  • step 1: generate a pattern to segment a rectangle.
    • rectangle height = building(part) height
    • rectangle widht = building(part) perimeter
  • step 2: apply the texture to the pattern
  • step 3: let the engine do the job...

step 0 - Flat polygon

FlatPolygon.png OSM data - building flat polygon

step 1 - Pattern generated

PatternGenerated.png Pattern generated

step 2 - Flat texture

FlatTexture.png Flat texture

step 3 - 3D result

3dResult.png 3d result

Concept 6 - Third party 3D objects

The goal here is to let any user import/export a 3D object.

This could be done either relying on OSM key/value principle and by using an external database.

My suggestion is to provide a URL to a X3D object (json format).

OpenBuildingModels (OSM-3D)

Promising project but I've never succeded in using their services...

OpenBuildingModels suggest to use building:obm OSM key as an identifier to a 3D building model in Open Building Models database.

Open Building Models suggest to provide a web service to upload/download 3D object.

The web service that should work is documented here

Kind of request that could be useful (if available):,6572361.3988,790664.6134,6572972.895&layers=Buildings


Concept 7 - Indoor building navigation

This is based on svg 2D file, applying height extrusion:

Indoor svg.png


Concept 8 - Panoramic 360 view

We can apply the principle of "cubemap" or "skybox" for an immersion inside a place, indoor or outdoor. With that principle, we place the viewpoint in the center of a cube, giving the sensation of a real world around.


Just click on one of the cubemap below:

Sistine cubemap.png Nvlobby all6.png Cubemap forest.png
Demo musee Demo nvidia Demo forest
Source code Source code Source code

Other démo:


X3D Specifications



Concept 9 - Real time events

This part aims to explain how we can monitor real time events in a 3D world.

The principle is to rely on an external event server that send json data with these info:

  • Point of Interest (P.O.I) identifier
  • State


  • a door open
  • an elevator at the 3rd floor
  • a fire sensor activated

Then, a behaviour must be defined for each case.


  • Anti-intrusion system: flashing building, flashing floor, flashing window, etc...


General architecture

Browser side

Client side is a web browser, able to make run webgl features. Javascript is use to initialize 3D Scene with earth as a sphere, and to manage earth tiles position and loading.

  • Tool: web browser
  • javascript: x3dom or three.js

Server side

Web server relies on nodejs. The main feature is to call osmx3d converter to convert Open Street Map data to 3D elements. The atomic element is 3D tiles.

  • NodeJS

a-frame solution

And now has come a-frame. THE solution to adopt at the very moment !

A very simple example:

Example: a-frame simple example

x3dom solution

Using X3D format (json or xml), data from OEV web service canon be dynamically loaded.

Loading X3D xml data

X3D xml data can be loaded by including "inline" xml document defining url to OEV web service.

Loading X3D json data

X3D json data can be loaded by using Json loader provided here.

three.js solution

Using Three.js json geometry and object format, data from OEV web service can be directly loaded with THREE.JSONLoader() function.

As an example to start with earth rendering:

Offline 3D viewers


X3DEdit allow to render and validate X3D data.

offline web browser

OEV has its own bower project to render data generated offline in a web browser.

2D viewers

geojson data viewers

Leafletjs canon load geojson data as explained here.