Culture Memorial — NYC

An interactive map of New York City where users can explore and create cultural and historical memorial markers placed across neighborhoods.

---

What is this project?

Culture Memorial is a browser-based prototype that lets users discover, add, and preserve stories about the cultural communities that shaped New York City. Each "memorial dot" on the map represents a neighborhood's living heritage — from the jazz legacy of Harlem to the Russian immigrant community in Brighton Beach.

Default cultural markers included:

Neighborhood	Culture	Color
Harlem	African American / Jazz / Renaissance	Red
Flushing, Queens	Chinese / Lunar New Year	Orange
Coney Island / Brighton Beach	Russian / Eastern European	Teal
Washington Heights	Dominican / Caribbean	Purple

Key features:

• Interactive Leaflet map centered on New York City
• Click any pin to open a detail panel with description, image, and embedded video
• Add your own cultural memorials by clicking the map
• Edit existing memorials
• Filter memorials by title search or tags
• Upload images and videos to Firebase Storage
• Undo / Redo any marker actions
• All data saved to browser localStorage — no backend required

---

Tech Stack

Layer	Technology
Framework	Angular 21 (standalone components, signals)
Map	Leaflet 1.9.4 + CartoDB Positron tiles (no API key needed)
Storage	Browser localStorage
File uploads	Firebase Storage (optional)
Styling	Component-scoped CSS + CSS custom properties
Rendering	Angular SSR (Express)

---

Project Structure

(repo root)
├── src/
│   ├── index.html                  ← Leaflet CDN loaded here
│   ├── styles.css                  ← Global design tokens (CSS variables)
│   ├── environments/
│   │   └── environment.ts          ← Firebase config — local only, never committed
│   ├── assets/data/                ← Default marker JSON files
│   └── app/
│       ├── app.ts                  ← Root component + all state (signals)
│       ├── components/
│       │   ├── map/                ← Leaflet map + custom SVG pins
│       │   ├── sidebar/            ← Slide-in detail panel with gallery
│       │   ├── filter-panel/       ← Tag + title search filter
│       │   ├── dropdown-menu/      ← Top-left action menu
│       │   └── modal/              ← Add / Edit marker form with file upload
│       ├── services/
│       │   ├── local-storage.service.ts
│       │   └── firebase-storage.service.ts
│       └── models/
│           └── marker.model.ts
├── asset/                          ← Static brand assets (logo, color reference)
├── angular.json
└── package.json

---

How to Run Locally

Prerequisites

• Node.js v18 or higher
• npm v9 or higher

1. Clone the repository

git clone https://github.com/YuChan707/front-map-design.git
cd front-map-design

2. Install dependencies

npm install

3. Create your local environment file

Create src/environments/environment.ts (gitignored — never committed):

export const environment = {
  production: false,
  firebase: {
    apiKey:            'YOUR_FIREBASE_API_KEY',
    authDomain:        'your-project.firebaseapp.com',
    projectId:         'your-project-id',
    storageBucket:     'your-project.appspot.com',
    messagingSenderId: 'YOUR_SENDER_ID',
    appId:             'YOUR_APP_ID',
  },
};

The map and all core features work without Firebase. Only file uploads require it.

4. Start the development server

npm start

Open your browser at http://localhost:4300

---

Commands

Command	Description
npm start	Dev server at localhost:4300 (auto-reload)
npm run build	Production build → dist/
npm run watch	Build in watch mode

---

Firebase Setup (Optional — for file uploads)

1. Go to console.firebase.google.com
2. Create a project → Build → Storage → Get started
3. Copy your config into src/environments/environment.ts
4. Set Storage rules to allow uploads:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

---

How to Use the App

1. Explore — Click any colored pin to open the detail sidebar
2. Add a memorial — Top-left menu → Add Cultural Memorial → click the map → fill the form
3. Edit — Menu → Edit mode → click an existing pin
4. Filter — Click the Filter button to search by title or tag
5. Undo / Redo — Available in the top-left menu
6. Save — Menu → Save writes all markers to localStorage