This project is an Interactive Map application of the Cordillera Administrative Region (CAR) in the Philippines. It allows users to explore different provinces and municipalities through a dynamic SVG map, providing detailed geographical information and data mapping.
- SVG-based Geography: A highly detailed and interactive SVG map of the Cordillera region.
- Level Switching: Toggle between Provincial and Municipality views to explore different granularities.
- Hover & Selection: Visual feedback on hover and persistent selection for exploring specific areas.
- Search Functionality: Easily find specific municipalities or provinces using the search bar.
- Dynamic Data Loading: Click on any map region to fetch and display detailed information in the side panel.
- Information Panel: Displays specific details about the selected region (ID, name, and level).
- Responsive Layout: Optimized for both desktop and mobile viewing with a grid-based dashboard.
- Framework: Vite (React 19)
- Language: JavaScript / TypeScript
- Styling: Tailwind CSS 4.0
- State Management: Zustand
- UI Components: Radix UI (Primitives for robust accessibility)
- Icons: Lucide React, React Icons
- Utilities: lodash.debounce, class-variance-authority, clsx, tailwind-merge
pnpm install
# or
npm install
# or
yarn installpnpm dev
# or
npm run dev
# or
yarn dev