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
Prerequisites
Before the workshop, sign up for a free account and create an access token. You’ll also want to download a source code editor like Visual Studio Code for swift and efficient map construction.
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.