React Leaflet Map with Layers

A fully interactive Leaflet map built with React, featuring multiple GeoJSON layers, map controls, and layer toggling functionality.

---

Features

• Interactive map with Leaflet and React-Leaflet.
• Toggleable GeoJSON layers (e.g., town centers, roads, residential areas).
• Base map toggle with support for Satellite, Streets, Terrain, Hybrid, Dark, and Light.
• Map search powered by leaflet-geosearch and OpenStreetMap, with a toggle button to show/hide the search bar.
• Useful map controls:
  • Mini-map
  • Zoom
  • Mouse position
  • Scale
• Automatic zoom to fit visible layers.
• Styled with TailwindCSS for a clean, responsive UI.

---

Demo

---

Getting Started

1. Clone the repository

git clone https://github.com/WanjikuN/Mapping.git
cd Mapping

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Running Tests

Run all tests:

npx vitest

Run tests in watch mode:

npx vitest --watch

Run tests with coverage:

npx vitest --coverage

---

For a detailed step-by-step guide, check out my Medium article

Adding Layers to a Map in React Using Leaflet