Building Interactive Maps with Mapbox
Workshop @ Concatenate Lagos 2019
Anjana Vakil, Software Engineer @ Mapbox
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
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
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
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
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:
Stay in touch
Keep up with @Mapbox and @AnjanaVakil on Twitter, and contact Mapbox if you need any help with our tools.
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