Back to case studies
Petition Map screenshot
Anonymised case study

Petition Map

A hobby geospatial experiment built to explore GeoJSON modelling and Leaflet.js deeply, turning petition data into an interactive, map-first exploration tool.

This was a self-directed side project rather than client work. The goal was to learn geospatial frontend architecture in depth by building a usable public map interface for petition data, not just a static demo.

GeospatialGeoJSONLeafletData VisualisationInteractive MapCivic Tech

View live project

Context

This was a self-directed side project rather than client work. The goal was to learn geospatial frontend architecture in depth by building a usable public map interface for petition data, not just a static demo.

The problem

Raw petition datasets are difficult to reason about geographically. I needed a way to transform tabular/location-linked data into an interactive experience that supports spatial comparison, discovery, and lightweight analysis while running smoothly in-browser.

My role

I built the project end-to-end: data shaping decisions, GeoJSON preparation, Leaflet layer implementation, interaction design, and responsive behaviour tuning for desktop and mobile map usage.

Approach

I approached it as a learning laboratory for geospatial web engineering: normalise location-linked records, represent them in GeoJSON structures, render boundaries/points with Leaflet, and iterate on interaction patterns (popups, zoom behaviour, layer toggles) until exploration felt intuitive.

Highlights

I worked in tight data-to-UI loops: clean and reshape petition records, test geometry correctness in GeoJSON, profile map rendering behaviour, and refine interaction affordances so users could quickly understand spatial differences without specialist GIS knowledge.

System shape

User→Map UI→Layer controls→GeoJSON dataset→Boundary rendering→Insights

Key decisions

Use GeoJSON as the interchange format

Keep data structures explicit so geometry and metadata remain easy to inspect and debug

Optimise feature payloads to improve browser render performance

Use Leaflet layer strategy that supports iterative feature growth

Design interactions for exploration first (hover/click context, zoom-to-area, and readable labels)

Treat the project as a reusable baseline for future civic/geospatial experiments

Technical areas

GeospatialGeoJSONLeafletData VisualisationInteractive MapCivic Tech

Outcome

  • Delivered a live interactive petition map as a functional public demo
  • Built stronger practical understanding of GeoJSON structures and Leaflet internals
  • Improved the readability of geographically distributed petition patterns compared with flat data views
  • Established a reusable technical foundation for future map-based side projects
  • Validated a full data-to-visual interface workflow in a solo experimental setting

What I would improve next

  • Add richer filter controls (region, threshold, and category views)
  • Introduce temporal playback to inspect change over time where data allows
  • Expand dataset validation and transformation automation before publish
  • Evaluate vector-tile or clustering approaches for larger-scale datasets
  • Add richer explanatory overlays for non-technical users interpreting map patterns