3D map with buildings / geojson data

I am working on project that visualize some data on a 3D Map based on OSMbuildings, and I choose babylon to use physics! The question is how to put the map as a ground for all the scene?

PS: I am working with vue js, but I didn’t use vue-babylonjs yet.

Hi Lok… welcome to the BabylonJS forum.

BabylonJS often uses ‘height maps’ for its terrain, and sometimes ‘displacement maps’.

Here is an example height map… from the EXAMPLES pull-down list… of our ‘playground’ app.


Here are the docs: Create Set Shapes - Legacy - Babylon.js Documentation

We have over 500 examples of height map scenes… in our playground database.


Generally, two files/datasets are needed. One is a gray-scale image that is used for the terrain elevation values, and the other is the terrain texture.

So, get your map data converted-to one of the BJS-allowed file formats, and all should work well for you. I don’t know anything about ‘vue’, and BabylonJS is not a data format converter.

Here’s a terrain that uses applyDisplacementMap… https://www.babylonjs-playground.com/#2Q4S2S#21

I hope I have been helpful. :slight_smile:

Thank you so much for your reply, I appreciate all the effort to explain all the details :slight_smile:

So the point is, to practise the 3D map based on OSMbuildings (as it’s shown on the picture). OSMbuildings I was looking and trying but I found the only way is to put a texture to have the ground as I want, I checked also this example, unfortunately it was impossible to load the tiled map that I am looking for. After all, it’s my first time that I am using babylon, so I would like to know about it more if there is any solution to move forward.

Ah, ok, my mistake. I wasn’t on-topic very well. Sorry.


There’s a webGL version, I think… but not BabylonJS. link to src. You probably already know about that.

Anyway, I don’t have much info about Open Street View, my apologies. Let’s listen for more replies.

I guess the problem is how to load the geojson data, cuz I have the tiled map using this code:

 material.diffuseTexture = new BABYLON.Texture(
                "https://a.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/" + zoom + "/" + (xTileBase + col) + "/" + (yTileBase - row) + ".png",

but how to load the json data (geo buildings) to have everything as a ground, I don’t know :frowning:

Nod. Have you been to Kostar’s offsite tutorials, yet?


All three links look delicious, and one of those links is to a three-parter tutorial in itself. He talks quite a bit about processing “land grabs” :slight_smile: And, he used BJS all the way. (yay!)

Maybe @brianzinn could give us some hint here ? I remember him doing some city viz if I remember well.

1 Like

this is exactly what I mean https://www.youtube.com/watch?v=OR561rc5VG0

Sounds like an interesting project. Currently I know nothing about osmbuildings and would like to know more about how the the 3d tile format works. Would you try an experiment for me?

In this playground (PG) Babylon.js Playground replace the url “textures/grass.png” with an url that points to an actual tile eg one like

"https://a.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/" + zoom + "/" + (xTileBase + col) + "/" + (yTileBase - row) + ".png"

but with values in where needed. Then save and post this new PG in this topic, even if there is an issue with the PG. This will give us a starting point.

here you go :slight_smile:
and here with multi tiles

Next could you give a link to url for the json data (geo buildings) for this map (just one tile would be OK)

Also if it is not clear from the json data could you explain the data represents location and heights?

here is the data of buildings.

So now you have the map image and building data into a playground https://www.babylonjs-playground.com/#WAPC7U#2 -check console to see building data and note for JSON file you must use https: (secure option)
You need to

  1. relate the map and the building data
  2. understand how the building data defines a the heights of a building at a given location.
  3. relate this information to producing a 3D shape in Babylon.js.

You will know more about 1 and 2 than I will though others might help.

Explaining 1 and 2 will help us to help you with 3.

Thanks a lot, I will try how to relate the map with buildings andlet you know :wink:

The map could be the whole scene? it was unexpected result to have it as a ground. Using it as a textures wont be able to zoom the map or move arround like here https://osmbuildings.org/

Regarding the buildings, should I convert the geojson data? or better asking how is it possible to render those data in babylonjs. I am wondering beacuse the data is made by latitude/longitude coordinates!

The suggestions of @JohnK seem a nice start, @Lokamidou.

In case you’re still wondering about zooming and moving around, feel free to check this thread: Moving through a tiled map … many thanks to @Deltakosh for the help.

Please keep me informed. I have similar Q’s about placing buildings on my map, using OSMbuilding or some other neat trick. The json from OSMbuilding is quite a challenge for me to process and generate meshes…

1 Like