Designing web maps with Mapbox
This workshop is intended for anyone with a basic understanding of web mapping who wishes to expand their skill set and design more customizable maps. There are 3 main sections: an introduction to Mapbox and its products, a guided developer environment set-up, and a hands-on portion where we will modify given code to design an interactive map powered by Mapbox. By the end of this workshop you will:
- Understand the advantages of web mapping using Mapbox GL JS
- Be familiar with the elements of code that make a web map work
- Know how to modify code to customize an interactive map of your own, and
- Have the basic skills to pursue further tutorials more focused on your individual research interests or project needs
Before The Workshop
Before the workshop, download a source code editor for swift and efficient map construction. The workshop demonstration uses Visual Studio Code, but other editors like Notepad++ and Sublime Text will work similarly.
Note: Although we we will be working with Mapbox code libraries, you do not need to sign up for an account. An access token will be provided for you during the workshop, and is all you need to get started making web maps powered by Mapbox.
If you are unfamiliar with web mapping, we recommend you checkout our Leaflet workshop for a gentle introduction. Additionally, understanding basic cartographic principles and what code is and does will make diving into web mapping easier. Refer to these resources at any time:
- Intro level computer programming. Matt Adesanya’s A Gentler Introduction to Programming is a great starting point, and will be more than you need for this workshop.
- Intro level HTML, CSS and JavaScript. Sololearn.com offers several courses on these topics and more, but there are several other educational resources to choose from on the web if you prefer something different. You’re not expected to be a pro for this workshop, but understanding these concepts will provide some very useful perspective.
- Basic cartographic design concepts. What is map making without a consideration of cartography? Axis Maps has written a phenomenal short guide to cartography, and the web map module is especially relevant.
GIS Resources at UBC:
- General Informational website for all things UBC GIS: gis.ubc.ca
- UBC Library’s guide for finding and working with GIS resources: guides.library.ubc.ca/gis
- UBC’s GIS Slack (create your own channel or lurk!): ubcgis.slack.com
- Archive of all Research Commons workshops
- Contact UBC Library’s Geospatial team:
library.gis@ubc.ca - Schedule a 1:1 consult with the geospatial team here
This workshop was authored by Lily Demet.