From OpenStreetMap Wiki
(Redirected from Open Earth View)
Jump to navigation Jump to search

OpenIndoor comes from Open Earth View project. It has been moved from no structure to a Company, with a same name (OpenIndoor).

Source code here:

Demo here:

Web site here:


OpenIndoor is an open source project. It aims to provide a full 3D web browsing of our world relying on Open Street Map data (and also private data source).

Sources code

TODO list and bug tracker


Web demo here

OpenIndoor app screenshot
OpenIndoor app screenshot


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

Open Street Map -> 2D tiles

Open Street Map -> OpenIndoor -> 3D tiles

It massively relies on mapbox vector tiles and extrusion feature.

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).


  • geojson/mbtiles/mvt
  • mapbox scene

Several components have been identified to reach the promising OpenIndoor 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


  • osmium
  • python libs like geopandas (shapely and pandas together)

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:
    • overpass openstreetmap json

Web request

JSON data requesting the web service like this:

Command Line Interface (CLI)

You can use converter from shell command line like this:

wget ''\
'out center;'

Response example

Reply example:Response format: Le Louvre / Paris - 16/33193/22545.json

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
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


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, MapZen provides an easy way to request elevation info from it's Mapzen Terrain Tiles.

Les alpes.png


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 3Dtile 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
Source code Source code Source code

Other demo:




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: three.js

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

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.