Build a Web Map with Open Source Tools
summary
A working web map that finds the nearest Capital Bikeshare stations, shows walking directions to the station and a bike route between stations, and updates with draggable origin/destination markers. Uses Mapbox.js (Leaflet-based) plus styles from Mapbox Studio, serves vector tiles (protocol buffers) with raster fallback, loads station data as GeoJSON, and runs spatial ops with Turf.js closest-point; typical city view loads about 15 tiles and accounts report a free tier of roughly 8,000 free map views.
AI-written summary · about
chapters (39)
- 0:00Start
- 1:08Oh my goodness, this talk was hard to write.
- 2:44I also want to reinforce the idea that maps are hard...
- 5:19First of all, the entire map is housed in a map container in a div.
- 5:41Mapbox.js contains a ton of useful web mapping functions.
- 5:53Chief among them is loading map tiles.
- 6:04"What are map tiles?" you ask?
- 7:31In particular, the raster tile.
- 8:12Only the tiles in the current map view are requested and loaded. This makes modern web maps super hella fast
- 8:46Raster tiles are available at preset zoom levels with a different set of tiles at each zoom.
- 9:49Zoor level 1:4 tiles for the World.
- 11:46More recently, we've graduated to vector tiles.
- 12:12Vector tiles are similar to raster tiles...
- 12:49Roads, parks, water bodies, bike paths, points of interest, state boundaries...
- 13:22all of this is vector data with attributes attached to it.
- 14:23Vector tiles store all of this information, attributes included, as protocol buffers, or PBF files.
- 14:44Protocol buffers are super lightweight and compact.
- 15:01So vector tiles are one of the super awesome open source components of web maps.
- 17:01And Mapbox.js is what makes them possible!
- 19:08Where did these map tiles come from?
- 20:07These tiles were created with our desktop design tool, Mapbox Studio.
- 21:03Using a styling lanquage called CartoCSS, you can style any vector data you wish.
- 28:27From Mapbox Studio, you can upload a style to your account and use it in Mapbox.js, like in this example.
- 30:14the custom style is being applied to the associated vector tiles to render tiled images in the container.
- 31:17Boom! Tiles in a map!
- 32:25In the code, we create a marker icon with the L.mapbox.marker.icon constructor and add it to an L.marker object.
- 33:08The styling properties for the icon come from Maki, an icon font, and the Mapbox simplestyle-spec.
- 33:40This whole process is made up of tiny, self-contained components
- 33:57We also give the marker a location to draw itself and flag it as draggable so we can change the starting point of our trip.
- 34:13We then create a second marker that has a different style but is also draggable.
- 35:07Then we add both of them to the map.
- 35:50When we move the markers, there are some directions that appear on the map.
- 36:11That's actually four separate things the map is doing.
- 36:29Locating the nearest station to each marker
- 36:52GeoJSON is an extension of JSON, which stands for JavaScript Object Notation.
- 38:16Because GeoJSON is just JavaScript, it can easily be used in web maps!
- 40:28Just to digress into one of the many silly nuances of web mapping...
- 42:38To do this, we use another awesome open source library called Turf.js.
- 43:17Turf.js is a spatial analysis library.
related talks
30mStreamlined Map Development: Part 1
32m"A Developer's Guide to Open Source Web Mapping Libraries"
23m'OpenLayers: The Open Source Option of Adding Maps on Websites'
51mWays to get data into Mapbox maps
38mBeautiful, Interactive, and Portable Maps using Folium and Live API Data
36mStreamlined Map Development Part 2
48mGetting started with Mapbox GL JS
21mMake a map in minutes: How Mapbox is streamlining map development