Build interactive Mapbox app

  • Client hosted: Map App
  • Full stack project with server side implemenation: source repo
  • Local repo: ~/Documents/mapbox_GL_JS/

What does this app do

  • Client (Mapbox + flickr api): Searches for images posted to flickr based on a map location and specified surrouding circle diameter.
  • Server (Express + Passport + Mongodb): user login authentication, user’s selected locations.


Mapbox map

Interactive map using Mapbox GL JS API. Include basic navigation methods such as zoom and pan. Click or mouse move event will provide Longitude / Latitude info. A geolocation control is added as a plugin, so user can search an address and update the map to that location.

Layers used:

  • A tile layer: provide the map in preset style provided by Mapbox
  • A symbol layer: markers of selected locations
  • A circle layer: area surrounding the mouse clicked current location with a changable radius