Build a Web Map with Open Source Tools
summary
Builds a working interactive web map end to end using Mapbox.js (Leaflet), Mapbox Studio styles and vector tiles, GeoJSON overlays, client side spatial analysis with turf.js, and routing via OSRM/Mapbox Directions with an elevation profile from the Surface API. Shows draggable origin and destination markers, finds nearest bikeshare stations, requests walking and cycling routes, and renders elevation; four distinct tasks happen in real time and the demo is fast and functional.
AI-written summary · about
chapters (5)
- 0:00Start
- 0:09Build a web map with open source tools! Lyzi Diamond OSB 2015
- 36:29Locating the nearest station to each marker
- 49:43The Mapbox Directions API is built on top of the Open Source Routing Machine (OSRM), an open source project built on top of OpenStreetMap.
- 55:56Boom! Bike directions!
related talks
23m'OpenLayers: The Open Source Option of Adding Maps on Websites'
32m"A Developer's Guide to Open Source Web Mapping Libraries"
30mStreamlined Map Development: Part 1
18mBuilding Maps with Impact on React and the JAMstack
53mCome Make a Map: Completely Custom, Open Source Maps with TileMill
50mAdvanced map style customization in Mapbox Studio
21mMake a map in minutes: How Mapbox is streamlining map development
27mA Developer’s Guide to Open Source Web Mapping Libraries