Draw on 3D WebGL map with 3D terrain and buildings?


I’m pretty new to OSM (other than using the app and I’ve looked into Leaflet 2D maps) and I’m struggling to find an answer to my question. Hopefully it won’t be a commonly asked/answered one that I’ve missed.

What I’m looking for:

  • Web technology/WebGL

  • 3D map with 3D terrain. Added bonus for 3D buildings, trees, etc.

  • On this map I’d like to be able to draw 3D paths/GPS tracks with height data.

  • I want to be able to “fly around” and look at the paths that are drawn.

I’d like it if the resources and technology used are all open source.

Is there an obvious solution/answer to this?

I’ve done some searching and found:

The two first doesn’t seem to have 3D terrain?

F4 has really cool maps, but is closed source? https://wiki.openstreetmap.org/wiki/F4_Map

Google also has really good maps, but isn’t exactly open and I’m not sure if you even can draw 3D paths on web.

Currently there is no provider for a pure 3d representation which you only need to render: https://wiki.openstreetmap.org/wiki/3D_Development
To bypass all the experiences you need to interpretate the tagging schema in a proper way, you might want to use osm2world to create a 3d representation and build up a tiling mechanism on top.

There is also the 3dcitydb folks, which make use of caesium.js for 3d client rendering and serve citygml files / tiles. But currently we don’t have a converter osm->citygml.

Your best bet is probably Cesium, which is pretty much the closest 3D equivalent to Leaflet. Can do everything that was mentioned, except it doesn’t ship with 3D models for buildings and such. (Although it could display them if you had a service that provides such models in their “3D tiles” format.)

Thanks. I think I’ll be looking into CesiumJS.

Another possibility: Since I’m mostly interested in a local area (a few square km max) I’ve considered looking into three.js. Then I guess I could render only the area I’m interested in. But it’s not really clear to me where I should get the data from in this case. Could I get tiles from OSM, but I’d have to get terrain data from something like SRTM?

Sorry if these questions are stupid ones, but the whole mapping toolset/environment with it’s possibilities is a bit overwhelming for me at the moment.

I guess this is not entirely what you want, but ESRI’s free “ArcGIS Earth” application (https://www.esri.com/en-us/arcgis/products/arcgis-earth/overview) can easily ingest 3D KML and drape OpenStreetMap over a global terrain dataset, see the screenshots. If you convert your GPX tracks to KML (e.g. I tested this service which worked fine: https://gpx2kml.com/), then you are all set and done without programming.

Only caveat is that you will need to register yourself at the ESRI website. Other than that though, it is a nice app.

Note that the red displayed GPX track near Davos, Switzerland, was directly downloaded from the OpenStreetMap servers, using the instructions for JOSM I found here in the OpenStreetMap Help Forum: https://help.openstreetmap.org/questions/52196/how-to-download-a-gpx-track/52201

By the way, there is also an equivalent mobile phone version, that circumvents the need to register at the ESRI site. Just type “ArcGIS Earth” in Google Play store (there is an iOS version as well). The navigation gestures are explained here:


I needed to look that up because I couldn’t figure out how to tilt to see the landscape in 3D in the mobile app…

Thanks for the tip!

I would like to not use an external service/register anywhere though.

Currently I’m looking into using three.js and maybe using osm tiles for the ground. Haven’t used three.js before, so it’s a learning curve.

I have this for now (it’s a skydive):

Visualizing a glider in a 3D geo world looks like a high level task for starting with a 3D engine. Why not considering a more dedicated approach as NASA worldwind? https://worldwind.arc.nasa.gov/

No love for https://deck.gl/#/ ?