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

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

9jaswag / mapbox-concatenate-workshop