I designed this map style to showcase the runtime styling feature in Mapbox mobile SDKs. Paired with the iOS developer we also built an MVP demo for a fitness app idea.
Mobile Runtime Styling
With the latest Mapbox mobile SDKs, you can have full control over the your map, and tweak its style freely in the runtime.
Powered by mobile runtime styling, this Lush app demo allows you to travel between two opposite map styles: a dull and barren world, and a blooming and lush world. Starting from the dull map, you can "greenify" your the world by taking some steps and burn some calories.
Mobile developers. This would be a quick app that clearly demonstrates what the SDK can do, preferably demoed live from a phone.
I started by creating two distinctive color palettes that smoothly transition into each other.
Then, I created the icon sets and some subtle textures to bring more personality to the styles.
Bring it to life
Scenario: Fitness app
The lush map can be used to motivate users in a fitness app: you start from a dull and lifeless world, and gradually turn your neighborhoods into a lush new paradise by running and biking every day.
For an MVP version, I first prototyped the step by step map style transition in a Mapbox GL JS demo. Then Justin, our mobile developer built the iOS version, hooking up the step counter with the iPhone motion sensor.
* * *