bvasilop / wats1020-add-a-map

This assignment asks students to implement the Leaflet.js library in order to use "on ready" handlers and explore a third party library.

wats1020-add-a-map

This assignment asks students to "add a map to it"! Using the Leaflet.js library, we will combine jQuery, Bootstrap and Leaflet to make an elegant, interactive information page for a geographical location.

NOTE: This project comes stocked with images and text to allow you to build a page about Mt. Rainier. If you wish to stretch your creative muscles a bit more, you are free to pick a different geographical location to build your page about. You are responsible for filling in comparable information and imagery about your chosen location, and you are encouraged to use media that is either properly licensed or that you own.

Basic Requirements

In order to successfully complete this assignment, you will need to fulfill the following requirements:

• Take care of all the TODOs listed in the index.html file and the js/main.js file. (If you get stuck on the Leaflet.js implementation, you should consult the js/example-leaflet.js file.)
• Add a carousel of images rotating to the top of the page as indicated in the index.html file.
• Add a tabbed information display to the About section as indicated in the index.html file.
• Enhance the styling as indicated in several places throughout the index.html file.
• Add a map to the Map section as indicated in the index.html and js/main.js files.

NOTE: You can refer to the target_layout_wireframe.png file in the root of this repository to help clarify the goal layout we are trying to create.

Stretch Goals

If you wish to extend or enhance your experience this week, try going for one or more of the following goals:

• Add more functionality to your map -- popup layers, draw a trail, mark interesting zones, etc.
• Make your map (and entire page) mobile friendly so it looks great on iPhone (be sure to mention if you've done this so I definitely view it on a mobile device when grading).
• Use Bootstrap's affix feature to make the top navigation stick to the top of the page as you scroll.
• Create a "smooth scroll" effect using jQuery so when a user clicks the navigation they are smoothly transported to the proper place on the page.
• Make great use of icons (glyphicons) you have available through Bootstrap (or add FontAwesome if you need more).
• Make everything a lot more beautiful with your own design concept.