Digital & Interface · 2026 Corporate

Corporate Map Generator

A small in-house web tool so any team can highlight its manufacturing locations on a region map and export a clean, on-brand image for slides, no designer, no software to learn, no off-palette guesswork.

Role
Concept, design & front-end build
Tools
HTML, CSS, JavaScript, SVG
Client
Mondi Group
Status
In-house tool, in use
The problem

Location maps were where the brand quietly fell apart, two different ways.

Problem 01 · Everyone improvised
No two maps looked alike

Teams made their own: screenshots from Google Maps, PNGs pulled off the internet, whatever was to hand. Every location map looked different, and none of them looked like the brand.

Problem 02 · Source files didn't fix it
Templates assumed skills and software

Even handing over Illustrator and Photoshop files only went so far, not everyone has the software or knows how to use it, and those who could would shade countries in whatever colour they fancied. Creative freedom is great; corporate work has to stay on brand.

Google Maps screenshotGoogle Maps grab
Random map PNG pulled off the internetRandom PNG
Plain outline map with no shadingNo shading
A sample of what was landing in decks before, every one different.
Personas

Marketing, sales and brand all reach for the same map for opposite reasons: speed, credibility and control. It has to hand each of them a finished, on-brand asset without a designer in the loop.

PR Priya
Priya, 31
The deck-builder
Tap to read more ↻
Priya, 31
Regional marketing · builds the quarterly decks

“I just need a clean map of our sites for slide 6, I don't want to open Illustrator or wait two days for design to send one back.”

Wants
A deck-ready, on-brand map in minutes, no software to learn.
Frustration
Rebuilding location maps from screenshots every reporting cycle.
Tap to flip back ↺
MR Marcus
Marcus, 44
The client-facer
Tap to read more ↻
Marcus, 44
Sales manager · pitches the plant footprint to clients

“When a prospect asks where we manufacture, I want to show them a sharp map on the spot, not a fuzzy Google grab.”

Wants
To generate a credible, branded footprint map himself, fast.
Frustration
Waiting on the design team for something that should take a minute.
Tap to flip back ↺
EL Elena
Elena, 38
The brand guardian
Tap to read more ↻
Elena, 38
Brand & comms · owns the visual system group-wide

“Every asset that goes out should look like us. I can't police every deck, so the guardrails need to live in the tool.”

Wants
Consistency enforced by default, not by goodwill or memory.
Frustration
Off-palette, hand-shaded maps quietly eroding the brand.
Google Maps grab
Hand-shaded
Tap to flip back ↺
The approach

Remove the design decision entirely, rather than police it.

A style guide can describe the correct map, and a source file can provide one, but both still rely on the person at the other end having the right software, the right skills and the discipline to not improvise. At scale, across dozens of sites, that reliance is exactly where consistency breaks.

The tool flips it around. Instead of distributing files to be edited, it generates the finished asset, so there is no editing step to get wrong. The brand rules live inside the software, not in a document somebody has to follow.

Where the control sits

The user makes the only two choices that should be theirs. Everything that carries the brand is decided by the tool.

The user chooses
Which region to show
Which countries to highlight

Two decisions, both about content, never about styling.

Locked to brand
Highlight colour Land colour Map proportions Typography Borders & framing Export size

None of these are exposed, so none of them can drift.

How it works
01
Pick a region

The map opens at the right proportions for that region, no setup, no design choices.

02
Click to highlight locations

Each country fills in the brand green as you select it. Highlight as many as you need; zoom and pan to find them.

03
Export a clean PNG

One click drops a deck-ready image into your slides, identical styling every time, no software needed.

Under the hood

It is deliberately lightweight: a single page, no dependencies, nothing to install. Real vector world geometry is drawn as inline SVG, one viewBox per region so each opens at the correct proportions, and countries highlight on click with live tags you can remove. Scroll zooms, drag pans, and North America can drop to US state-level fill.

Because every colour, border and label is applied from brand tokens in code, changing one in a single place re-styles every future export at once, no reissuing of files, no version drift.

Geometryvector country paths
Renderinline SVG · per-region viewBox
Interactionclick highlight · zoom · pan
OutputPNG · deck-ready
Coverage
6
regions, one consistent style
Full
country geometry, real shapes
US
state-level fill available
0
design software required
Europe North America South America Africa Asia Oceania
The tool in motion
Europe shown as an example — the flow is the same for all six regions
A quick run through the real tool. The whole job is two clicks, region then locations, and every export lands in the locked corporate style. Click to enlarge.
Exported PNG · transparent Map of Europe exported from the tool, four countries highlighted, on a transparent background
What comes out

One click gives you a 3000 px PNG with a fully transparent background, so it drops straight onto any slide, in any brand colour, with no white box to crop or mask around.

3000 × 2340 px Transparent PNG Drop-in for PowerPoint
Plain on purpose

The interface looks basic because it has to be. The people using it are not designers, and they should not have to learn another tool just to do their job. No menus to dig through, no settings to get wrong, no new system to adopt. If you can open a web browser and click, you can make the map. Every bit of effort went into the output looking right, not the tool looking clever.

Why it matters

It turns a design task into a two-click action: consistency at scale across every region, solved with a small piece of software instead of a style guide nobody reads. Good communications and good design are the same job, this is where they meet.

Real-world impact
“This is exactly what I’ve been looking for.”

Early feedback from one of the site managers as the template was rolling out to teams. It is the whole point of the tool in a single line: the people who actually needed these maps could suddenly just make them, without waiting on a designer.

You might also be interested