Fun in the Library with Mapbox


Phil White

University of Colorado Boulder

outpw.github.io/WAMLpres2019

What is Mapbox?

  • JavaScript webmapping platform
  • Free-ish
  • Highly customizable and fun!
  • Why use Mapbox?

  • Mapbox GL JS is cutting edge
  • WebGL rendering, vector tiles
  • People want to use it
  • Ubiquitous (except... Google)
  • Faster, greater functionality than Leaflet
  • 2 fun projects worth sharing


    1. Creating Sanborn webmap indexes using Mapbox, GitHub

    2. DH web mapping project collab w/ Art professor

    Sanborn Indexes using Mapbox & GitHub

    Full attribution to Evan Thornberry of UBC! Check out his presentation on developing this workflow.


    Objective: make our scanned Sanborns easier to find... for free!


    I followed Evan's method with an update from Leaflet to Mapbox GL JS.


    1. Heads up digitize new layers based on Sanborn index/keymap pages as GeoJson

    2. Store layers in GitHub repository

    3. Create a spiffy webmap using Mapbox GL JS

    4. Add layers to webmap straight from GitHub

    5. Embed someplace (like a libguide)

    View the code of the webmaps with added GeoJson layers on GitHub!

    Bringing the Philippine Village back to life

    Art Professor wanted to create an interactive webmap for use on mobile device depicting historical map of 1904 St. Louis World's Fair.


    Started as a straightforward GIS consultation on georeferencing...


    Quickly realized more conventional approaches wouldn't meet her needs.

    Objective: build a mobile webmap with geolocation services, geocoding, toggle-able basemaps

    Good news! This is easy and free* with Mapbox!

  • 50k free views/month
  • 100k free geocoding requests/month
  • Image overlay only requires corner XYs
  • Adding these elements was easy because documentation is excellent!
  • View the map with your phone or browser:

    bit.ly/STL1904map


    Check out the code for desktop and mobile!

    All that code looks scary!


    Do what I did... steal it, adapt and improvise, share!

    Thank you!


    Phil White, University of Colorado Boulder

    Email: philip.white@colorado.edu

    Slides: outpw.github.io/WAMLpres2019

    Code examples: github.com/outpw/geodex

    Mapbox GL JS examples