https://github.com/chrisrobison/sfmarkers
https://github.com/chrisrobison/sfmarkers
Last synced: 16 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/chrisrobison/sfmarkers
- Owner: chrisrobison
- Created: 2026-04-11T14:25:29.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-11T14:37:29.000Z (2 months ago)
- Last Synced: 2026-04-11T16:24:26.153Z (2 months ago)
- Language: HTML
- Size: 61.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SF Historical Markers
An interactive map of **749 historical markers** across San Francisco, sourced from the [Historical Marker Database (HMDB)](https://www.hmdb.org/).
Built with [Leaflet.js](https://leafletjs.com/) and OpenStreetMap — no frameworks, no build step, just a single HTML file and a JSON dataset.
---
## Features
- 🗺️ **Interactive map** — click any pin to see the marker's title, address, year erected, and a link to its HMDB entry
- 🔍 **Full-text search** — filters by title, subtitle, address, and erected-by text in real time
- 📅 **Year filter** — narrow down markers by the year they were erected
- ⚠️ **Missing filter** — show only markers that have been reported missing (or exclude them)
- 📋 **Sidebar list** — click a card to fly the map to that marker and open its popup
- 🌙 **Dark UI** — easy on the eyes, grid layout with sidebar + full-height map
---
## Data
`hmdb_sf_markers.json` — 749 markers with the following fields:
| Field | Description |
|---|---|
| `id` / `markerNo` | HMDB identifiers |
| `title` / `subtitle` | Marker text |
| `yearErected` | Year the marker was installed |
| `erectedBy` | Organization that erected the marker |
| `coordinates` | `{ lat, lng }` |
| `address` | Street, city, section, county, postal code, location text |
| `missing` | Whether the marker has been reported missing |
| `link` | Direct URL to the HMDB entry |
---
## Usage
Because the page loads `hmdb_sf_markers.json` via `fetch()`, you need to serve it from a local web server (opening `index.html` directly as a `file://` URL will be blocked by the browser).
**Python (quickest):**
```bash
python3 -m http.server 8080
```
Then open [http://localhost:8080](http://localhost:8080).
**Node (npx):**
```bash
npx serve .
```
---
## Tech Stack
| Layer | Tool |
|---|---|
| Map | [Leaflet 1.9.4](https://leafletjs.com/) |
| Tiles | [OpenStreetMap](https://www.openstreetmap.org/) |
| Data | [HMDB](https://www.hmdb.org/) |
| Runtime | Vanilla JS (ES2020+), CSS Grid |
---
## License
Data © [Historical Marker Database](https://www.hmdb.org/) contributors. Map tiles © OpenStreetMap contributors ([ODbL](https://www.openstreetmap.org/copyright)).