CDNGI Geoportal

How the Geoportal Was Created

The development of the CDNGI Geoportal followed a structured process designed to implement a fully functional Spatial Data Infrastructure (SDI) for Cape Town. The process ensured that spatial datasets were not only accessible, but also usable, interoperable, and standards-compliant.

1. Define Project Scope and Data Needs: Identified the case study focus (CDNGI) and determined that spatial data should include Geodetic and Control, Topographic, Aerial Imagery, Elevation Data, Land Cover, and Cadastral Data relevant to Cape Town.
2. Acquire and Organize Spatial Data: Sourced data from the UCT Geomatics File Server and the City of Cape Town (COCT) Open Data Portal. Due to size constraints, COCT WMS services were used for large datasets such as Aerial Imagery, Digital Elevation Models (DEMs), and Land Cover Maps.
3. Refine and Preprocess Data: Imported datasets into ArcGIS Pro. Used Batch Clip to limit all spatial layers to the Cape Town study area, reducing file sizes to align with the storage limitations of GitHub and QGIS Cloud.
4. Provision a Cloud-Based Virtual Machine: Created a free-tier Microsoft Azure Virtual Machine (VM) running Ubuntu. Configured the VM to allow external access via a static public IP address and opened necessary ports (e.g., 8080) to support GeoServer web services.
5. Set Up and Publish via GeoServer: Installed GeoServer on the Azure VM. Uploaded spatial data and configured WMS and WFS services for public access. Validated the services using both QGIS and ArcGIS Pro.
6. Build the Metadata Catalogue: Developed a custom HTML-based metadata catalogue hosted on GitHub Pages. Included fields such as title, keywords, description, and CRS. Embedded WMS/WFS links and download buttons for shapefiles. Added Leaflet-based map previews using GeoJSON or WMS layers.
7. Create the Interactive Web Map: Styled and compiled spatial layers in QGIS. Used the QGIS Cloud plugin to publish the project and generate a public WMS. Exported the styled map using qgis2web into a Leaflet-based interactive map. Added custom interactivity and styling via HTML, CSS, and JavaScript, including:
   • Grid cell selection and highlighting
   • Metadata side-pane integration
   • Layer controls, search, geolocation, and dynamic grid indexing
8. Integrate and Link All System Components: Connected the interactive map to the metadata catalogue through clickable grid cells that open context-specific side panes. The website homepage features clear launch buttons and navigation links to the map and catalogue. Ensured smooth, modular transitions between components, all hosted and accessible via GitHub Pages.
9. Develop and Deploy the Geoportal Website: Hand-coded a custom HTML website, hosted on GitHub, serving as the central entry point. Designed a clean layout with a navigation bar, launch buttons, project background, dataset information, and a “How to Use” guide. Maintained stylistic and structural consistency across all web components.
10. Test and Finalize the Geoportal: Performed browser-based testing and external access validation. Ensured all components—metadata links, WMS/WFS services, previews, downloads, and navigation—function correctly from any device with internet access.

The result is a modern, open-access Geoportal supporting spatial data discovery, visualization, and download—custom-built for the case study area and fully aligned with SDI principles.

To read the full project creation report, click here .