Building Interactive Maps with Mapbox

Workshop @ Concatenate Lagos 2019

Anjana Vakil, Software Engineer @ Mapbox

Overview

Location data is all around us, and has become an increasingly important component of web & mobile apps users love. In this hands-on workshop, we'll learn how to build an interactive, custom web map using open data and free, open-source tools from Mapbox. Through a hands-on project, we will cover basic web mapping concepts and tools, including:

• Creating & editing map data
• Editing & styling maps with Mapbox Studio, an online map data & design tool for creating beautiful custom map styles
• Developing map applications with Mapbox GL JS, an open-source JS library for fast, interactive, WebGL-driven maps

Goals

By completing this workshop you'll learn how to:

• Create a custom dataset with the Studio dataset editor
• Include your data in a map style & customize the map's design with the Studio style editor
• Add your custom map to a web page with Mapbox GL JS
• Make your web map interactive with event handlers
• Create a "scrollytelling" map from your own data & style

Prerequisites

No prior experience with geographic data or web mapping is required; basic familiarity with HTML & JS will be assumed but everyone is welcome.

What you'll need

• Laptop with browser (Chrome or Firefox preferred) & text editor of your choice
• Free Mapbox account - sign up at bit.ly/mapbox-concatenate-signup
• The workshop materials - fork or download this repository from github.com/vakila/mapbox-concatenate-workshop

Materials

• Slides
• Instructions & code examples in this repository

Contents

Part 1: Data

Part 2: Style

Part 3: Display

Part 4: Interactivity

Part 5: Creativity

After this workshop

[Optional] Publish your maps on Github Pages

If you forked the workshop repo on Github, you can use Github Pages to publish your maps right now!

• Commit any changes you made to your fork of the repository:

  $ git add .
  $ git commit -m "add my awesome maps"
  

• Create a new branch called gh-pages and push it to your fork on Github

  $ git checkout -b gh-pages
  $ git push -u origin gh-pages
  

• Wait a few minutes, and your maps will be published at https://<your-username>.github.io/mapbox-concatenate-workshop/...!

Share what you #builtwithmapbox

We'd love to see whatever you build! Share on Twitter with the #builtwithmapbox hashtag so that we can amplify your work!

Learn more about maps

We've only scratched the surface of what maps & Mapbox tools can do!

For more information & ideas, check out:

• The Mapbox Documentation, including Help and Tutorials
• Documentation & Examples for mapbox-gl-js
• The Mapbox Studio Manual

Stay in touch

Keep up with @Mapbox and @AnjanaVakil on Twitter, and contact Mapbox if you need any help with our tools.

Thank you

This workshop would not have been possible without:

• The amazing Concatenate Conf organizers, especially Christian Nwamba, Gift Egwuenu, and Sarah Drasner
• My fabulous colleagues at Mapbox, especially Mikel Maron, Marena Brinkhurst, and John Branigan