# 3D GeoTile: Dynamic Tile-Based Rendering Engine with three.js & OpenStreetMap

**URL:** <https://discourse.threejs.org/t/3d-geotile-dynamic-tile-based-rendering-engine-with-three-js-openstreetmap/79325>\
**Category:** Showcase\
**Created:** [March 10, 2025, 6:18pm UTC](https://discourse.threejs.org/t/3d-geotile-dynamic-tile-based-rendering-engine-with-three-js-openstreetmap/79325 "2025-03-10T18:18:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![w1tsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w1tsky/32/57515_2.png) [@w1tsky](https://discourse.threejs.org/u/w1tsky)\
**Post date:** [March 10, 2025, 6:18pm UTC](https://discourse.threejs.org/t/3d-geotile-dynamic-tile-based-rendering-engine-with-three-js-openstreetmap/79325/1 "2025-03-10T18:18:17Z")

</div>

I developed **3D GeoTile** as a practical exploration into efficient 3D geographic visualization. The project uses three.js for advanced WebGL rendering and integrates geographic data directly from OpenStreetMap via the Overpass API. Key aspects include:

- **Dynamic Data Integration:** It fetches live OpenStreetMap data with caching mechanisms to ensure data remains current without overwhelming the network.
- **Efficient Tile-Based Rendering:** The engine breaks maps into individual tiles, enabling smooth zoom and pan interactions even with large datasets.
- **User-Centric Adjustments:** The map view automatically centers based on the user’s location, making the experience tailored and responsive.

This project serves as a showcase of combining real-time data fetching, optimized rendering techniques, and personalized user experiences within a 3D web environment.

**Demo** : [Sprayer](https://sprayer.planetor.dev/main)

---

<div class="post-metadata">

**Author:** ![w1tsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w1tsky/32/57515_2.png) [@w1tsky](https://discourse.threejs.org/u/w1tsky)\
**Post date:** [March 13, 2025, 6:09pm UTC](https://discourse.threejs.org/t/3d-geotile-dynamic-tile-based-rendering-engine-with-three-js-openstreetmap/79325/2 "2025-03-13T18:09:42Z")

</div>

Some screentshots:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/4/949a1db32bbab7be69ca61ab755aa3ffd0bed069.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/3/13a6aefaa88f229209469670d3f2bf33f150fd30.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/6777a023e2ee3d07dc924a47b7452ca4c6177fbc.png)

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [March 14, 2025, 1:14am UTC](https://discourse.threejs.org/t/3d-geotile-dynamic-tile-based-rendering-engine-with-three-js-openstreetmap/79325/3 "2025-03-14T01:14:57Z")

</div>

Open Source?