PUP Vicinity Map

Interactive Santa Mesa campus image map with a searchable directory.
Vanilla HTML, CSS, and JavaScript in a single page.

Live Demo  ·  Quick Start  ·  Structure  ·  License

Contents

• Overview
• Features
• Screenshots
• Quick Start
• Project Structure
• Other Design Eras
• License
• Course Note

Overview

PUP Vicinity Map turns a campus basemap into an interactive directory. Users hover and click locations, search the list, and explore hotspots without a map SDK or backend. The basemap ships as a local image for offline-friendly demos.

Features

Feature	Description
Image map hotspots	Clickable areas on the campus map
Directory panel	Search and filter locations
Offline-friendly	Local stamesa.jpg asset

Screenshots

Map

Quick Start

git clone https://github.com/cikeyz/pup-vicinity-map.git
cd pup-vicinity-map
python -m http.server 8000
# http://localhost:8000

Project Structure

pup-vicinity-map/
├── index.html
├── stamesa.jpg
├── LICENSE
├── README.md
└── docs/
    └── screenshots/
        └── map.png

Other Design Eras

Branch	Description
overhaul/dark-offline	Dark offline-first layout
overhaul/dark-premium	Dark premium styling
overhaul/light-split	Light split map + directory

License

MIT. See LICENSE.

Campus imagery and PUP marks belong to the Polytechnic University of the Philippines.

Course Note

Built for CMPE 364 (Web and Mobile Systems), Polytechnic University of the Philippines, under Engr. Arlene B. Canlas. Published here as a standalone project.