Map UI design workflow — Mapbox to Sketch
I’ve been searching for a decent map ui design solution/ workflow for quite sometime now. At YoungInnovations, we constantly run across projects that require a map element in their UI. Until few weeks ago, I used to implement following solution:
Screenshot of Google map
This was back in the time when I didn’t know much about maps and at times where we simply used Google’s default map: Find the place of interest → take a screenshot of the map → crop out unnecessary parts → paste it into the design. I had no control over the colors of the map and the map didn’t at all follow the color palette of rest of the site.
Use maps created by a developer colleague
At times when our developer has already created a map, I inspected the map → copied the svg source code → pasted it to a code editor → saved the file as .svg format → opened and styled it in Sketch. This gave me freedom to change the fill and boundary colors of the map and made the map to be in more align with the brand colors of the site I was designing. This was a better solution, however, this didn’t allow me to change the base properties of the map (topography information, waterways, etc.)
Use Snazzy Maps
Snazzy maps showcases a list of nicely designed Google maps. It also allows you to create your own style of Google map. While Snazzy maps’s map-style-editor is good, I found it to be quite laggy and limiting.
Enter Mapbox
According to their site, Mapbox calls itself the location data platform for mobile and web application. It is a platform to design map/ navigation building blocks that can be integrated to any applications we build.
Mapbox is the closest and prolly the strongest tool I’ve come across to design maps by customizing colors, icons, font families, text size, etc.
I will only cover some basic Mapbox stuff to get us started with in this post. There’re some wonderful tutorials and documentation in their official site if you want to learn in detail.
Designing map with Mapbox Studio
Mapbox Studio is Mapbox’s tool to create a new map style from scratch or customize a pre-built style. To start with Mapbox Studio, you must first create a Mapbox username. After you’re registered and signed in, you’ll be taken to Home of the studio. The left panel of the studio has following sections:
- Home
- Styles
- Tilesets
- Datasets
- Stats
1. Designing a new style from scratch
Click on Styles. The styles section contains list of map styles you’ve built. This section will look empty if you haven’t built any styles. Click on create new style. You can choose from existing styles or you can start with a blank slate. Creating styles from existing styles is a great way to learn when you’re just starting. You might as well create a new one from existing style and carry on from there. However, for today’s post, lets start with the Empty style. You may type your style’s name in the Style name textbox before you hit Create. Click on Create.
Clicking on Create will open up Map Style Editor. This is where all the UI magic happens.
The left panel of Style Editor has all the layers of the map. By default, Empty style has only one layer — background. Background is the base layer of our map. We can change the color of the background layer by clicking on the background layer and changing the color value. Lets use the color #FFF8D4 (Of course, you may use any color you want :) ).
Click on +Layer button to add a new layer. Click on No tileset, click to select. By default you’ll see following tilesets (Tilesets are sets of tiles that make up a layer for our map. Think of each layer as a tile. For eg. land, water, roads, buildings, etc.):
- Mapbox Satellite
- Mapbox Streets v7
- Mapbox Traffic v1
- Mapbox Terrain v2
Click on water under the tileset Mapbox Streets v7. Click on Create Layer.This should add Water to our map with color black. Lets change the color to hsl(190, 84%, 81%). After this, we should be able to see land/ continent boundaries in our map.
Lets add one more layer — country boundaries — to our map. Again, click on +layer → No tileset, click to select. Under Mapbox Streets v7, click on admin. This will bring in all of the boundaries present in this tileset. However, we only require country boundaries. To do this, click on +Add filter and then Click on admin_level.
Choose is any of from the dropdown that appears. Click on Empty. Click on the number 2 from the list. This tells our map to display country boundaries. Meaning of each number (2, 3, 4) can be found here: https://www.mapbox.com/vector-tiles/mapbox-streets-v7/#admin. Finally, click on Create Layer.
Country borders should be visible as dark lines after this. The borders are too dark for my taste so I’ll change it to hsl(0, 0%, 61%) (again, you may stick to black or change to any color that you’d like :) ).
Mapbox allows some cool tricks beyond this. One of them is the ability to display/ hide data in zoom levels that we wish for. To illustrate this, lets make the country borders hidden at lesser zoom level and make them appear only when we zoom in. Click on Select data. In the zoom section, set Min value to 3 and leave max at 22. Go back to Style. Now, we’ll see borders only when we zoom at levels more than 3.
You may stop now or you may add more layers such as Roads, Waterways, National parks, buildings, etc. to our map and customize the colors and other properties to our taste and/or based on our branding guidelines.
2. Alternative way of styling — Cartogram
I recently found out about this. I’m guessing this is relatively new to Mapbox Studio.
Cartogram allows you to quickly create a map style based on an image. On a new tab, go to https://www.mapbox.com/cartogram/ while you’re signed-in in Mapbox. Pick a image of your choice. In my case, I used this image: https://www.dropbox.com/s/ocft6mzhqh2ukde/night-sky.jpg?dl=0
Drag and drop the image of your choice into the page https://www.mapbox.com/cartogram/. Voila! you should have a uniquely-styled map ready for you. The colors are based on the image you just uploaded. If you want, you can fine tune the colors by moving the colored-circles in the image:
Mine turned out like this:
Click on Save to save your new style. You should be able to see this latest map in your list of styles now.
Publishing the map
In any of the methods above, after we’re done building the map, we should publish the map to use it elsewhere.
In the style editor, while editing the map, click on Publish your style button situated at the top right of the editor.
Click on Publish in the pop-up window that appears. You can now either
- Click on Go back to editing to keep editing and customizing your style. Or,
- Click on Share, develop and use your style to use your style elsewhere in your own application or in Sketch (we’ll talk about this in a while in this post).
If you chose option 2, the page that follows this action allows various options to use the map we’ve created just now. To use our map style in Sketch app, we should make our map Public. Click on Make Public situated at the right-navigation list of this page.
We’ll also require the Style URL to be able to use in our Sketch file. Click on the copy (clipboard) icon beside the Style URL.
From Mapbox to Sketch
Using our Mapbox map in Sketch is fairly easy. Download and install the Sketch plugin Sketch Maps in your Sketch app. After you’ve installed the Sketch plugin,
- Open a new document and create an artboard in Sketch.
- Draw a rectangle.
- While the rectangle is selected, go to Plugins → Sketch Maps → Fill with Map
- Fill in the address field with the address you want.
- Set the zoom level that you want. Experiment with different zoom levels. Leave bearing, pitch and Style to their defaults.
- Remember the style URL we copied a while earlier, paste the URL in the Custom Style URL textbox.
- Click on OK
The map style you created should be filled in the rectangle you just drew.
— — — — — — — — — — — — — — — — — — —
Alternate Sktech plugin to generate map:
— — — — — — — — — — — — — — — — — — —
Conclusion
Mapbox is a very strong tool. While Mapbox Studio allows designers an interface to design their own map, it provides other powerful features to developers as well. The objective of this blog post is to encourage designers to give Mapbox a try. It has only been a couple of weeks that I’ve started using this and I’m already in love with it. Apart from the default tilesets that Mapbox provides, it is possible to upload other map shape files and datasets as well. I found this dataset of global airports and used it to visualize international airports all around the world:
To know more about how you can create a new tileset, see here: https://www.mapbox.com/help/studio-manual-tilesets/
So go ahead and give it a try if you haven’t tried it yet. If you’re a designer, this also helps your developer friend to use this style you’ve created and lessen the burden of creating base map style for her/him.
The maps built with Mapbox Studio are hosted in Mapbox. It is free to use as long as our map don’t get 50,000 hits per month. See their pricing model here.
Further resources on Mapbox Studio
I found the following playlist of YouTube videos by Ian Muehlenhaus to be very helpful while learning Mapbox Studio:
If you have any comment, feedback or mapbox studio related question, do let me know. I‘ve only recently started using/ learning Mapbox Studio, but I’ll try my best to answer if there are any queries regarding this. Cheers!
— — — — — — — — —
