I’m looking to build an interactive 3D world map similar to the screenshot below.
Requirements:
- Render the entire Earth as a 3D globe.
- Smoothly zoom from a global view down to countries, cities, streets, and buildings.
- Display 3D extruded buildings similar to the example.
- Support camera controls (pan, rotate, zoom).
- Load map tiles dynamically as the user moves around the world.
- Allow adding custom markers (e.g., road problems) that can be clicked to display information such as:
- Problem description
- Severity
- Suggested solution
- The markers should integrate with the 3D map without affecting navigation performance.
I plan to use Three.js, but I’m unsure what the best architecture is.
Questions:
- What is the best open-source map engine for this use case?
- Can this be achieved using MapLibre GL JS + Three.js?
- Where can I get free worldwide map data (roads, buildings, terrain)?
- How are Google Maps or Mapbox able to stream only the visible part of the world instead of loading everything at once?
- What is the recommended approach for rendering millions of buildings efficiently while maintaining good performance?
The goal is to create a fully interactive 3D map that users can explore by zooming from the entire planet down to individual cities and buildings, similar to Google Maps’ 3D view, while allowing custom overlays and interactive points.
