Map Dashboard Frontend

A modern, interactive map dashboard built with React and Vite. This project provides a user-friendly interface for visualizing and interacting with geospatial data layers.

Features

• Interactive map visualization with Leaflet
• Dark mode support
• Layer controls for toggling map data
• Custom UI components (Button, CheckBox)
• Responsive layout and styling
• Mock data for development and testing
• Modular component structure

Prerequisites

• Node.js (v20 or higher recommended)
• pnpm (v9 or higher)

Installation

1. Clone the repository:

   git clone https://github.com/OpenSourceFellows/map-dashboard.git
   cd map-dashboard

2. Install dependencies:

   pnpm install

3. Optional: For full development setup, you may also need the companion backend server:

   git clone https://github.com/OpenSourceFellows/dashboard-server.git

   See the dashboard-server repository for backend setup instructions.

Development

Start the development server:

pnpm run dev

The app will be available at http://localhost:5173 by default.

Build for production:

pnpm run build

Preview production build:

pnpm run preview

Run linter:

pnpm run lint

Project Structure

map-dashboard/
├── public/           # Static assets
├── src/              # Source code
│   ├── components/   # UI and map components
│   │   ├── Layout/   # Header and layout components
│   │   ├── Map/      # Map-related components
│   │   └── UI/       # Reusable UI components
│   ├── data/         # Mock data
│   ├── hooks/        # Custom React hooks
│   ├── styles/       # CSS files
│   ├── types/        # TypeScript types
│   ├── utils/        # Utility functions
│   ├── App.tsx       # Main app component
│   └── main.tsx      # Entry point
├── package.json      # Project metadata and scripts
├── vite.config.ts    # Vite configuration
└── README.md         # Project documentation

Tools & Libraries

• React – UI library
• Vite – Fast build tool
• TypeScript – Type safety
• Leaflet – Interactive maps
• React Leaflet – React components for Leaflet
• ESLint – Linting

Custom Components

• Header – App title and navigation
• MapContainer – Interactive Leaflet map with markers and polygons
• LayerControls – Toggle map layers and data types
• MapLegend – Map legend display
• CheckBox – UI checkbox component

Additional Documentation

• CONTRIBUTING.md - Contribution guidelines
• LICENSE.md - License information
• docs/MAINTAINER.md - Maintainer guide
• docs/QGIS_ATTRIBUTE_PRESERVATION.md - QGIS data layer documentation