Philadelphia Historical Sites Day Trip Planner_Xiaoyou Guo

README.md

@@ -1 +1,55 @@
-Add a readme for your dashboard here. Include content overview, data citations, and any relevant technical details.
+Philadelphia Historical Sites Day Trip Planner
+
+This project is an interactive web map that explores historical sites in Philadelphia and their surrounding urban context, including food retail availability and parks and recreation sites. The map is designed as a simple “day trip planner,” allowing users to search for historic sites and understand their relationship to nearby amenities.
+
+The project was created using Leaflet.js, GeoJSON, and the Fetch API, with an emphasis on layered spatial visualization and basic user interaction.
+
+🔍 Project Features
+
+Historic Sites Layer
+-Displays registered historic sites as orange polygons
+-Clickable features with popups showing site location information
+-Searchable via the sidebar input box
+
+Food Retail Layer
+-Displays neighborhood food retail areas as polygons
+-A single red color is used, with varying opacity representing the number of restaurants
+-Higher opacity indicates a higher concentration of food retail
+
+Parks and Recreation Layer
+-Displays parks as green circular markers
+-Styled to appear above other layers for visual clarity
+-Interactive Search Panel
+-Users can search historic sites by address or name
+-Matching results are listed in the sidebar
+-Clicking a result zooms the map to the selected site and opens its popup
+
+Legend
+Explains color and opacity encoding for each data layer
+Clarifies how food retail density is represented
+
+🗺️ Map Layers & Styling Logic
+
+Layer drawing order is controlled using Leaflet panes to ensure correct visual hierarchy:
+Food Retail 
+Historic Sites
+Parks and Recreation 
+Food retail density is represented using opacity levels instead of multiple colors to maintain a clean and accessible visual language.
+
+📊 Data Sources
+
+Historic Sites
+Philadelphia Register of Historic Places
+Format: GeoJSON
+
+Food Retail Data
+Neighborhood-level food retail statistics
+Attribute used: TOTAL_RESTAURANTS
+Format: GeoJSON
+
+Parks and Recreation
+Philadelphia Parks & Recreation Program Sites
+Format: GeoJSON
+All data files are stored locally in the data/ directory and loaded using the Fetch API.
+
+Data source: Open Data Philly

css/styles.css

@@ -0,0 +1,164 @@
+html {
+  font-size: 24px;
+  font-family: sans-serif;
+}
+
+body {
+    padding: 0;
+    /* border-box doesn't include margin, only padding */
+    margin: 0;
+    height: 100%;
+}
+
+header {
+    height: 9vh;
+    font-size: 12px;
+    box-sizing: border-box;
+    /* background-size: cover;  This option do not reshape img*/
+    /* background-position: bottom; */
+}
+
+h1 {
+    color: #745d46;
+    height: 100%;
+    padding: 2vh;
+    margin: 0;
+    box-sizing: border-box;
+    /* adjust background image transparency */
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+main {
+    height: 91vh;
+    display: flex;
+    flex-direction: row;
+}
+
+#map { flex: 1;     
+  width: 100%;
+}
+
+#sidebar {
+  width: 300px;              
+  padding: 12px;
+  box-sizing: border-box;
+
+  background-color: #f8f8f8;
+  border-left: 1px solid #ddd;
+
+  display: flex;
+  flex-direction: column;    
+  gap: 8px;
+
+  overflow-y: auto;          
+}
+
+h2 {
+    color: #745d46;
+    font-size: 18px;  
+    height: 100%;
+    padding: 2vh;
+    margin: 0;
+    box-sizing: border-box;
+    /* adjust background image transparency */
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+#site-search {
+  padding: 6px 8px;
+  font-size: 14px;
+}
+
+#results {
+  border: 1px solid rgb(189, 189, 189);
+  min-height: 300px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+#results button {
+  padding: 8px;
+  margin-bottom: 4px;
+  text-align: left;
+  border: 0.5px solid #ccc;
+  background: white;
+  cursor: pointer;
+}
+
+#results button:hover {
+  background: #eee;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 10px 0 14px;
+  font-size: 14px;
+}
+
+.controls label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.map-legend {
+  background: white;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: #333;
+  border-radius: 4px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+}
+
+.map-legend h4 {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  display: inline-block;
+}
+
+.legend-color.historic {
+  background: #ff8000;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.legend-dot.park {
+  background: #43bc63;
+}
+
+.legend-section {
+  margin: 6px 0;
+}
+
+.legend-color.food {
+  background: #540404;
+}
+
+.legend-color.food-20 { opacity: 0.75; }
+.legend-color.food-10 { opacity: 0.6; }
+.legend-color.food-5  { opacity: 0.45; }
+.legend-color.food-1  { opacity: 0.3; }
+.legend-color.food-0  { opacity: 0.15; }