Interactive GIS web application mockup for visualizing and managing a real estate portfolio. Features map, list, and gallery views with Mapbox GL JS.
Caution
This is an unofficial mockup for demonstration purposes only. All data is fictional. Not all features are fully functional. This project serves as a visual and conceptual prototype — it is not intended for production use.
Main App — Read-only property inventory with map, list, and gallery views.
Tabs Views — Tabbed detail view with structured property sections and an AI agent for portfolio queries.
CR Workflows — Write operations (create, mutate, delete) with a four-eyes approval workflow and swisstopo API integration.
GIS Server — Lightweight frontend for managing layers, schemas, and feature data in a PostGIS-backed REST API.
OSM Height Enrichment — Browser-only tool that enriches OpenStreetMap buildings with accurate heights from Swiss elevation data.
- Map View - Interactive Mapbox map with color-coded property markers, 3 map styles (Light, Standard, Satellite), and sidebar accordion for sharing/export
- List View - Sortable table with search, filtering, configurable columns, and export to CSV/Excel/GeoJSON
- Gallery View - Responsive 3-column grid with property cards and status badges
- Detail View - Comprehensive property dashboard with 7 tabbed sections:
- Overview (images, basic info, mini-map)
- Measurements (SIA 416 compliant area data)
- Documents (plans, certificates, permits)
- Costs (operational expenses by category)
- Contracts (service & maintenance agreements)
- Contacts (personnel & stakeholders)
- Facilities (equipment & infrastructure inventory)
- Multi-source search: Local buildings + Swisstopo location API + Geokatalog layers
- 6 filter categories: Status, Ownership Type, Portfolio, Building Type, Country, Region
- Deep linking with URL-based navigation and filter persistence
- CSV, Excel (.xlsx), and GeoJSON export
- Custom column selection before export
| Technology | Version | Usage |
|---|---|---|
| Vanilla JavaScript | ES6+ | Application logic |
| Mapbox GL JS | v3.4.0 | Interactive WebGL map |
| CSS3 | Modern | Styling (Flexbox, Grid, CSS Variables) |
| GeoJSON | Standard | Geospatial data format |
| Swisstopo API | v3 | Swiss location search |
| Material Symbols | Icon library |
No build tools or frameworks - pure static files.
# Python
python -m http.server 8000
# Node.js
npx http-server
# PHP
php -S localhost:8000Then open http://localhost:8000
property-inventory/
├── index.html # Main app entry (loads assets from prototype-main/)
├── README.md
├── LICENSE
├── assets/
│ └── images/ # Preview screenshots (used by README)
├── prototype-main/ # Main app assets
│ ├── js/ # Application logic
│ ├── css/ # Styles & design system
│ ├── data/ # buildings.geojson, i18n.json, parcels, landcovers
│ └── docs/ # DATAMODEL.md, DESIGNGUIDE.md, etc.
├── prototype-tabs/ # Tabbed detail view + AI portfolio agent
├── prototype-workflows/ # CR workflows with four-eyes approval
├── prototype-backend/ # PostGIS-backed REST API frontend
└── osm-height/ # OSM building height enrichment tool
GitHub Pages: Push to main deploys automatically.
Alternatives: Netlify, Vercel, CloudFlare Pages, or any static file server.
Licensed under MIT
Caution
This is an unofficial mockup for demonstration purposes only. All data is fictional. Not all features are fully functional. This project serves as a visual and conceptual prototype — it is not intended for production use.