Philly One-Day Walking Guide - Lu Yii Wong

.eslintrc.mjs

@@ -1,18 +1,18 @@
-export default {
-  extends: ["eslint:recommended", "google"],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
+import js from "@eslint/js";
+import globals from "globals";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    ignores: ["templates/**"],         // keep what you had
+    languageOptions: {
+      globals: {
+        ...globals.browser,              // existing browser globals
+        L: "readonly",                   // tell ESLint about Leaflet's global
+      },
+    },
   },
-  env: {
-    browser: true,
-  },
-  ignorePatterns: ["examples/**/*.js"],
-  globals: {
-    L: "readonly",
-  },
-  rules: {
-    "object-curly-spacing": "off",
-    "max-len": "off",
-  },
-};
+]);

README.md

@@ -1 +1,75 @@
-Add a readme for your story map here. Include content overview, data citations, and any relevant technical details.
+# One-Day Guide to Philadelphia StoryMap
+Created by Lu Yii Wong 
+
+Fall 2025
+
+## Content Overview
+
+This project is an interactive story map designed to guide first-time visitors through a curated one-day walking itinerary in Philadelphia. The StoryMap presents a sequence of stops organized by **morning**, **afternoon**, and **evening**, highlighting cultural institutions, historic landmarks, public spaces, and local food recommendations.
+
+Each slide includes:
+
+* A short description of a featured location
+* A clickable map view with markers
+* Custom walking paths connecting each stop
+* Relevant images, links, and additional context
+
+The experience begins at **30th Street Station** and concludes at **Independence Hall and the Liberty Bell**, offering a complete and realistic one-day sightseeing route through Center City and Old City.
+
+**Target audience:**
+Visitors with limited time (one day) to explore Philadelphia who want a guided, walkable, and visually engaging introduction to major attractions, food stops, and historic sites.
+
+---
+
+## Stops Highlighted in the StoryMap
+
+**Morning**
+
+* 30th Street Station
+* Schuylkill Banks trail
+* The Rocky Statue & Steps
+* Breakfast at The Garden (Barnes Foundation)
+
+**Afternoon**
+
+* LOVE Park
+* City Hall & Dilworth Plaza
+* Reading Terminal Market
+* Chinatown
+
+**Evening**
+
+* Elfreth’s Alley
+* Betsy Ross House & garden
+* Cheesesteak stop in Old City
+* Independence Hall
+* Liberty Bell
+
+---
+
+## Data Sources & Citations
+
+* **Location Data:** All latitude/longitude coordinates were derived using **Google Maps** (accessed 2025).
+
+* **Walking Path Geometry** Walking path linework (morning, afternoon, evening routes) was created manually using [https://geojson.io](https://geojson.io) and exported as `LineString` features.
+
+* **Image Citations:** All images are credited directly on the individual slides where they appear. Sources include Visit Philadelphia, Instagram profiles, official museum websites, and personal photographs shot by me.
+
+* **Map Tiles:** Basemap tiles provided by:
+  * **CARTO** Light Basemap
+  * **© OpenStreetMap contributors** (Displayed using Leaflet)
+
+---
+
+## Accessibility Notes
+
+* All images include `alt` text
+* Heading structure uses `<h1>` for title slides and `<h2>` for all stops
+* Links are keyboard navigable
+* Tested with Chrome Lighthouse accessibility checker
+
+---
+
+## Acknowledgements
+
+This project was created as part of a JavaScript story maps assignment using a slide deck template. Special thanks to the course instructor, Mjumbe Poe, for providing the template and technical guidance.

css/index.css

@@ -0,0 +1,118 @@
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: 'Open Sans', sans-serif;
+}
+
+main {
+  display: flex;
+  height: 100%;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+.slide-section {
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  box-shadow: -0.5rem 0 1rem grey;
+  padding: 1rem;
+  width: 20rem;
+}
+
+.slide-content {
+  flex-grow: 1;
+}
+
+.slide-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 0.5rem;
+
+  width: 100%;
+}
+
+.slide-nav-button {
+  transition: all 0.1s;
+
+  padding: 0;
+  margin: 1rem;
+  width: 4rem;
+  height: 3rem;
+  border: 1px solid #888;
+  border-radius: 0.25rem;
+
+  background-color: #eee;
+  font-size: 1.5em;
+}
+
+.slide-nav-button:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+.slide-nav-select {
+  min-width: 0;
+}
+
+/* Chang the title slide, to remove the map and show an image instead */
+body.title-mode .map {
+  display: none;
+}
+
+body.title-mode main {
+  display: block;
+}
+
+body.title-mode .slide-section {
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  box-shadow: none;
+}
+
+/* Simple layout the title image */
+.title-image {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.title-image img {
+  flex: 1 1 45%;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  object-fit: cover;
+}
+
+/* Embed Video */
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 ratio */
+  height: 0;
+  margin-top: 1rem;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+}

data/afternoon-chinatown.json

@@ -0,0 +1,16 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "Chinatown",
+        "address": "Arch St &, N 10th St, Philadelphia, PA 19107"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.15619196262854, 39.95392218369031]
+      }
+    }
+  ]
+}

data/afternoon-cityhall.json

@@ -0,0 +1,16 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "City Hall",
+        "address": "1400 John F Kennedy Blvd, Philadelphia, PA 19107"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.16361185014377, 39.952931444096926]
+      }
+    }
+  ]
+}

data/afternoon-love.json

@@ -0,0 +1,16 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "LOVE Park",
+        "address": "1501 John F Kennedy Blvd, Philadelphia, PA 19102"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.16554304059103, 39.954428273570635]
+      }
+    }
+  ]
+}

data/afternoon-overview.json

@@ -0,0 +1,102 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "Reading Terminal Market",
+        "address": "1136 Arch St, Philadelphia, PA 19107"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.15910376445923, 39.953323787806035]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "City Hall",
+        "address": "1400 John F Kennedy Blvd, Philadelphia, PA 19107"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.16361185014377, 39.952931444096926]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "LOVE Park",
+        "address": "1501 John F Kennedy Blvd, Philadelphia, PA 19102"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.16554304059103, 39.954428273570635]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "Chinatown",
+        "address": "Arch St &, N 10th St, Philadelphia, PA 19107"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-75.15619196262854, 39.95392218369031]
+      }
+    },
+    {
+      "type": "Feature",
+    "properties": {
+      "label": "Afternoon Route"
+    },
+    "geometry": {
+      "type": "LineString",
+      "coordinates": [
+        [-75.17280085912356, 39.96107260441218],
+        [-75.17260921816356, 39.961261461631835],
+        [-75.17170576792192, 39.960771830725605],
+        [-75.17207079832275, 39.95923996281704],
+        [-75.1712312284011, 39.9586803678086],
+        [-75.17132248600107, 39.95849150345944],
+        [-75.17079319192025, 39.95807180303905],
+        [-75.17082969496026, 39.95798086760857],
+        [-75.17082969496026, 39.95791791223908],
+        [-75.17075668887946, 39.95780599144024],
+        [-75.17061067671943, 39.95773604084795],
+        [-75.17068368279944, 39.95744224757834],
+        [-75.17061067671943, 39.95734431620821],
+        [-75.17063805399944, 39.95720441400695],
+        [-75.17014526295861, 39.9571344627993],
+        [-75.16976198103781, 39.957064511520116],
+        [-75.16663184101868, 39.95486100800963],
+        [-75.16657708645788, 39.95476307294311],
+        [-75.16627593637789, 39.95463715622236],
+        [-75.16598391205704, 39.95460217931452],
+        [-75.16589265445705, 39.9545112392704],
+        [-75.16591090597706, 39.95442029910535],
+        [-75.16583789989704, 39.95430137716798],
+        [-75.16560975589621, 39.954196445875596],
+        [-75.16549111757253, 39.954119497340656],
+        [-75.16535423117169, 39.954091515604006],
+        [-75.16541811149253, 39.953811697607335],
+        [-75.16522647053168, 39.95378371574478],
+        [-75.16518084173168, 39.95351788747877],
+        [-75.16494357197087, 39.953510891984166],
+        [-75.16492532045088, 39.953447932499785],
+        [-75.16465154765088, 39.95323806713529],
+        [-75.16479755981086, 39.95253851126836],
+        [-75.16359295948841, 39.952377612406536],
+        [-75.16338306700838, 39.95325205817963],
+        [-75.16326903937643, 39.9532453929653],
+        [-75.16323296724683, 39.953408042723964],
+        [-75.15910991036523, 39.95291588703026],
+        [-75.1589917005896, 39.95337015378263],
+        [-75.15883416007024, 39.95383195795125],
+        [-75.15631298438328, 39.95349844583484],
+        [-75.15626552175877, 39.953710681006015]
+      ]
+    }
+  }
+  ]
+}