# Bing map 3d terrain to babylonjs

**URL:** <https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036>\
**Category:** Demos and projects\
**Tags:** height, heightmap, bing-map\
**Created:** [January 24, 2022, 4:11am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036 "2022-01-24T04:11:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [January 24, 2022, 4:11am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/1 "2022-01-24T04:11:55Z")

</div>

Hello, buddy, I have implemented an online tool to import the terrain of Bing 3D map into the babylonjs scene. You can customize the tile size, accuracy and range. This tool can help you automatically exclude the watermark part and automatically splice tiles. Welcome to try;

fastBingMap： [http://fastmap.xidayun.com/](http://fastmap.xidayun.com/)  
Tips：you need to register the Bing map key  
video：[Bing map 3d terrain to babylonjs - YouTube](https://www.youtube.com/watch?v=mi8zUMMNpgE)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [January 24, 2022, 4:20am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/2 "2022-01-24T04:20:55Z")

</div>

As far as I can see it is possible to put the result directly into the Playground, this is really great.  
Could you share a PG example?

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [January 24, 2022, 4:44am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/3 "2022-01-24T04:44:15Z")

</div>

ok，Texture is Base64，Loading may be a little slow

> **[Babylon.js Playground](https://playground.babylonjs.com/#24SZB0)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/1/719ecc66fa3bde98e5efc7cabb0c8e2c3c9c3acb.jpeg)

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [January 24, 2022, 10:08am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/4 "2022-01-24T10:08:12Z")

</div>

can i halo drop in and play some local war?

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 24, 2022, 11:37am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/5 "2022-01-24T11:37:30Z")

</div>

Hello, that’s pretty cool, thanks for sharing. I used the [https://elevationapi.com/](https://elevationapi.com/) so far. I can see you added some game dev friendly parameters which should be helpful.

There is a strange behavior for some parts of the world. I have seen same issue with elevationapi. An example for testing could be Achil island in Ireland. When I map this area the whole model get squeezed vertically. In the elevationAPI only the grayscale height map get squeezed but model is fine. In your case everything get squeezed.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/06489536bb0616f1b65374632932b1d7d741cb25.jpeg)

This is how it should look like:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/5/35677c4f05f0969f59742ae4cf4eb63d0d9d70b7.jpeg)

and coords for the place: [Google Maps](https://www.google.pl/maps/@53.9736488,-10.2062128,14z)

Any ideas whats the problem?

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [January 24, 2022, 12:09pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/6 "2022-01-24T12:09:05Z")

</div>

This is usually caused by the selected coordinates being biased towards the two poles of the earth. In fact, I set a square area, but in different areas, I observed that there seemed to be different lengths and widths of rectangles, which should be related to the definition of longitude and latitude. I’m not an expert in geography. Therefore, I can’t explain the specific reason. One possibility is that the area you framed is not squeezed, It’s stretched on the 2D world map

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 24, 2022, 12:11pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/7 "2022-01-24T12:11:32Z")

</div>

I played a bit more. This squeezed square happens everywhere. Another thing is, can the water contour detection be turned off? It doesnt deal well with lakes, get some weird artifacts…  
One way to get around the squeegeeing is to manually adjust the width (I am not sure whats the right ratio but used 2x).

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 24, 2022, 12:14pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/8 "2022-01-24T12:14:21Z")

</div>

Thanks, would be cool to figure that out and have it as parameter or something. As I mentioned earlier I can manually adjust the width which is nice.

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [January 24, 2022, 12:18pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/9 "2022-01-24T12:18:28Z")

</div>

This operation is due to the need to manually calibrate the errors between the conventional map and satellite map of the Bing map API. If there is no water in the selected area, ignore the settings and click OK.

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [January 24, 2022, 12:19pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/10 "2022-01-24T12:19:50Z")

</div>

Allow me to continue to explore the API of bingmap 😃

---

<div class="post-metadata">

**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\
**Post date:** [January 24, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/11 "2022-01-24T12:26:25Z")

</div>

Thanks, great job putting it all together.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 24, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/12 "2022-01-24T12:26:50Z")

</div>

Awesome project 🙂

Just wanted to add that bing maps is actually using babylonjs in their 3d view feature. Example:

[Bing Maps - Directions, trip planning, traffic cameras & more](https://www.bing.com/maps?osid=dc119d3a-90d5-42b2-a80c-ac02a7bc7835&cp=40.689722~-74.049854&lvl=16&imgid=b935aca5-455d-4498-b4ee-8a997c969819&v=2&sV=2&form=S00027)

click this square thingy:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/e/7ecd881635e6175147ba132f1cb2c2a7fe727214.jpeg)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 2, 2022, 11:52am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/13 "2022-02-02T11:52:14Z")

</div>

Very cool project! 😃

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [March 31, 2022, 8:48am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/14 "2022-03-31T08:48:14Z")

</div>

GLB file export is supported. 😃

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/e/be2f94fbe9480f7553e9624ebdf7a93e45f278e9.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/0/90612c6db75573ffca5ce6ef47fae0ba13b3f9ea.jpeg)

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [March 31, 2022, 9:29am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/15 "2022-03-31T09:29:04Z")

</div>

Now you can modify the model in any editor that supports GLB to make it more suitable for your use scenario. For example, in blender

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/e/3ef248b3027acb0e24996e1b8c559419d4763662.jpeg)

---

<div class="post-metadata">

**Author:** ![Treedbox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/treedbox/32/20615_2.png) [@Treedbox](https://forum.babylonjs.com/u/Treedbox)\
**Post date:** [April 16, 2022, 11:30am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/16 "2022-04-16T11:30:42Z")

</div>

- “Download Baboylonjs Code” OK;
- “Download GLB file”, error:

```auto
KHR_materials_iridescence.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isEnabled')
    at KHR_materials_iridescence.postExportMaterialAdditionalTextures (KHR_materials_iridescence.ts:42:45)
    at _Exporter._extensionsPostExportMaterialAdditionalTextures (glTFExporter.ts:257:42)
    at glTFMaterialExporter.ts:390:45

```

---

<div class="post-metadata">

**Author:** ![Treedbox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/treedbox/32/20615_2.png) [@Treedbox](https://forum.babylonjs.com/u/Treedbox)\
**Post date:** [April 16, 2022, 11:49am UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/17 "2022-04-16T11:49:11Z")

</div>

Also the created “Baboylonjs Code” meshList is not working:

> **[Babylon.js Playground](https://playground.babylonjs.com/#24SZB0%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [April 16, 2022, 12:14pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/18 "2022-04-16T12:14:30Z")

</div>

GLB file export has been repaired, please try again 😀

---

<div class="post-metadata">

**Author:** ![renjianfeng](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/renjianfeng/32/1188_2.png) [@renjianfeng](https://forum.babylonjs.com/u/renjianfeng)\
**Post date:** [April 16, 2022, 12:32pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/19 "2022-04-16T12:32:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/5/7514436be356229a944ab6f95df917aafe176052.png)  
Your code has duplicate parts. Please remove the duplicate code here and at the end first, and it should work normally.

---

<div class="post-metadata">

**Author:** ![Treedbox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/treedbox/32/20615_2.png) [@Treedbox](https://forum.babylonjs.com/u/Treedbox)\
**Post date:** [April 16, 2022, 12:55pm UTC](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036/20 "2022-04-16T12:55:24Z")

</div>

😅 sorry, my bad, something weird happened when i pasted, it’s ok now:

> **[Babylon.js Playground](https://playground.babylonjs.com/#24SZB0%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

[Next page](https://forum.babylonjs.com/t/bing-map-3d-terrain-to-babylonjs/27036.md?page=2)