BayGeo's Web Mapping with JavaScript (Fall 2025)

Web mapping with JavaScript involves using JavaScript libraries and tools to create, display, and interact with maps on web platforms.

This hands-on workshop empowers students to develop and publish custom web maps and perform geospatial processing using modern JavaScript approaches and tools. Students will walk away from the class having published a custom map to the web similar to this one.Students are encouraged to have some basic JavaScript or programming knowledge. Students will need access to a computer running Windows or MacOS. No special software is needed prior; we will install all the dependencies that students need in the course of the workshop.

Learning Objectives

In this workshop, students will learn how to acquire, create, and process geospatial data and publish their data as interactive maps using open-source JavaScript tools.

This Workshop Meets Three Times on Zoom

• Saturday, October 4 (9:00 a.m. to 1:00 p.m.) - class meets on Zoom with lunch break
• Saturday, October 11 (9:00 a.m. to 1:00 p.m.) - class meets on Zoom with lunch break
• Saturday, October 18 (9:00 a.m. to 1:00 p.m.) - class meets on Zoom with lunch break

Lesson Plan

Class 1

• Set up a development environment with VSCode and Node.js
• Create a repository for managing code in GitHub
• Walkthrough basic JS code for creating a Mapbox GL JS map
• Run a development server
• Create a basemap in Mapbox

Class 2

• Add custom data to a map using Mapbox GL JS
• Style data in Mapbox GL JS based on attributes
• Use Turf.js to geoprocess data and create new datasets
• Introduction to Mapbox GL JS expressions for complex styling

Class 3

• Add header, attribution, and legend to a map UI
• Add click & hover interactivity to data in Mapbox GL JS
• Create data popups in Mapbox GL JS
• Publish your completed map to the web using GitHub Pages

Your Instructor, Rob Gaston

Rob Gaston is our super-friendly and energetic instructor who also happens to be the Senior Web Developer at Farallon Geographics Inc. in San Francisco. A true JavaScript whiz with extensive experience, Rob has a long history of working with JavaScript and has been actively involved with BayGeo, contributing to various geospatial projects and initiatives. His deep knowledge and practical expertise in geospatial data processing and web map development make him an excellent guide for this hands-on workshop course. Rob’s guidance will ensure that students walk away with the skills needed to publish custom maps to the web, leveraging modern JavaScript tools and techniques.

Questions?

• Contact Rick Kos, BayGeo's Education Director, at rkos@baygeo.org
• For more information about BayGeo, the Bay Area's hub for the geospatial community, visit baygeo.org