How I Built Sharing in Atlas Wallpaper

Atlas—my map based wallpaper app for iPhone and iPad—has had custom styles for premium¹ customers since June of last year. It was the most often requested feature up until I added it, and sales for premium as a result reflected this. Logically, following the release of custom styles, the next most requested feature was sharing of styles. Today I’m pleased to announce that version 11 of Atlas Wallpaper features custom style sharing!

I started working on this feature last August and have built and rebuilt it multiple times since. Atlas, famously, is a heavy user of Apple’s backend-as-a-service CloudKit for location search and the “inbuilt” styles—the ones customers’ can use for free. So of course I tried by using CloudKit to build a sharing system. This wasn’t the easiest—mostly due to the ways CloudKitJS works—it just wasn’t designed for how I wanted sharing to work. I also explored using a serverless system—in this case Azure Functions—and a persistent store but this was still full of complicated issues that needed solving. Really, I just wanted to share a style file.

So I looked at the idea of just sharing a file and nothing else. And thought, well, what is the minimum size I could make the file? Thanks to the way I built the custom styles engine I only needed five data points:

• Style Name
• Background Colour
• Water Colour
• Land Colour
• Road Colour

Not much right?

So I thought, well URLs can hold a lot of characters, and those five points aren’t many really, so why not just put it all in the URL? And that’s what I did!

Here’s the JS that runs on atlas.town² to create the preview:

// path is set by striping the start of window.location.pathname as the URL starts with https://atlas.town/!/
let decodedString = atob(path); //base64 decode
let dataString = decodeURIComponent(decodedString); 

let parts = dataString.split('|'); //split it in half at the pipe
let name = parts[1];//First half is the name

let colors = parts[0].split("#"); //second half is a string of colours in a particular order

let backgroundColour = "#" + colors[1]
let landColour = "#" + colors[2]
let roadColour = "#" + colors[3]
let waterColour = "#" + colors[4]

It’s super simple, in the future I can add more data to a shared style by adding more pipes to the end and all the current code will continue to work. This solution also mean there is no waiting time when a user taps share in the app, or when a user adds a new style in. It’s all instant. No backend, no APIs, no network connection, just some simple strings.

In the app there is both a decoder and an encoder written in swift with a few more checks to allow it to fail more gracefully.

I’m really happy with this sharing method and hope you check out Atlas Wallpaper to give it a try.