GraveMap 🗺️

Find any grave. Preserve every memory.

GraveMap is an open-source platform for digitally mapping and preserving cemeteries. Every cemetery, every grave, and every empty plot — searchable and locatable by anyone, forever.

---

🧭 The Problem

Most cemeteries around the world still rely on:

• 📄 Paper registers and old notebooks
• 🧠 The memory of elderly caretakers
• 🗝️ Word-of-mouth knowledge passed down generations

When someone asks "Where is my grandfather buried?" the answer is often "Ask the old caretaker." Years later, nobody knows. Many graves disappear entirely. Cemeteries fill up, but nobody can find the empty plots.

GraveMap solves this.

---

✅ Features

🌍 Public (No Login Required)

Feature	Description
Interactive satellite map	Full-screen map with cemetery boundaries and color-coded grave plots
Grave search	Search by name, father's name, cemetery, city, or gender
Grave detail	View name, dates, biography, section/row/plot, photo, and status
Shareable links	Every grave has a unique URL (#grave-ID) — share on WhatsApp instantly
QR code	Auto-generated QR code on every grave detail page
Navigate to grave	One tap opens Google Maps with driving directions
Print grave card	Professional printable record with QR code and all details
Cemetery directory	Browse all registered cemeteries with occupancy stats
Request a cemetery	Submit a request for a new cemetery to be added
Report corrections	Flag wrong grave information for admin review

🔐 Admin (Google Sign-In Required)

Feature	Description
Cemetery wizard	3-step wizard: Info → Pin location → Draw boundary polygon
Grave wizard	3-step wizard: Person info → Select cemetery → Draw grave rectangle
Generate Grave Grid	Auto-fill a cemetery with evenly-spaced grave plots from boundary
CSV bulk import	Upload a spreadsheet to register hundreds of graves at once
Photo via URL	Link an external photo (Imgur, Google Photos, etc.) to any grave
Dashboard	Stats tiles: total graves, cemeteries, occupied, available, reserved, pending
Request management	Review and approve/reject cemetery + correction requests
Quick status update	Mark any grave as Occupied / Reserved / Empty from detail view
Satellite/street toggle	Switch between satellite imagery and street map

---

🛠️ Technology Stack

Frontend

• HTML5, CSS3, JavaScript (Vanilla) — no framework, no build step
• Leaflet.js — interactive maps
• Leaflet Geoman — polygon and rectangle drawing tools
• Esri World Imagery — satellite tile layer
• qrcodejs — QR code generation
• Outfit — Google Fonts typography

Backend & Database

• Firebase Authentication — Google Sign-In (admins only)
• Firebase Realtime Database — all data stored here
• GitHub Pages — static hosting

💡 Zero server cost. Everything runs on Firebase free tier + GitHub Pages. No backend server, no Docker, no VPS.

---

🗄️ Database Schema

Firebase Realtime Database
│
├── cemeteries/
│   └── {id}/
│       ├── name, city, province, district, country
│       ├── address, description
│       ├── centerLat, centerLng
│       └── boundary          ← JSON polygon coordinates
│
├── graves/
│   └── {id}/
│       ├── cemeteryId
│       ├── name, fatherName, gender
│       ├── dob, deathDate, burialDate, age
│       ├── section, row, plot
│       ├── bio
│       ├── status            ← "occupied" | "empty" | "reserved"
│       ├── photoUrl          ← external image URL (no storage cost)
│       ├── polygon           ← JSON rectangle coordinates
│       ├── lat, lng          ← grave center coordinates
│       ├── relatives/        ← [NEW] Bidirectional family tree relations
│       │   └── {relativeGraveId}
│       │       └── relation  ← "spouse" | "parent" | "child" | "sibling" | "other"
│       └── createdAt
│
├── requests/
│   └── {id}/
│       ├── type              ← "new-cemetery" | "correction"
│       ├── resolved          ← boolean
│       └── ...fields
│
├── admins/                   ← [NEW] Managed list of Google UIDs
│   └── {uid}/
│       ├── email
│       ├── name
│       └── addedAt
│
└── fcmTokens/                ← [NEW] Registered FCM tokens for admins
    └── {uid}/
        ├── token
        ├── email
        └── updatedAt

---

🚀 Getting Started

Run Locally

# Clone the repo
git clone https://github.com/shakeel143/GraveMap.git
cd GraveMap

# Serve with Python (no install needed)
python -m http.server 8000

# Open in browser
# http://localhost:8000

No npm install, no build step. Just open and run.

Firebase Setup (for your own instance)

1. Create a project at console.firebase.google.com.
2. Enable Realtime Database and Authentication → Google provider.
3. Replace the firebaseConfig object in index.html with your own credentials.
4. Set the Realtime Database Rules to the following configuration (necessary for PWA, FCM, and multi-admin bootstrapping):

{
  "rules": {
    "cemeteries": {
      ".read": true,
      ".write": "auth != null"
    },
    "graves": {
      ".read": true,
      ".write": "auth != null"
    },
    "deceased": {
      ".read": true,
      ".write": "auth != null"
    },
    "requests": {
      ".read": "auth != null",
      ".write": true
    },
    "notifications": {
      ".read": "auth != null",
      ".write": "auth != null"
    },
    "admins": {
      ".read": "auth != null",
      "$uid": {
        ".write": "auth != null && (!root.child('admins').exists() || root.child('admins').child(auth.uid).exists())"
      }
    },
    "fcmTokens": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

---

📁 Project Structure

GraveMap/
├── index.html                # Single-page app — HTML, head meta scripts, and SW init
├── css/
│   └── style.css             # Main styling + RTL direction & family tree styles
├── js/
│   └── app.js                # Main logic (Leaflet, wizards, language translation, family links, charts, FCM)
├── sw.js                     # PWA Service Worker (App shell caching + offline map strategies)
├── manifest.json             # Web App Manifest for mobile installation/PWA compliance
├── firebase-messaging-sw.js  # FCM Service Worker for handling background notifications
├── favicon.png               # Main app icon
├── og-cover.png              # Cover image for social share previews
└── README.md

---

🗺️ Roadmap

✅ Phase 1 — Foundation

• Google Authentication (admin only)
• Firebase Realtime Database
• Leaflet.js interactive map
• Public map view with cemetery boundaries
• Basic search

✅ Phase 2 — Core Features

• 3-step Cemetery creation wizard (info → location → draw boundary)
• 3-step Grave registration wizard (person → cemetery → draw plot)
• Color-coded grave status: 🟢 Available · 🔴 Occupied · 🟡 Reserved
• Satellite imagery as default map layer
• Satellite / Street map toggle

✅ Phase 3 — Community & Admin

• Cemetery request workflow (public → admin review)
• Correction report workflow
• Admin dashboard with statistics tiles
• Generate Grave Grid (auto-fill boundary with plots)
• Approve / reject requests

✅ Phase 4 — Sharing & Convenience

• QR code on every grave
• Shareable grave URLs (#grave-ID)
• 🔗 Copy link button
• 🖨️ Print grave card (with QR code)
• 🧭 Google Maps navigation
• 📥 CSV bulk import with preview table
• 🖼️ External photo URL (no storage cost)
• OG/Twitter meta tags for social sharing previews
• Escape key closes modals
• Full mobile responsive layout

✅ Phase 5 — Advanced

• Multi-admin management (add/remove admin UIDs from dashboard)
• Urdu / RTL language support
• PWA / offline mode (service worker + manifest.json)
• Family tree linking between related graves (bidirectional, with admin search UI)
• FCM push notifications for new requests (foreground + background, VAPID-ready)
• Occupancy analytics charts (donut + per-cemetery stacked bar chart)

---

🎨 Design

• Dark topbar with glassmorphism backdrop filter
• Map-first layout — the map is always full-screen behind all panels
• Floating panels — left sidebar + right tools float over the map
• Modals as wizards — multi-step forms with clear progress indicators
• Color system: #2ECC8A Available · #E05A5A Occupied · #F0B429 Reserved
• Mobile — panels collapse to bottom sheets, modals slide up from bottom

---

📸 CSV Import Format

Download the template from Admin → Graves → 📥 Import CSV, or use this column layout:

name,fatherName,gender,dob,deathDate,burialDate,age,section,row,plot,bio,status,photoUrl
Ahmed Ali,Muhammad Ali,male,1945-03-12,2020-11-05,2020-11-06,75,A,3,12,A beloved father,occupied,

Column	Format	Required
name	Full name	✅
fatherName	Father's full name	—
gender	male or female	—
dob	YYYY-MM-DD	—
deathDate	YYYY-MM-DD	—
burialDate	YYYY-MM-DD	—
age	Number	—
section, row, plot	Alphanumeric	—
bio	Free text	—
status	occupied, empty, or reserved	—
photoUrl	Public image URL	—

Imported graves are fully searchable immediately. They appear on the map once a polygon is drawn for them.

---

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first.

1. Fork the repo
2. Create your branch: git checkout -b feature/my-feature
3. Commit: git commit -m 'feat: add my feature'
4. Push: git push origin feature/my-feature
5. Open a Pull Request

---

📄 License

MIT © Shakeel