IntraMap is a web-based indoor navigation platform that lets building administrators create interactive floor plans and share them with visitors via QR code. Visitors scan the code and immediately get a searchable, zoomable map of the building on their phone — no app download required.

Live demo: https://intra-map-six.vercel.app — preloaded with a 3-floor shopping mall example.

Large indoor spaces — malls, hospitals, university campuses, convention centers — consistently fail at visitor wayfinding. Commercial wayfinding systems cost $5,000–$50,000 and require proprietary hardware. Static PDF maps don't work on mobile. IntraMap solves this with a zero-cost, browser-based alternative that any building manager can set up in minutes.

1. A building administrator opens the editor (admin.html) and draws their floor plan using a drag-and-drop canvas interface.
2. They add named locations (rooms, stores, services) with icons, colors, and searchable tags across one or more floors.
3. They save the floor plan to the cloud and generate a QR code.
4. Visitors scan the QR code and land on the viewer (viewer.html) — a mobile-optimized map where they can search for locations, switch floors, and tap any location for details.

• Canvas-based drawing with rectangles, circles, lines, and text labels
• 13 categorized icons (restaurant, restroom, exit, elevator, ATM, shop, medical, etc.)
• Multi-floor support with custom floor names (Basement, Ground, Mezzanine, etc.)
• Object property panel: name, tags, fill color, border style, opacity, lock state
• Multi-select with Shift+Click or drag selection
• Undo/redo with 50-step history
• Copy and paste
• Auto-save to localStorage every 10 seconds
• Cloud save to Cloudflare KV with one click
• QR code generation and download

• Mobile-first responsive layout
• Full pan and zoom: mouse drag, touch drag, pinch-to-zoom, keyboard arrows, mouse wheel
• Smart search by location name or tags
• Floor selector dropdown
• Tap-to-detail popup with location info
• Works offline after first visit (PWA with service worker)
• Installable on mobile home screen

• 100% free hosting: Cloudflare Workers (API) + Vercel (frontend)
• No server to manage; backend is a single serverless function
• REST API with Cloudflare KV storage

No build step, no framework, no dependencies beyond the two bundled libraries.

IntraMap/
├── public/                 # Frontend (deployed to Vercel)
│   ├── index.html          # Landing page
│   ├── admin.html          # Floor plan editor
│   ├── viewer.html         # Map viewer for visitors
│   ├── css/
│   │   ├── common.css      # Shared styles
│   │   ├── admin.css       # Editor styles
│   │   └── viewer.css      # Viewer styles
│   ├── js/
│   │   ├── admin.js        # Editor logic
│   │   ├── viewer.js       # Viewer logic (pan/zoom/search)
│   │   ├── api.js          # API client (save/load buildings)
│   │   └── icons.js        # SVG icon definitions
│   ├── lib/
│   │   ├── fabric.min.js   # Canvas library (bundled)
│   │   └── qrcode.min.js   # QR generation (bundled)
│   ├── data/
│   │   └── demo-building.json  # Sample Centaurus Mall data
│   └── manifest.json       # PWA manifest
├── worker/
│   ├── index.js            # Cloudflare Worker API (CRUD endpoints)
│   └── wrangler.toml       # Worker configuration
├── docs/
│   ├── PRD.md              # Product requirements document
│   └── TECHNICAL_ARCHITECTURE.md  # Architecture and data models
├── DEPLOYMENT.md           # Step-by-step deployment guide
├── USER_GUIDE.md           # End-user guide for editor and viewer
└── vercel.json             # Vercel routing and headers config

Requirements: Node.js 16+

git clone <repo-url>
cd IntraMap
npm install
npm run dev

Opens at http://localhost:3000. The app loads demo data by default so the viewer works immediately without a backend.

Full instructions are in DEPLOYMENT.md. The short version:

Backend (Cloudflare Worker):

npm install -g wrangler
wrangler login
cd worker
wrangler kv namespace create BUILDINGS
# Paste the namespace ID into wrangler.toml
wrangler deploy

Frontend (Vercel):

npm install -g vercel
vercel --prod
# Set output directory to: public

After deploying the worker, update the API URL in public/js/api.js (line 6) to point to your worker subdomain.

The Cloudflare Worker exposes a simple REST API:

All responses are JSON. CORS is enabled for all origins.

A building is stored as a single JSON object under its ID in Cloudflare KV:

{
  "id": "building-uuid",
  "name": "Building Name",
  "floors": [
    {
      "id": "floor-uuid",
      "name": "Ground Floor",
      "canvasData": {}
    }
  ],
  "updatedAt": "2026-01-01T00:00:00Z"
}

canvasData is the raw Fabric.js canvas JSON — serialized objects, positions, styles, and custom properties (name, popupText, tags, iconType).

This is an MVP with no authentication layer. Anyone who knows the admin URL for a building can edit it. For production use, authentication (password per building or OAuth) should be added before exposing the editor publicly. The viewer is intentionally public.

MIT — see LICENSE.

M Kaleem Akhtar - built as a personal project demonstrating a full-stack web application with a practical indoor navigation use case.