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.

Technologies and online References

• Mapbox gl js examples
• Mapbox help and guide
• Mapbox developer tools
• Flickr image gallery
• Node authentication
• Starter MEAN stack app structure
• EJS template view engine for Express framework

Interface

Sidebar

• Selected locations:
  • If no user logged in, the selected locations will be read from a pre-defined geojson data file and rendered as example locations list.
  • Click the list will update the map (fly, zoom) to that location.
  • If user is logged, the selected locations will be specific to this user, loaded from database by server.
  • Can choose show or hide markers for the locations
• Current locations:
  • For exploration. User click a location, an area centered around this location with a radius (can change from a slider widget at top left cornder of map) will be used to search the public feed of flickr image stream.
  • The current location can be saved with a tag (text input)
  • The current location can be added to the selected locations section.
  • If user is logged in, and the location is added to the selected locations section, the location will be submitted to server and inserted to database

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

Flickr gallery

Code from https://www.sitepoint.com/creating-image-gallery-using-flickr-api-requirements-markup/.

Change the search method from text to geolocation (lat, lon, radius)