Hands-on lab to build a 3D geographic viewer centered on Paris with iTowns. The globe combines IGN Géoplateforme services (orthophoto, terrain relief, 3D buildings) with open datasets on transport, urban planning, and flood risk.
- Learn how to structure an iTowns application around layers (
ElevationLayer,ColorLayer,FeatureGeometryLayer, etc.) - Connect to remote services (WMTS, GeoJSON, vector tiles)
- Overlay multiple themes in a single 3D scene (RATP network, extruded buildings, 1910 floodable basement zones)
- Node.js 18+
- Basic JavaScript knowledge
- Familiarity with web mapping concepts (layers, zoom levels, GeoJSON)
The complete demo lives in tp/step-12-gltf-scene/:
cd tp/step-12-gltf-scene
npm install
npm startOpen http://localhost:8080. Do not open public/index.html directly — the app must be served through the Webpack dev server.
Each folder under tp/ is a self-contained Webpack project for one step of the tutorial:
| Step | Folder | Content |
|---|---|---|
| 0 | step-00-setup | GlobeView + orthophoto (webpack starter) |
| 1 | step-01-globeview | Camera focused on Paris |
| 2 | step-02-ign-basemap | IGN elevation layers |
| 3 | step-03-transport | Metro/tram/RER lines + RATP stations |
| 4 | step-04-buildings-3d | 3D buildings (BD Topo) |
| 5 | step-05-flood-risk | Floodable basements (1910) |
| 6 | step-06-layer-menu | Layer toggle menu |
| 7 | step-07-widgets | Minimap + navigation widgets |
| 8 | step-08-3dtiles | OGC 3D Tiles |
| 9 | step-09-lidar | LiDAR HD point cloud (EPT) |
| 10 | step-10-project-structure | Final project structure |
| 11 | step-11-tour-eiffel | Tour Eiffel Collada model |
| 12 | step-12-gltf-scene | Notre-Dame glTF photogrammetry |
To run a specific step:
cd tp/step-03-transport # replace with the desired step
npm install
npm startThe detailed guide (concepts, annotated code, troubleshooting) is in TP.md.
An overview of the code snapshots is in tp/README.md.
- iTowns 2.46 —
GlobeView - itowns-starter-webpack
- Webpack 5 · Three.js · proj4
- IGN — orthophotos, elevation (MNT), BD Topo (Géoplateforme)
- Île-de-France Mobilités — rail network and stations (PRIM)
- Paris Open Data — floodable basement zones (1910) (opendata.paris.fr)
MIT — see LICENSE. Copyright © 2026 IGN.