This project is an interactive HTML/CSS/Javascript map made for The Windham Project, an art festival in downtown Willimantic. The base code for the map (including some, but not all, of the Javascript functions, is provided by Leaflet.The map features pins for each art work, parking area, and reception area, as well as a vector representation of the streets and buildings in the area. Using vector instead of 3D topographical mapping allows for quick and easy downloads of the map, especially in areas with little cell reception. For usability, there is a "Get My Location" button that will provide the user with his/her position with a unique, easy to locate pin. Also, there are javascript popup windows that provide information when clicking on the different pins. Each link in the popup windows is coded to open in a new tab, so the user does not continuously lose the map when navigating its features. Featured also is a poster I designed with a QR code that provides the user with the map when scanned. These posters are placed throughout the festival to provide accessibility to the map.
The following are different screenshots of the capabilities of this map. 
The "artist info" links shown above are directly linked to the WIndham Project's website pages dedicated to the specific artists featured on the map. 
This capture is meant to showcase how the map is coded to open a new tab when a link (like the "artist info" link) is clicked. This upgrades the ease of use because the user does not constantly have to leave the map page and come back, they can simply switch tabs. 
This capture displays the capability of the "Get my location" function of the map, which allows one to locate themselves on the map with a unique and easy to spot icon. The function also features a javascript popup that tells the user "You are here."
Of course, the "Get my Location" function requires the user to allow access to their location services. Apple OS users are required to turn their location services on through their device's settings. This pop-up is designed to help those without location services activate them, and use the map more efficiently. 
These nest 2 photos showcase the different javascript pop ups that come with the various pins on the map. The pins appear close together because the map is zoomed out. Zooming in further to the map will yield more space between pins. 
Interactive Map
Published:

Interactive Map

Published:

Creative Fields