map3d: Generate Real-World 3D City Maps from OpenStreetMap Data

⬅️ Back to Tools

map3d: Instant 3D Cities from Anywhere on Earth

Ever wanted to grab a slice of a real city and explore it in 3D? Not a flat map, not a rendered video, but an actual interactive 3D scene you can orbit around, zoom into, and export as a model?

map3d (github.com/cartesiancs/map3d) is a free, browser-based tool that does exactly that. Draw a box on a map, wait a few seconds, and you get an interactive 3D scene with extruded buildings and roads, powered by real OpenStreetMap data. It runs entirely in the browser, no install, no API keys, no accounts.

Try it live: map.fleet.im

What It Does

🗺️ Step 1: Select Any Area

The interface opens on a standard Leaflet map centered on Manhattan. You toggle into selection mode and draw a rectangle around any region in the world. The default zoom level shows city blocks, but you can zoom out and grab entire neighborhoods.

🏗️ Step 2: Fetch Real Building & Road Data

Behind the scenes, map3d queries the Overpass API (the read-only API for OpenStreetMap data) with two queries:

1. Buildings: All OSM ways and relations tagged with building=* within your bounding box
2. Roads: All OSM ways tagged with highway=*

The response includes full geographic coordinates, building tags (height, levels, name, address, amenity type), and road geometry. Nothing is pre-rendered or cached, you always get current OSM data.

🎮 Step 3: Explore in 3D

The scene renders with React Three Fiber (R3F) and includes:

• Extruded buildings: Each building footprint is projected from lat/lon to 3D space using a simple equirectangular projection, then extruded to its OSM-recorded height (or estimated from building levels at ~2.2m per floor, defaulting to 10m). Buildings are a neutral gray that highlights to blue on hover.
• Roads: Rendered as green lines at ground level, following OSM way geometry.
• Sky & Environment: A sky dome with sun position and an HDR city environment map for realistic reflections.
• OrbitControls: Default navigation: rotate, pan, and zoom around the scene freely.

Click any building to see its OSM tags: name, address, height, levels, amenity type, denomination, and any custom metadata the community has added.

🚗 Bonus: Third-Person Driving Mode

Toggle Car Mode from the top navigation and you drop into a simple third-person driving view. WASD to drive a tiny orange box around the streets, mouse to look around. It’s rudimentary but surprisingly fun for getting a ground-level feel of the city layout.

GLB Export

The highlight feature: export your scene as a GLB file (glTF Binary), the standard 3D interchange format.

The export process:

1. Traverses the Three.js scene collecting all objects flagged for export (buildings and roads)
2. Clones them into a clean group
3. Passes to three.js’s GLTFExporter with { binary: true, embedImages: true }
4. Downloads as scene.glb

The resulting model can be imported into Blender, Unity, Unreal Engine, Three.js, or any 3D application that supports glTF. This makes it useful for:

• Digital twins: Base 3D city geometry for simulation and monitoring
• Drone surveying: Reference terrain and building models
• Urban planning: Quick visualization of city layouts
• Game dev: City backdrops and level geometry
• GPS marker visualization: Context for location data

There’s also a (partially finished) integration with Fleet API (api.fleet.cartesiancs.com) that can upload the GLB directly to a Fleet digital twin space.

The Tech Stack

Runtime

Build

Vite 6, TypeScript (non-strict), vite-plugin-dts for type declaration generation, suggesting this is designed with library reusability in mind, not just a demo app.

How the 3D Projection Works

The core challenge in any 3D mapping tool is converting geographic coordinates (latitude/longitude) to 3D space. map3d uses a simple but effective equirectangular projection:

const scale = 51000;

function project(lat: number, lng: number) {
  const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
  const y = (lat - refLat) * scale;
  return new THREE.Vector2(x, y);
}

• Longitude is scaled by cos(refLat) to correct for meridian convergence (longitude lines narrow toward the poles)
• The reference point is the center of the user’s bounding box
• Y is negated to orient north-up in Three.js space

Building footprints from OSM are projected point-by-point to form THREE.Shape objects, then extruded with THREE.ExtrudeGeometry using the height from OSM tags.

Limitations & Honest Notes

• Data accuracy depends on OSM: If a building’s height tag is missing, it defaults to 10m. If levels are recorded, it estimates ~2.2m per level. Some regions have excellent OSM coverage; others are sparse. The project README explicitly warns about this.
• Roads are 2D lines: No width, no surface, no lanes. They’re green lines at ground level. The roadmap doesn’t mention road improvements yet.
• Large areas can be slow: Fetching a neighborhood is fast. Fetching an entire city center may take 25+ seconds and produce a heavy scene. The app warns when the selected area exceeds ~0.1 degrees (~11km).
• No error handling on road fetches: If the Overpass API fails for roads, it fails silently.
• No caching: Every session triggers fresh API calls.
• Car mode is a toy: It’s fun but lacks collision detection, road-following, or any gameplay beyond WASD driving.

Use Cases

• Quick 3D visualization: of any city block for presentations or reference
• Base geometry: for digital twin projects
• GLB source models: for game environments, VR scenes, or architectural context
• Educational: Understanding urban layout, building density, and street networks in 3D
• Drone mission planning: Reference building heights and positions

Comparison: What map3d Is and Isn’t

map3d occupies a specific niche: fast, free, browser-based OSM-to-3D with portable GLB output. It’s not a competitor to Cesium or Google Earth; it’s a quick bridge between OSM data and a 3D model you can actually take with you.

Links

• Live Demo: map.fleet.im
• GitHub: github.com/cartesiancs/map3d
• OpenStreetMap: openstreetmap.org
• React Three Fiber: docs.pmnd.rs/react-three-fiber
• GLTF Exporter (three.js): threejs.org/docs/#examples/en/exporters/GLTFExporter

Why This Tool Rocks

• Zero setup: No install, no API keys, no accounts. Open the browser and go.
• Free forever: MIT licensed, no paywalls, no usage limits.
• Real data: Every building comes from the global OSM database with real tags and heights.
• Portable export: GLB output works in Blender, Unity, Unreal, and any 3D tool.
• Built with modern tech: React 19, R3F 9, Three.js 0.173, TypeScript, Zustand 5.
• Active development: The roadmap includes building textures, height customization, materials, and heightmaps.
• Digital twin ready: The Fleet API integration (even if partially finished) points toward a larger vision for interactive 3D city management.

Crepi il lupo! 🐺