# 3D (Geo) Map (with building) "background"-layer

**URL:** <https://forum.babylonjs.com/t/3d-geo-map-with-building-background-layer/39376>\
**Category:** Questions\
**Created:** [March 27, 2023, 8:11am UTC](https://forum.babylonjs.com/t/3d-geo-map-with-building-background-layer/39376 "2023-03-27T08:11:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdillen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gdillen/32/30963_2.png) [@gdillen](https://forum.babylonjs.com/u/gdillen)\
**Post date:** [March 27, 2023, 8:11am UTC](https://forum.babylonjs.com/t/3d-geo-map-with-building-background-layer/39376/1 "2023-03-27T08:11:11Z")

</div>

Hello,

I would like using BabylonJS for visualising digital twin information.  
Since my use case is geo-based, I would like having a 3D-Map (eventually with building info) as the “background”-layer.  
Its’ not clear to me if I, e.g., by using Blender, need to export a subset from a map and use that in BJS?  
Or, can I “link” to e.g., Mapbox or other to have access to a “complete” map?  
Any pointers into the direction of using a 3D-Map (eventually with building info) with BJS would be more than welcome.

Thanks.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 27, 2023, 9:11am UTC](https://forum.babylonjs.com/t/3d-geo-map-with-building-background-layer/39376/2 "2023-03-27T09:11:50Z")

</div>

Welcome aboard!

This thread should help regarding integrating mapbox with Babylon.js:

> [@Babylon in Mapbox Layer](https://forum.babylonjs.com/t/babylon-in-mapbox-layer/9328):
>
> I would like to make the same as [this example with Three.js](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) but with a Babylon renderer instead :p… It works but I think BABYLON is still handling touch events (scrolling zoom works) : [[Edit BABYLON]](https://codesandbox.io/s/github/fabsharp/mapbox-babylon/tree/master/?fontsize=14&hidenavigation=1&theme=dark) (I can’t make a Playground because 3D context is provided by mapbox) onAdd: function(map, gl) { this.engine = new BABYLON.Engine(gl, true, { doNotHandleTouchAction : true, preserveDrawingBuffer : true, }); this.scene = this.\_c…

And:

> [@Incorrect rendering of model geometry after changing the position on the map (mapbox + babylon.js)](https://forum.babylonjs.com/t/incorrect-rendering-of-model-geometry-after-changing-the-position-on-the-map-mapbox-babylon-js/31494/4):
>
> Thanks for your reply! I’m not really sure how i can reduce these numbers, because it is a real world coordinates. I convert geo coordinates into the projected mercator coordinate with mapboxgl.MercatorCoordinate.fromLngLat and then calculate the position of each 3D model relative to the original coordinates. The same i did using Three js and didn’t face with such issue… Anyway, i found other solution that fixed this issue for me. I recalculate projection matrix and position for drone on eac…