Morgan Griffiths Final Project Submission

README.md

@@ -0,0 +1,30 @@
+# Final Project README
+
+# Submitted by: 
+Morgan Griffths 
+
+# Data Sources: 
+* Site feature points from Google My Maps (originally crowdsourced from Somerville residents and compiled by me): https://www.google.com/maps/d/u/1/edit?mid=1ygLkbAZGw1hJQi2lYwernQcrtIanKU_J&ll=42.39486365890395%2C-71.10465965000002&z=14, 
+* Somerville Boundary from the City of Somerville: https://data.somervillema.gov/GIS-data/City-Limits/pz4k-wh6e 
+
+# External Packages and Libraries Used/Required
+* Leaflet for the basemap 
+* Mapbox, with the theme "dark-v11" for the custom map tiles
+* Font from W3Schools: "https://www.w3schools.com/w3css/4/w3.css" 
+
+# Steps to get site running
+* make sure that all external packages/libraries mentioned above are installed and running
+* use npx http-server to start a server in your browser 
+
+
+# Process 
+* I downloaded the data from the Google MyMaps map as a KMZ and used an online tool to convert it into a geoJSON
+* I then brought the geoJSON into VSCode and followed a similar process to the School Explorer Project to set up the map and   the filtering system, and learned how to add popups to the feature points on the map. 
+
+
+# Features  
+* Displays a map of Somerville with circle markers showing the locations of various "I Spy Somerville" entries
+* The user can click on each marker to load a popup that will display more information about the correspondinge entry
+* The user can type a name into the "Enter Submittor Name..." textbox and filter the entries by who submitted them
+* The user can click checkboxes to filter the entries by particular challenge or neighborhood location
+

package.json

@@ -15,5 +15,8 @@
     "jest-puppeteer": "^6.1.1",
     "stylelint": "^14.14.1",
     "stylelint-config-standard": "^29.0.0"
+  },
+  "dependencies": {
+    "papaparse": "^5.3.2"
   }
 }

prd-m-griffiths.md

@@ -0,0 +1,21 @@
+# Final Project Proposal - PRD 
+
+# Background 
+I am currently an intern at the Historic Preservation Commission of the City of Somerville, Massachusetts. At the start of the COVID Pandemic in 2020, my supervisor and I created "I Spy Somerville" a scavenger hunt aimed at giving residents an opportunity to digitally share the architectural and historic features of the city that they cared about most. Each week, we would post a new challenge asking people to find and submit photos of examples of particular architectural or historic features or noteworthy people in the city. Features ranged from mansard roofs, to particularly large and old trees, to statues, to monuments, to weathervanes. We would share the entries we received each week on social media, in our newsletter, and also on a Discovery Map, so that people could go out and see these features for themselves. I used Google My Maps to make the map, which was straightforward, but it quickly became cluttered and to be honest, I think it's now a little messy and somewhat overwhelming. So, I want to remake the map using JavaScript. Here's a link to the original map: https://www.google.com/maps/d/u/1/edit?mid=1ygLkbAZGw1hJQi2lYwernQcrtIanKU_J&ll=42.39486365890395%2C-71.10465965000002&z=14
+
+# Who is it for (users)? 
+* The Historic Preservation Commission of the City of Somerville, Massachusetts to put on their website 
+* Intended audiences are - 
+      Residents of Somerville;
+      Anyone interested in the architecture, history, and built environment of Somerville
+
+# Purpose 
+To allow for the intended audiences above to more easily access, view, and interact with the "I Spy Somerville" Discovery Map, and to allow them to digitally interact with the unique architectural and historic features of the city. 
+
+# Features 
+* Mobile-friendly website (maybe)
+* Displays a map of Somerville
+* Has buttons that a user can click that will load a particular week's submissions as markers on the map (each particular week will be assigned its own marker color)
+* Ideally, multiple buttons can be pressed to display more than one week's submissions at a time, and there will also be a button that clears the markers off the map, so users can start over.  
+* Ideally, the user can click (or tap) on each marker, and load a little information box that will show a picture of the    site, who submitted it, what neighborhood of the city it's in, and any other notes/stories the submitter included with it. I'm also playing with the idea of having a text entry box in the larger information box that would allow the user to share their own thoughts or stories about particular features (though I'm not sure about that yet)
+* I'd also like the website to have a text entry box, where users can enter in a particular submitter's name, hit a submit button, and load all of the entries that person has submitted over the course of the program. 

site/css/styles.css

@@ -0,0 +1,45 @@
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+}
+
+h1 {
+  background-color: #217e79;
+  color: whitesmoke;
+  margin: 0 px;
+}
+
+.map {
+  height: 100%;
+  z-index: 1;
+}
+
+.content-container {
+  display: flex;
+  flex-direction: row-reverse;
+  overflow: hidden;
+  height: 100%;
+  padding-top: 0;
+  margin: 0 px;
+}
+
+.map-container {
+  width: 75%;
+}
+
+.user-tools-container {
+  background-color: #217e79;
+  color: whitesmoke;
+  width: 25%;
+  overflow-y: scroll;
+  padding: 1rem;
+  padding-top: 0;
+}
+
+.popup-image {
+  width: 100%;
+}