00 ▪ Independent

WMap

Aesthetic wallpapers made from real places.

I designed and built this map wallpaper app with Flutter and Mapbox. I've published and maintained it since August 2019.

2019 — presentiOS ▪ AndroidFlutter ▪ MapboxMaps ▪ Wallpapers

An iPad lock screen using a WMap wallpaper: a light beige and grey street map of Venice and its surrounding islands, with the time shown in large white text
A generated map wallpaper on the lock screen.

01

A different kind of wallpaper

WMap began after I found several wallpaper apps on the App Store. They had interesting ideas, but also some limits. I also wanted to learn Flutter and was looking for a small product I could build on my own.

The idea was simple: choose a place, choose a map style, compose it, and turn it into a wallpaper.

Instead of picking an image someone else made, WMap lets you turn any place in the world into something personal.

WMap main screen on iPhone: a full-screen street map of New York with a location pill reading New York, United States at the top, and a row of circular controls at the bottom for info, location, create, map layers and randomize
The main screen: the map fills the view, with a few floating controls at the bottom.

02

The map is the canvas

The interface is simple because the map is the main visual element.

The map fills the screen, with a few floating controls at the bottom. The UI uses black and white, restrained spacing, and distinctive typography so it doesn't compete with the map.

The main steps are simple:

  • Location — choose from hand-picked places or search anywhere in the world.
  • Style — browse a visual grid and apply different map styles.
  • Compose — zoom, rotate, and position the map to make the image you want.
  • Randomize — get a random place or style for inspiration.
  • Create — make and save the finished wallpaper.

On Android, you can also set the image directly as your device wallpaper.

WMap Search location screen on iPhone: a search field with Dublin, Ireland typed in, recent searches such as Paris, Singapore and Buenos Aires, and recent locations including New York, Berlin and Tokyo
Choosing a location by searching or from recent ones.
WMap Style screen on iPhone: a white sheet over a dimmed map showing a grid of map style thumbnails, with the selected style highlighted and locked styles in the Light section marked with padlocks
Browsing map styles in a visual grid.
WMap Wallpaper screen on iPhone: a preview of the generated New York map wallpaper above a note explaining it will be saved in the Gallery, with a black Save to Gallery button and a share button
Generating and saving the finished wallpaper.

03

Designing the experience

I designed the whole product, from its visual style and navigation to the interactions and layout.

I didn't want to make a complex wallpaper editor. I wanted to keep the focus on what people came for: exploring places and making something visually interesting from them.

The main interaction has changed little since the first release. I've mostly improved the UI and individual interactions instead of redesigning the product from scratch.

The original WMap location screen: a dark sheet titled Location over a dimmed blue-green map of Belém, Brazil, with grey Top Locations thumbnails for New York, Helsinki and San Francisco and a placeholder search field reading e.g. Dublin, Ireland
The original location screen.
The current WMap location screen: a light sheet titled Location over a dimmed New York map, with Top Locations thumbnails for New York, San Francisco, Vancouver Bay and Rio de Janeiro, and a search field with Dublin, Ireland typed in
The current location screen with updated styling.

Over time, I've updated the icons, spacing, and visual order, and added a light/dark theme. The location feature now has search and a list of recently selected locations for quicker access.

04

When generating an image wasn't that simple

The most interesting technical problem was the seemingly simple task of turning the map into an image.

Mapbox renders the map as a platform view inside Flutter. This meant Flutter couldn't take a screenshot of it directly.

My first solution used native code to capture the rendered view outside Flutter. It worked, but made the app more complex. It also left out Mapbox's required copyright attribution.

I later changed the approach completely.

WMap now uses the Mapbox image API to generate the map at the required dimensions instead of capturing the view. The API also adds the required attribution.

One change solved two problems: a simpler implementation and correct map attribution.

Approach 1 — capture the rendered view

Before: capture the rendered viewFlutter embeds a Mapbox platform view; native screenshot code captures it outside Flutter, and the required attribution is not included in the image.FlutterMapbox platform viewnative screenshot code(captures outside Flutter)attribution not includedin image
Fig. — before: capture the view.

Approach 2 — generate the image (current)

After: generate the imageFlutter calls the Mapbox image API; the map renders directly at the required dimensions with the required attribution added automatically.FlutterMapbox image APImap rendered directly atthe required dimensionsattribution added automatically
Fig. — after: generate the image.

05

From Flutter experiment to real product

WMap began as a way to learn Flutter, but I decided to publish it instead of leaving it as an experiment.

I designed and built the product on my own, released it on the App Store and Play Store, and have maintained it since it launched in August 2019.

At first, users could buy separate style packs. In March 2021, I changed this to one "all styles" purchase after I saw that users weren't very interested in buying single packs.

  1. Aug 2019

    Launch

    App Store + Play Store

  2. Mar 2021

    All-styles

    Single in-app purchase

  3. today

    Ongoing

    Maintenance, updates, refinements

Today, WMap has about 6,000 downloads.

06

Still shipping

WMap is a small product, but it's been running for about seven years.

I still maintain it with bug fixes, platform updates, and UI refinements. I also deal with the limits of relying on third-party map data and services.

For me, that's part of making independent products. The work doesn't end when the first version reaches the store. You ship, maintain, learn, and keep improving.

App page

An iPad lock screen with a vivid pink WMap wallpaper of a city and its harbour, with pink map lines and land shapes filling the screen
A monochrome pink wallpaper of Tokyo.
An iPad home screen with a soft purple WMap wallpaper of a city and its port, with Contacts, Shortcuts, Freeform and WMap app icons visible at the top
A purple wallpaper on the home screen, with the WMap app installed.