@chakkun1121/react-floor-map

A highly interactive, accessible, and customizable React floor map component library. Designed for schools, events, shopping malls, and large facility maps.

Features

• 🗺️ Interactive Maps: Zoom, pan, and click interactions out of the box.
• 🏢 Multi-Floor & Multi-Building Support: Easily navigate between buildings and floors (stairs/elevators).
• 🔍 Built-in Search: Search for rooms, landmarks, and facilities quickly.
• 🚻 Facility Filtering: Dedicated lists for restrooms and other specific facilities.
• ♿ Accessibility & SEO: Built-in screen reader HTML generator and Schema.org structured data generator.
• 📱 Mobile Responsive: Works seamlessly on desktop and touch devices.

Demo & Examples

Check out the live example: https://chakkun1121.github.io/asano-map

Note: This site serves as a real-world implementation example (Asano Gakuen Unofficial Map). Please visit the Asano Gakuen Official Website for official school information.

Installation

You can install the package via npm, yarn, pnpm, or bun.

npm install @chakkun1121/react-floor-map
# or
bun install @chakkun1121/react-floor-map

Note: This library requires react, react-dom, lucide-react, motion/react, and react-markdown as peer dependencies.

Setup & Usage

1. Import Styles

You must import the library's CSS in your main entry file (e.g., main.tsx or App.tsx):

import "@chakkun1121/react-floor-map/style.css";

2. Basic Example

import React from "react";
import { FloorMapApp, MapData } from "@chakkun1121/react-floor-map";

// Define your map data
const myMapData: MapData = {
  title: "My Facility Map",
  description: "Welcome to our complex.",
  areas: [
    // Define your buildings, landmarks, floors, and rooms here
  ],
  groups: [
    // (Optional) Define tenant/club/class details that occupy specific rooms here
  ],
};

export default function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <FloorMapApp data={myMapData} />
    </div>
  );
}

Data Structure (MapData)

react-floor-map separates the physical structure of the map (areas) from the operational layout (groups). This allows you to update the tenants or groups easily without touching the physical map coordinates.

• Building: Represents a multi-level building. Contains multiple floors.
• Floor: Represents a single floor. Contains an image (SVG/PNG) and physical rooms (spaces).
• Space: Represents an individual room, restroom, or stairs. Holds coordinates {x, y} relative to the floor map image.
• Group: Represents an organization, class, or tenant occupying one or more spaces (via spaceIds).

SEO & Accessibility

Create a static, screen-reader-friendly version of your map and inject Schema.org JSON-LD for search engines. This is completely optional but highly recommended.

import {
  generateMapStructuredData,
  generateMapScreenReaderHtml,
} from "@chakkun1121/react-floor-map/seo";
import myMapData from "./myMapData";

// Generate Schema.org JSON-LD string
const jsonLd = generateMapStructuredData(myMapData);

// Generate hidden HTML for screen readers
const a11yHtml = generateMapScreenReaderHtml(myMapData);

License

MIT