# Babylon.js meets Google Maps and Mapbox!

**URL:** <https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923>\
**Category:** Demos and projects\
**Created:** [October 12, 2025, 6:46pm UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923 "2025-10-12T18:46:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 12, 2025, 6:46pm UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/1 "2025-10-12T18:46:05Z")

</div>

Hey everyone!

I’ve been experimenting with Google Maps’ `WebGLOverlayView` and managed to get **babylon.js** rendering directly inside the map’s WebGL context. The babylon.js scene stays perfectly synchronized with the map’s **tilt** , **zoom** , and **heading** , so you can render 3D content that feels truly “anchored” to the real world.

EDIT: Now support Mapbox as well!

**It’s not just a simple overlay! Your babylon.js scene is rendered directly into the GL context of the map. As you can see our cube is part of the google maps 3d layer**

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

This is an early version, but it already does what I need for my project. If there’s interest from others, I’d be happy to polish it further, improve the API, add docs and maybe even turn it into a reusable npm package (maybe an addon? @Deltakosh)

**Help from the community would be very appreciated as well!**

I’d love to hear your thoughts, ideas, or use cases for this kind of integration!

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

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

EDIT: New repo!

> **[GitHub - RolandCsibrei/babylonjs-maps-gl](https://github.com/RolandCsibrei/babylonjs-maps-gl)**
>
> Contribute to RolandCsibrei/babylonjs-maps-gl development by creating an account on GitHub.

Thanks goes to @Evgeni_Popov for helping me to solve the rendering issues and to @tibotiber for the idea/sample project to implement the Mapbox custom layer.

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 13, 2025, 12:49am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/2 "2025-10-13T00:49:39Z")

</div>

Is it google only, or a general propose tile renderer for any WMTS maps

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 13, 2025, 1:58am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/3 "2025-10-13T01:58:36Z")

</div>

Google Maps only. Potentially could be used after some tweaks if the map exposes it’s gl context and some parameters required to build the camera’s projection matrix.

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [October 18, 2025, 1:31am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/4 "2025-10-18T01:31:25Z")

</div>

This is absolutely amazing. Very good work as always @roland! 👏

For @kzhsw’s question, I know mapbox exposes the gl context as well, so likely a good candidate, and they’re pushing their 3D base maps so it would be an interesting fit. I don’t have time to lead something like this but feel free to ping me if anyone starts something on the mapbox side 😉

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 18, 2025, 3:42am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/5 "2025-10-18T03:42:29Z")

</div>

Thanks a lot for the encouragement and for offering your help with the Mapbox part to the community!

That’s awesome of you! 🙌

Anyway, long time no see @tibotiber … 😉

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 18, 2025, 3:47am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/6 "2025-10-18T03:47:49Z")

</div>

> [@tibotiber](#):
>
> I don’t have time to lead something like this but feel free to ping me if anyone starts something on the mapbox side 😉

If you could set up a small private Mapbox starter repo for me on GitHub (so I don’t have to dig through the docs), I’d be happy to give it a spin and try to add support for Mapbox with the overlay too.

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [October 18, 2025, 7:51am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/7 "2025-10-18T07:51:19Z")

</div>

Sure! Give me a few days and I’ll try to get that going.

Would be cool to have a mini collab finally 😛 .

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 18, 2025, 12:22pm UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/8 "2025-10-18T12:22:32Z")

</div>

> [@tibotiber](#):
>
> Would be cool to have a mini collab finally 😛 .

Can’t agree more 🥂 🤝

---

<div class="post-metadata">

**Author:** ![JacobF](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacobf/32/36046_2.png) [@JacobF](https://forum.babylonjs.com/u/JacobF)\
**Post date:** [October 19, 2025, 12:55am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/9 "2025-10-19T00:55:48Z")

</div>

I have an open source [project](https://hitown.chat) with BabylonJS and Mapbox, I’d love to add maps to my 3D scene editor

---

<div class="post-metadata">

**Author:** ![ntech](https://avatars.discourse-cdn.com/v4/letter/n/e0b2c6/32.png) [@ntech](https://forum.babylonjs.com/u/ntech)\
**Post date:** [October 19, 2025, 11:44am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/10 "2025-10-19T11:44:32Z")

</div>

So, so, so many integrations for this it’s hard to even start. Seriously.

There’s a massive potential there:  
user customization of the map to find the intended place they’re going.  
Customization of business address and advertisement on the map itself from the businesses standpoint.. it could be built as a map service to add reviews, etc, or interact with the business via the customization in certain ways.

So many more too that’s just a start. I’m probably not being clear enough here so I’ll msg when my mind is a little clearer.

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [October 21, 2025, 3:27am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/11 "2025-10-21T03:27:23Z")

</div>

@roland the starter repo is up! I’ve added you as collaborator.

> **[GitHub - tibotiber/mapbox-babylonjs: Use a Mapbox custom style layer to render a...](https://github.com/tibotiber/mapbox-babylonjs)**
>
> Use a Mapbox custom style layer to render a BabylonJS 3D scene

I went with vanilla TS to avoid any framework related issues and make it easy for anyone to pick it up. I don’t think we’ll have a lot of UI (if any) anyway.

I’ve written a super quick README to make things easy to start. I’ll DM you my Mapbox token, so you don’t need to create an account if you want. Then just pop it into the .env.

Let’s play! 🍄

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [October 21, 2025, 12:47pm UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/12 "2025-10-21T12:47:03Z")

</div>

> [@roland](#):
>
> and managed to get **babylon.js** rendering directly inside the map’s WebGL context

🤣 That’s witchcraft! Admit it—there’s a trick behind it somewhere!

If your backdoor into WebGL is real, then Three.js and Babylon.js are just a merge request away. 🤩

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 21, 2025, 3:13pm UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/14 "2025-10-21T15:13:58Z")

</div>

Thanks a lot!  
Seems to use the same principles as the google maps overlay. Let me play with this a bit 😉

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 23, 2025, 5:29am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/15 "2025-10-23T05:29:37Z")

</div>

@tibotiber

MapBox overlay added 😉 It’s a draft version (some stuff like handling context lost is missing, etc.) but you can already try it out. I kept the options for both gmaps and mapbox the same so:

MapBox:

```ts
  const overlay = new MapBoxWebGLCustomLayer({
    map,
    anchor,
    antialias: true,
    adaptToDeviceRatio: true,
    addDefaultLighting: true,
    upAxis: "Z",
  });

  await overlay.waitForSceneInit();
  const scene = overlay.scene;

```

Google Maps:

```ts
  const overlay = new BabylonJSWebGLOverlayView({
    map,
    anchor,
    antialias: true,
    adaptToDeviceRatio: true,
    addDefaultLighting: true,
    upAxis: "Z",
  });

  await overlay.waitForSceneInit();
  const scene = overlay.scene;

```

Check the examples folder.

YouTube video of the overlay in action:

[![](https://img.youtube.com/vi/IPumY2t_FY0/hqdefault.jpg "babylon.js mapbox overlay demo") ](https://www.youtube.com/watch?v=IPumY2t_FY0)

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [October 23, 2025, 5:48am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/16 "2025-10-23T05:48:15Z")

</div>

So cool @roland!

Did you get it working in the starter repo I sent? If yes, could you push your changes? You have collab right on it ;).

Love this

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [October 23, 2025, 6:29am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/17 "2025-10-23T06:29:03Z")

</div>

Has the conversion between latitude and longitude and Cartesian coordinates been achieved?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 23, 2025, 6:34am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/18 "2025-10-23T06:34:58Z")

</div>

> **[GitHub - RolandCsibrei/babylonjs-google-maps-overlay-view](https://github.com/RolandCsibrei/babylonjs-google-maps-overlay-view)**
>
> Contribute to RolandCsibrei/babylonjs-google-maps-overlay-view development by creating an account on GitHub.

It’s here 😎

I’ll rename the repo and update the readme later.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 23, 2025, 6:38am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/19 "2025-10-23T06:38:03Z")

</div>

What exactly do you mean?

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [October 23, 2025, 7:05am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/20 "2025-10-23T07:05:18Z")

</div>

For example, if I need to render a model using babylonjs at a certain latitude and longitude, how can I find the corresponding position in babylonjs based on latitude and longitude

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 23, 2025, 9:28am UTC](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923/21 "2025-10-23T09:28:53Z")

</div>

> [@dalidaliW](#):
>
> can I find the corresponding position in babylonjs based on latitude and longitude

You can use this function. It is located under `google-maps/utils` but will be moved to `common/utils` becuase it can be used with any map which uses spherical mercator projection.

> <https://github.com/RolandCsibrei/babylonjs-google-maps-overlay-view/blob/bf45530d5e7093eff40108422b2d94f374ff9d76/src/google-maps/util.ts#L80>

[Next page](https://forum.babylonjs.com/t/babylon-js-meets-google-maps-and-mapbox/60923.md?page=2)