Web App specs

Description

This project is an idea I had for a long time, I wanted to have a visual geographical representation of the places I visited or lived at, and see pictures taken there. The technology now is available to build a map application with photo slideshows, namely Google Maps and Slimbox API. The places are marked on the map as cities and countries. Clicking on a red marker opens an info window with photo thumbnails. Clicking on a thumbnail opens an interactive slideshow with full size photos. The map is continuous and can be moved by dragging a mouse.

Functional and technical requirements

  • Interactive world map
  • Geocoding
  • Clickable markers
  • InfoWindows with content (title, thumbnails)
  • Interactive photo slideshow
  • Responsive design
  • Custom map styling
  • Unique color scheme
  • Webpage with header, body, footer
  • Navbar with links to other content
  • Project description page
  • Floating box with instructions

Tools and technologies

  • Google Maps JavaScript API
  • Slimbox API
  • Bootstrap
  • JQuery
  • JSON map styling
  • Google Fonts API
  • CSS3
  • HTML5 semantic elements