Project case study

Download the Word document

PORTFOLIO CASE STUDY · 2026

A classroom resource combining GIS cartography, a 10 m digital elevation model, interactive land-use data and a mobile-friendly Three.js viewer.

Interactive model and cartography: Mr Lane · Year 5 geography · Mount Etna, Sicily

1. Project brief

The project began as a classroom map of Mount Etna and developed into a linked physical/digital resource designed to make volcanic landscapes easier for pupils to interrogate spatially.

The main teaching context is a Year 5 geography lesson on why people choose to live near volcanoes. Rather than presenting benefits and hazards as a list of facts, the model allows pupils to examine the terrain, settlements, roads and agricultural land around Etna and to ask where human activity is concentrated.

Educational aims

Make the relationship between relief, settlement and farming visible in three dimensions.

Give pupils control over a thematic farming layer so that physical geography can be viewed first and human land use added deliberately.

Use clickable information to connect mapped patterns with real crops and livelihoods.

Create a resource that works on classroom computers, iPads and phones, and can later be linked from a QR code on a 3D-printed relief model.

Final pupil experience

The published viewer opens with the base terrain visible and the farming layer switched off. Pupils can rotate and zoom the model, toggle farming on, click agricultural areas for short crop explanations and photographs, and use Reset view to return both the camera and layer state to the default. A compact Credits panel keeps licensing information available without cluttering the main interface.

2. Data, cartography and terrain construction

Base map design

The terrain used a six-class hypsometric colour ramp from low green ground to pale high ground, with a subtle hillshade to retain landform detail. The map included principal settlements and roads, Mount Etna, summit craters, Valle del Bove, flank-cone labels, the Ionian Sea, Catania Airport and a height scale.

Settlement labels were kept in the map texture rather than exported as separate 3D labels.

The map texture and terrain were kept to the same geographic extent so the drape aligned correctly.

Texture resolution was increased to preserve roads and labels in the web model.

Building a usable sea surface

The most difficult terrain problem was creating a continuous surface that included the sea. A land-clipped DEM produced artificial vertical cliffs where valid land had been replaced by zero elevation. The successful workflow used the full combined Etna DEM, clipped to the exact final map extent, then merged it over a constant 0 m raster. This retained real elevation everywhere on land while creating a flat sea offshore.

Clip the full combined DEM to the exact final map extent.

Create a constant raster with the same extent, CRS and pixel size, value 0.

Merge the constant raster first and the clipped real DEM second so valid terrain overwrites zero.

Verify with Identify: real elevations on land; 0 m offshore.

Use the merged raster as the sole terrain surface in Qgis2threejs.

The final working extent was approximately 49.93 km × 52.29 km in EPSG:32632. The Qgis2threejs scene used a fixed extent matching the map/texture and the 1:1 aspect-ratio lock was disabled.

3. Interactive farming layer

The farming overlay was designed to answer the lesson enquiry visually: people do not simply live near Etna; they actively use its lower slopes.

CORINE Land Cover 2018 was clipped to the Etna model footprint and filtered to four broad agricultural classes. The aim was not cadastral precision, but a clear pupil-readable pattern.

3D overlay behaviour

The land-use polygons were exported as Qgis2threejs Overlay geometry relative to the merged DEM. At small offsets the overlay intersected the terrain mesh and produced holes. Testing showed that an offset of about 17 m removed these artefacts; 20 m was used as a safe working value. Because transparency looked visually detached at that offset, the final layer uses solid muted fills with no borders and is switched off by default.

Clickable pupil information

The stock Qgis2threejs interface was replaced with a simplified pupil-facing interface. Clicking an agricultural area opens a compact information card with a clear photograph, short explanatory text and a single 'Look closely' question. Images are requested only when the relevant card is opened, limiting their effect on initial loading.

Show farming / hide farming control.

Reset view returns the camera to the default and also switches farming off.

Responsive information cards for phone and tablet screens.

Credits panel containing data, photography and software attribution.

Farming layer hidden on first load to preserve a clear physical-geography view.

4. Problems solved during development

Texture and terrain extents did not match — The PNG/map texture and DEM had to use effectively identical extents. A fixed Qgis2threejs scene extent was set to the final map footprint rather than the wider map-canvas extent.

Sea missing from the 3D surface — A constant 0 m raster was merged beneath the full clipped DEM, creating a single continuous terrain surface with real land elevations and flat sea.

Artificial vertical cliffs — These appeared when a land-clipped DEM had missing land cells that were filled with 0. Rebuilding from the fuller Etna combined DEM removed the false cliffs.

Land-use overlay developed holes — The overlay and terrain meshes intersected. Raising the overlay to roughly 17–20 m eliminated the artefacts.

Stock interface was too technical — The exported HTML/CSS/JavaScript was simplified into large pupil-friendly controls, with the technical dat.GUI removed.

Mobile performance and usability were uncertain — The published model was tested on iPhone. Initial loading was not instant, but interaction was smooth and touch controls were intuitive once loaded.

Performance

The exported web package was approximately 20 MB during testing. This was accepted once mobile interaction had been confirmed. Further optimisation was deliberately deferred because reducing terrain or texture quality risked weakening a resource that was already usable.

5. Outcome and portfolio value

The finished resource is more than a static map: it combines physical geography, human geography, GIS analysis and web interaction in one classroom tool.

The project demonstrates end-to-end handling of spatial data: sourcing and licensing data; raster processing; DEM construction; cartographic design; vector filtering and classification; 3D export; browser interface modification; mobile testing; and pedagogical simplification for a primary-school audience.

What the project demonstrates

QGIS raster and vector processing, including clipping, reprojection, merging and thematic classification.

Cartographic judgement: balancing terrain, labels, transport, settlements and thematic land-use information.

3D visualisation using Qgis2threejs and Three.js.

Front-end modification of an exported GIS viewer for a specific user group.

Attention to licensing, attribution and source transparency.

Iterative testing: identifying technical artefacts, diagnosing their causes and refining the workflow.

A clear educational purpose rather than technology for its own sake.

Potential physical extension

The digital model was designed to complement a 3D-printed relief model of the same landscape. A permanent short URL such as mrlane.co.uk/etna can be encoded into a 3D-printed QR code in the model frame, allowing the physical resource to link directly to the interactive version even if the wider website is redesigned later.

Credits and data sources

Interactive model and cartography: Mr Lane, 2026.

Terrain: TINITALY 1.1, © INGV, CC BY 4.0. Tarquini, S., Isola, I., Favalli, M., Battistini, A. & Dotta, G. (2023), TINITALY, a digital elevation model of Italy with a 10 metres cell size (Version 1.1). DOI: 10.13127/tinitaly/1.1.

Land use: CORINE Land Cover 2018, Copernicus Land Monitoring Service / ISPRA, CC BY 4.0.

Photography in the interactive cards: Creative Commons images from Wikimedia Commons; individual photographer and licence details are displayed in the resource.

Software: QGIS, Qgis2threejs and Three.js.

Live resource

https://mrlane.co.uk/etna/