Course info
Oct 15, 2014
2h 7m

This course introduces web developers to the Mapbox JavaScript API, a fully featured, flexible alternative to the Google Maps API. Mapbox provides both tile-based and vector maps (a point of difference from the Google Maps API). Developers will learn how to add maps to their applications, how to alter the visual style of the maps, how to overlay a variety of geospatial data on the maps, and how to implement features requiring interactivity.

About the author
About the author

Alex Korban is an author and consultant with an interest in functional programming, databases and geospatial applications. He co-founded a company to visualize geospatial data and wrote several books.

More from the author
Building Real World Applications with Elm
2h 18m
Feb 2, 2018
PostgreSQL: Time and Temporal Data
3h 37m
Aug 16, 2017
More courses by Alex Korban
Section Introduction Transcripts
Section Introduction Transcripts

Displaying Data
Hi, this is Alex Korban. You are watching module two of Getting Started with the Mapbox JavaScript API. In the previous module, we set up a map with a few controls overlaid on top of it. In this module, we will look at showing data on the map. There is plenty of useful information we could show about the delivery express fleet in the city, and we can use markers, lines, polygons, and GeoJSON data overlays to display it. The result we want should look something like this. This map shows vehicle positions, the routes they traveled, the locations of roadworks, the suburb boundaries, and popups with suburb names. So, let's start by adding current vehicle positions to the map. However, before we dive into writing code, I need to sidetrack a bit and talk about coordinates. What format does Mapbox expect the locations to be in?

Adding Interactivity
Hi, this is Alex Korban. You are watching module three of Getting Started with the Mapbox JavaScript API. In the previous module, we overlaid a bunch of data over the map, and we added a tiny bit of interactivity in the form of popups on vehicle markers and polygons showing suburbs and roadworks. In this module, we are going to devote all the attention to adding more interactivity. Interactivity can mean a couple of things. One is responding to events triggered by user actions, such as zooming the map, moving the mouse, or clicking on features. The other is responding to user actions on controls outside the map and modifying the map state to react to them. We will have a look at both of these aspects in this module. We will discuss Mapbox event handling and work through some code examples to see how events can be handled and how custom controls can be wired together with the map. Finally, we'll see that it's very easy to tie user actions performed on the map with other parts of the application outside of the map.

Going Further
Hi, this is Alex Korban. You are watching module four of Getting Started with the Mapbox JavaScript API. In the previous modules, we surveyed the capabilities of the Mapbox JavaScript API and learned how to display a map, put data on it, and allow the user to interact with the map and the data. That covered the major capabilities of the JavaScript API. So in this module, we will move beyond the API and look at some extra options Mapbox provides for adding mapping functionality to a website or web application, as well as mapping addresses to locations. To be more specific, I will give you a quick introduction to Leaflet plugins. Then we'll take a look at the API for static maps, which returns the map as an image. Following from that, we'll have a quick overview of vector-based maps, which are a recently introduced alternative to the roster tile maps we've been looking at so far. We will also explore the geocoding API, which maps locations to address data and vice versa. Finally, I will give you some pointers for learning more about Mapbox and related tools.