A 3D Global Map Using Google Map Tiles.

Showcase
, ,
1

I attempted to create a 3D map, similar to Google Maps.

Thanks to ChatGPT and Three.js, I was able to implement the basic functionalities.

Features include:

  • Basic grid rendering with corresponding tile textures
  • Users can set the location they want to visit
  • Users can adjust the current center position and zoom level using controls and Three.js’ OrbitControls
  • Sun positioning and its lighting effects on Earth, allowing for realistic day/night transitions
  • Configurable Google Tiles resolution, language, and type
  • Real-time location measurement
  • Real-time scale indicator
  • Real-time distance measurement from the observation point to the ground
  • Dynamic tile calculation and loading
  • Real-time moon positioning
  • Geolocation support

What were the challenges in implementing this?

First, I had to understand how zoom levels and tiles work in GIS. After consulting ChatGPT multiple times, I got a mostly correct answer. By following its explanations step by step, I eventually achieved the desired results. The key aspects involved:

  • Converting latitude and longitude to Earth-centered coordinates
  • Converting Earth-centered coordinates back to latitude and longitude
  • Calculating tile x, y based on zoom level (z) and coordinates to request the correct tile
  • Computing the grid’s vertices, normals, indices, and UVs for rendering tiles
  • Implementing smooth tile transition animations
  • Efficient tile caching to ensure smooth performance during rapid movement and zooming

This project may seem simple at first glance, but it involves a lot of GIS and WebGL texture mapping knowledge. It took me about a week of exploration to finally present this result to you.

5 Likes
2

Nicely done!
I can see my house! (Or rather, the outline of my house.)
It would be nice if you could load entire globe texture at the further distances so you don’t have to wait for countries to appear. But that is probably just something that will take a little time and optimization. In the meantime, I’m not complaining given what you have accomplished at the closer distances.

1 Like
3

yeah, that’s a good idea. when zoom in, the tiles needed increase rapidly. if it’s in the country level, it’s ok, however, if user zoom in to town/countryside, the tiles’ total is very huge, which must be a very heavy load. so i just load the tiles that are needed to cover the screen size. i don’t know how google map’s logic for smoothing display. i’ll keep improving the UX. thanks for your visit. :slightly_smiling_face: