UrbanLab Heritage Map
An interactive map of the Jiu Valley's built heritage where every building, photo, 3D model and even each pin's position on the map comes from the CMS.
- Webflow CMS
- JavaScript
- SVG
- model-viewer
- CSS
The brief
UrbanLab is an NGO that protects the Jiu Valley's built and natural heritage. For its AFCN co-financed project Identity and Heritage: Rediscover the Jiu Valley, the valley's heritage buildings had to become explorable online, on a map a non-technical team can keep growing on its own.
- The map: an SVG valley where every pin is a CMS item, placed from stored coordinates.
- The building page: gallery, history and photo archive, one template filled by the CMS.
- The 3D model: glTF scans a visitor can spin around right on the page.
What made it hard
A heritage archive is never finished, so the brief was really a system: the NGO adds buildings for years, and nothing about that can require a developer.
- No map library. The valley is a custom SVG, not an embedded map service. Pins, tap targets and detail cards all had to be built by hand.
- Pins from data. Each building carries its own X/Y coordinates as CMS fields, and the map places the pin from those values. A new site is a CMS entry, not a code change.
- Everything editable. Names, histories, photo sets and 3D models live in CMS collections. The map and the building pages just render what they find there.
- 3D on any device. Scanned buildings had to be explorable in the browser itself, on desktop and on the phones most visitors arrive with.
What I did
I built it on top of Webflow: collections store the archive, and custom JavaScript turns those entries into an interactive map.
- The pin layer. Custom SVG pins read from the CMS and anchored at each building's stored coordinates, with states sized for touch.
- The detail card. Tapping a pin opens the building's card with its photo, its summary and the way into its full page, rendered from the same CMS entry.
- City filtering. Buildings group by town. On mobile the filter is a bottom sheet, so one thumb reaches everything.
- The building template. A gallery-led page with the history, the photo masonry and the 3D viewer, one design the CMS fills for every building.
- The 3D viewer. glTF scans embedded with model-viewer, so a visitor can turn the building around without leaving the page.
What it looks like
06 items
Outcome & what I learned
Live at urbanlab.ro/harta. The NGO grows the archive on its own: a new building is a CMS entry with photos, a history and two coordinates, and it appears on the map with its own page, no developer in the loop.
Hand-picking X/Y coordinates for each pin works, but it's trial and error. Next time I'd add a click-to-copy coordinate helper on the map itself, so an editor could position a pin in one click.