Building a Custom Map Using Mapbox Studio to Add to Your Apps

I've been competing in the Mapbox Explore Outdoors Challenges the past few weeks. I enjoy their challenges because they often get me to branch out a bit and create some apps I wouldn't normally make.

The first round was building a map of your favourite hometown spots. Since it the challenge was titled "explore outdoors" I decided to build a custom map of my favourite rock climbing spots in Jasper National Park.

If you'd prefer to watch a screencast over reading this how-to you can watch it below

Step 1 - Create a Dataset: Go to http:://mapbox.com/studio and login. The studio can be a little intimidating but you should be able to go to Datasets in the upper right corner. You can create one from scratch or use a GeoJSON file. To learn the ins and outs and creating a dataset we're going to do both. Click the new dataset button and click upload to upload this GeoJson file (click view raw to grab the actual data).

All of the GPS points are now imported into our dataset. To manually add one you can click the draw a point button and click on the map. Make sure the add a property for Name and the name of the rock climb.

Step 2 - Add the Dataset to a Style: Now that we are done with our dataset we can add it to a style. In mapbox studio go to Styles and select the "pick a template or upload a style" button. You should see this screen and we will select the outdoors style template.

In the style editor, click the Add Layer button and then find the rock climb datasource we just created and select it. Don't forget to click the Go to data button. You should see all the points in your new style. You can play around with colours using the side bar.

Click the publish button in the top right and now our map is ready to use in our apps! Click the Share & Use button and you will get links to Javascript, iOS, Android, Unity and Third Party so you can use your custom map wherever you want!!!