Company GIS Portal
GIS, Portal Development, Front-End Web Development, Open Data
A GIS portal homepage written by hand in HTML and CSS instead of assembled from an Experience Builder template, so it does not look like every other Esri portal, and curated so an engineer who has never opened GIS can still get something out of it.
- Drawing title
- Sheet 02-11
- Organisation
- Role
- Year
- Sector
- Status
- Built with
Background
ArcGIS Experience Builder default styling makes every portal look like every other portal, and does not explain itself to people who have never used GIS. The portal needed to work for users of all abilities, which meant it needed to teach as well as host.
What I built
The homepage was built as custom HTML and CSS with a TW-branded colour system, a fixed responsive header with mobile burger menu navigation, and a card-based grid layout for the open data and layer detail sections.
The page opens on three short explainer cards rather than the map itself: what GIS is, what the portal offers, and who it is for. Someone who has never opened a GIS tool gets a plain-English orientation before being asked to use one.
How it works
Below the introduction, the portal runs in four sections.
Open data webmaps. Seven curated ArcGIS webmaps, one per provider, in a card grid: British Geological Survey, Historic England, Met Office, National Highways, Natural England, North Sea Transition Authority, and Office for National Statistics. Each card names its theme, its layers and a one-line description, and links straight to the live webmap.
Layer details. Each provider's card expands into a panel listing the actual data layers inside that webmap, grouped by category. Every panel carries its own disclaimer stating what the data does not replace, so a reader is told the limits of the data at the point they are looking at it rather than once in a general terms page.
Project GIS capability. What a project-specific webmap adds beyond the open data: a project's own CAD drawings, GPS-tagged site photos, 360 imagery, ground investigation and borehole records, and drone imagery, brought into one map alongside the open data layers. It links to a live example project webmap.
Getting access. Two routes side by side rather than one default: a formal request through the IT service desk for scoped, tracked project work, or a direct email to the digital engineering team for an early scoping conversation before a formal request makes sense.
Outcome
A portal that people who are not GIS specialists can actually use, which was the point.