How To: Make a Slippy Map
In a new series of ‘How To’ blog posts, the Ramani Huria team explains some of the great tools and tech we use in our mapping process. This post will introduce you to Slippy Maps and the process we used to create the Ramani Huria Slippy Map using Mapbox Studio software. By the end of the post, you will be able to create your own Slippy Maps!
The term Slippy Map, in general, refers to web maps which let you zoom and pan around (the map slips around when you drag the mouse) and are a great way for making maps interactive online.
Why should you create a Slippy Map?
- Slippy maps automatically use the latest vector data present in the OSM server
- Maps can be adapted to display the data to highlight your goals and purposes; in the Ramani Huria Slippy Map highlight drainage and medical and educational facilities
- You can export a PDF from Mapbox Studio.
- Creating Slippy Maps can increase your knowledge on the web-based map production
Setting up
Before you begin creating Slippy Maps, you need to set-up Mapbox Studio:
- First, register an account to create your user account in Mapbox where your styles and sources will be stored
- Next, download Mapbox Studio; you will need to download and install the Mapbox Studio software into your computer
Mapbox Studio uses a language called CartoCSS to determine the look of a map. Colours, sizes, and shapes can all be manipulated by applying their relative CartoCSS parameters in the stylesheet panel to the right of the map. Mapbox Studio Classic ships with 16 starter styles for you to use or customize for your final map design. Starter styles make styling your maps faster and easier and can help you learn CartoCSS. If you have limited knowledge of CartoCSS, you can learn more here or here.
Creating the Ramani Huria Slippy Map
To explain the process of creating a Slippy Map, we’ll guide you through the process of creating the Ramani Huria Slippy Map. This map was created through customizing one of the starter styles in Mapbox Studio. This was used to make the processes of styling the map easier and faster.
Now that you are registered with Mapbox Studio and have the software install, it’s time to start making your map!
- Launch Mapbox Studio Classic. After launching, the program will ask you to connect to your Mapbox account, your “username” and “password” that you used to register your account.
- The program will ask for authorization to access your Mapbox account. Then click on the blue button labelled “Allow”. Then you should be able to access your 16 starter styles.
- Select the starter style that you wish to start customizing your work. To follow the process of creating the Ramani Huria Slippy Map, select the “OSM Bright 2” starter style.
- When opened, this starter style comes with 3 CartoCSS tabs visible in the righthand window: ‘style’; ‘road’; and ‘labels’. Customization of the map will be done on these CartoCSS tabs. The ‘+’ sign is an option to add more tabs for other features if needed.
- The left side of the window shows the following options:
- Save as – when you want to save some changes you have made Changes will then appear to the window immediately after you have saved them
- Settings – provides options to name the style, provide its description, upload the style to mapbox and providing attributions etc.
- Layers – lists layers that are composed in the map
- Fonts – provides font types to be used for labelling
- Docs – provide documentation for guides and interface tour
- Styles and sources – provides options to add new, or browse, style or source
We’ll now show you how to start customizing and adding your own style. To begin, we’ll highlight the drainage lines that are present in the map data.
- In the top right, click (+) sign to add a new stylesheet. Name the stylesheet ‘water’, and add the following CartoCSS to define the colours we’ll be using. You’ll notice Mapbox Studio gives you a preview and an easy way to update them if you click the coloured circle that appears with each colour!
// Color palette //
@water: #a0c8f0; // blue
@river: #6ca4df; // darker blue
@drain: #a238df; // purple
@ditch: #df32bd; // darker pink
- The “Layers” panel will show you which elements you can style; for example “#road”, “#waterway” and “#building”. We’ll now proceed to make the drains and ditches in the section of the map you’re currently viewing more prominent, by adding some styles to the “#waterway” layer. If you select ‘#waterway’, Mapbox Studio will show you which attributes you can use. For waterways, we can style the following values for the ‘type’ attribute: ‘river’, ‘canal’, ‘stream’, ‘ditch’ and ‘drain’.
- Add the following CartoCSS, then click ‘Save’ in the top left of the window:
// Drains //
// **** add width and depth to label, maybe type?
// (would do dashes for covered features if it came with MapBox streets)
#waterway {
[type=’drain’],
[type=’ditch’] {
line-join: round;
line-color: @drain;
line-width: 0.2;
[zoom>=14] { line-width: 0.5; }
[zoom>=15] { line-width: 1.0; }
[zoom>=18] { line-width: 2.0; }
}
}
#waterway [type=’ditch’] {
line-colour: @ditch;
}
- This snippet of CartoCSS does the following:
- For all waterways of types ‘drain’ and ‘ditch’, we want lines to be the colour we assigned to ‘@drain’, and have a line thickness of 0.2
- As we zoom in on the map, want the line to render thicker (which is what the lines starting with ‘[zoom>=?]’ do)
- Lastly, we tell Mapbox Studio to render ditches in a different colour; the colour we assigned to ‘@ditch’
- Now, we’re ready to upload! Click “Settings”, then “Upload to Mapbox”.
- Finally, you can view the map you just made from your account and may decide to share it through social media, such as Facebook, Twitter, Pinterest, or through copying and pasting the URL link.
Exporting Slippy Maps
The process of exporting the maps from Mapbox Studio is a very simple and quick way of exporting the maps into several formats for further public/private uses. To export a map:
- Pan and zoom to your area of interest
- Click on the image icon in the upper right of Mapbox Studio Classic to open up the export panel
- Use the bounding box to set the export area
- Adjust the crop size, crop bounds, centre point, image format and resolution as needed
- Select type of file format you want your output to be in. Currently, there are 2 file formats that you can save your output in, which are png and jpeg formats.
- Select “download” and save it to your local drive
Limitations of Slippy Maps
On processing Slippy Maps, new users may face difficulties in styling the maps as styling is done by writing CartoCSS which new users may not be familiar with. However, there are many online resources to help, and we advise you to learn how to use the CartoCSS language before you start making maps.
Using Mapbox, Slippy Maps are uploaded and stored in the user’s account, and the type of account you have affects how much storage you may use. Mapbox’s starter plan is free and ideal for anyone who is beginning to make Slippy Maps and learning CartoCSS.
We hope that you have now created your own Slippy Map and are excited to create more maps and experiment with stylings! Let us know your experiences and share your maps with us on social media on Facebook or Twitter @ramanihuria
