Design a location-based game map with Mapbox Studio

A couple weeks ago I built a web map in the style of Pokemon Go, and a bunch of you emailed asking how I made it. For all you designers out there, here’s a tutorial on designing a fun, minimal map for your next location-based game with Mapbox Studio.

Step 0: Pick your colors

Before opening Mapbox Studio, I recommend picking the basic color palette for you map. You’ll need colors for roads, land, buildings, and water. I used Inkscape for this step, but any graphics program will do the trick. Here’s my palette:

If you need help refining your palette, check out https://coolors.co/ or https://color.adobe.com.

Step 1: Create your style

Head to Mapbox Studio and create a new style using the “Basic” template. If you’re new to Mapbox Studio, check out our Get started with Mapbox Studio guide. When you’re in the style editor, zoom in on a city of your choice – this will be your playground for creating this map style.

Step 2: Clean up the template

Before you get started adding to your color palette, delete the following layers (you won’t need them for this style):

• country_label
• place_label_city
• place_label_other
• road_major_label
• poi_label
• landuse_overlay_national_park
• admin_country
• waterway
• bridge_major
• bridge_minor
• bridge_minor case
• tunnel_major
• tunnel_minor

You can hightlight multiple layers at the same time by shift-selecting them and then deleting them all at once.

Step 3: Pick roads to style

When making a location-based game, roads are an important element of your map style. You need to include enough roads to provide context, but not so many raods that the map seems too busy.

First, adjust the filter on the road_major layer to also include structures of type “bridge.” To do this:

• Select the road_major layer from the list
• Click the Select data tab
• In the Filter section, click where it says structure is any of “ford” “none”
• Click + Add value and select “bridge”

Do the same thing in the road_minor layer.

Then, in the road_minor layer, reduce road density on the map by changing the class filter to only "link", "motorway_link", and "street". To do this:

• In the Filter section, click where it says class is any of …
• Click the next to path, pedestrian, service, street_limited, and track

To get out of x-ray mode and go back to styling your map, click the Style tab on the layer. For more guidance on filtering in Mapbox Studio, check out our filtering data in Mapbox Studio guide.

Step 4: Style the roads

Make roads wider

Wide roads are a hallmark of the Pokemon Go map style. To match this in your style, adjust road widths so roads are extra wide at high zoom levels. To do this:

• Select the road_major layer and click the number next to Width
• Right now, major roads will display at a width of 0.5px at zoom level 6, increasing gradually to 30px at zoom level 20. Change the 30px to 60px
• In the field underneath the graph, change the rate of change between stops from 1.4 to 1.6
• Select the road_minor layer and change the 30px to 50px
• In the road_minor layer, change the rate of change from 1.4 to 1.6

Add road casing

Your game map should have casings on the roads to make them really pop. To do this:

• Select road_major and road_minor in the layer list and click the Duplicate layer button at the top of the list – this will create two new layers called road_major copy and road_minor copy
• Rename these layers to road_major case and road_minor case

Next, change the styling of these layers:

• Select road_major case and click the number value next to Width
• In the toggle, click the button next to one of the two values under the graph
• Click the number next to Width again and change the value to 3
• In the Options section, click the number next to Gap width
• In the list, find the number next to road_major and click on it

Repeat this for road_minor case, setting Gap width to the road_minor value.

Finally, in the layer list drag road_major case under road_major and road_minor case under road_minor.

Step 5: Apply your color palette

Now it’s time to add your colors! Layer by layer, go down the list and change the layer color by clicking the field next to Color and choosing from the picker or typing in a value.

Here are other fun things to try:

• Change the opacity of your building layer to make the buildings semi-transparent and let the background show through
• Create an outline layer for your buildings by making a building case layer, converting it from a fill layer to a line layer, and setting the width to 2px

Step 6: Add textures

Textures can make your game map seem more alive! To add some textures to your map, you need an SVG of a pattern that will be able to repeat seamlessly, so that if you were to put two copies of the SVG side by side, they would line up. You can grab one from the internet or create one yourself in your design software of choice. Here are the images I created for my map. Make sure the fill color of your SVG is black and that it has a transparent background.

To add your SVG to the map:

• Drag and drop the SVG file or files into the style editor and click Upload
• Select the layer to which you want to add the texture (I recommend starting with background) and click the button to duplicate it
• Change the new layer name to background texture (or whichever layer you duplicated)
• In the background texture layer, click the field next to Pattern and select your uploaded SVG from the list
• Adjust the Opacity to create a subtle texture effect

Make sure the texture layer is above the original layer.

Step 7: Publish!

Feel free to make additional adjustments to the map as you see fit, whether that’s removing labels, adding back other features, or anything else to make it your own. When you’re finished and ready, change the name of your style in the top left corner of the page from Basic to My Awesome Game Map (or whatever you want to call it) and click the purple Publish button.

Congratulations! You just created a minimal map style for your location-based game. You can use this style right away with Mapbox GL JS, the Mapbox iOS SDK, or the Mapbox Android SDK. We’d love to see what you make – be sure to share it with us on Twitter @Mapbox!