How to Create an Interactive Conceptual Map
The 2026 Gorton and Denton Byelection Map
In The Map of Human Happiness I reviewed a conceptual interactive map created by The Pudding to visualize the results of a 2017 research project.
Here is how you can create your own conceptual maps using the Azgaar Fantasy Map Generator with the MapLibre mapping library.
This project combines world-building tools with modern web mapping to create a fully custom electoral visualisation - without using any traditional map tiles.
Step 1: Creating the Base Map with Azgaar
Instead of starting with a real-world basemap, I used the Azgaar Fantasy Map Generator to design a custom-looking map. Although the tool is designed for fantasy cartography, it is extremely useful for conceptual projects because it allows you to:
Design land shapes freely
Control colours and visual style
Export the map as a high-resolution image
Once the map design was complete, I exported it as a PNG file.
Step 2: Using the Image in MapLibre Instead of Tiles
Rather than loading standard map tiles (such as street or satellite layers), I used the exported PNG as a background image inside MapLibre.
MapLibre supports image-based sources, which means you can:
Load a static image
Define its geographic bounds
Treat it as a zoomable, pannable map
This approach turns MapLibre into a powerful interactive canvas - without relying on any external map providers.
The result is a completely self-contained map where the visual design is controlled entirely by the custom image.
Step 3: Adding Party Labels
To represent political parties in the Gorton and Denton by-election, I added custom text markers positioned at specific coordinates.
Each party label was styled individually using HTML markers, allowing full control over:
Colour
Font
Size
Placement
Text styling
This makes it easy to visually encode party identity while keeping the design consistent with the overall map aesthetic.
Step 4: Representing Voters with Wee People
To visualise voter distribution, I used the Wee People font, which converts letters into small human figures.
Each Wee People marker represents 1% of the total vote.
Instead of plotting raw numbers in text form, voters are shown as individual figures distributed across geographic bounding boxes corresponding to party support areas.
This creates a more intuitive and visually engaging representation of electoral strength.
For example:
If a party received 25% of the vote, 25 Wee People markers are placed within that party’s geographic area.
Markers are randomly distributed inside defined bounding boxes to reflect regional concentration.
The result is a spatial metaphor for political support.
Step 5: Building the Conceptual Map
By combining:
A custom fantasy-generated base map
An image source in MapLibre
HTML-based party labels
Wee People markers for voter representation
the final product becomes a fully interactive conceptual electoral map.
Users can zoom, pan, and explore the distribution of support - while the design remains entirely controlled and independent of external tile providers.
Comments