BayGeo's Web Mapping with JavaScript (Fall 2025)

This workshop aims to give you the foundation to start developing your own interactive maps and geospatial visualizations for the web by focusing on a few popular and open source tools that you can master and build on as you go. With a few foundational skills and a bit of knowledge, our friendly and energetic instructor will show how you can build your own beautiful maps and visualizations for the web. This workshop assumes some knowledge of HTML, CSS, and JavaScript. If you’re new to those languages, we can send you some materials to get started ahead of time.

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

In this workshop, students will learn how to acquire, create, and process geospatial data, then publish those data as interactive maps using cutting-edge JavaScript tools and web-based services. Key topics include MapLibre GL JS, MapLibre services, GeoJSON, TurfJS, and deploying web maps with GitHub.

We will use free basemap services from OpenFreeMap. Students will still need a GitHub account.

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 can bring any kind of modern laptop with 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 MapLibre GL JS map
• Run a development server
• Create a basemap in MapLibre

Class 2

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

Class 3

• Add header, attribution, and legend to a map UI
• Add click & hover interactivity to data in MapLibreGL JS
• Create data popups in MapLibre 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