CDenn03/uganda-map
Domain:
geospatialRecord type:
software
Creator:
CDe
Host:
# Uganda Map Component
A reusable Uganda map component for Next.js projects that displays district-level data with interactive features.
## Installation
```bash
npm install uganda-map-component
# or
yarn add uganda-map-component
```
## Dependencies
This component requires the following peer dependencies:
- next >= 13.0.0
- react >= 18.0.0
- react-dom >= 18.0.0
- leaflet >= 1.9.4
- react-leaflet >= 4.2.1
## Usage
1. First, copy the GeoJSON file (`gadm41_UGA_2.json`) to your project's public directory.
2. Import and use the component in your Next.js project:
```tsx
'use client';
import { UgandaMap } from 'uganda-map-component';
import 'leaflet/dist/leaflet.css';
const YourComponent = () => {
const data = [
{
district_name: "Kampala",
allocation: 500000,
usage_percent: 75
},
// ... more district data
];
return (
);
};
export default YourComponent;
```
## Props
The component accepts the following props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | DistrictData[] | required | Array of district data with allocation and usage information |
| height | string | '500px' | Height of the map container |
| width | string | '100%' | Width of the map container |
| center | [number, number] | [1.3733, 32.2903] | Center coordinates of the map |
| zoom | number | 7 | Initial zoom level |
| geoJsonUrl | string | '/gadm41_UGA_2.json' | URL to the GeoJSON file |
## DistrictData Interface
```typescript
interface DistrictData {
district_name: string;
allocation: number;
usage_percent: number;
}
```
## Features
- Interactive district highlighting
- Tooltips showing district information
- Popup with detailed district data
- Color-coded districts based on allocation
- Customizable dimensions and positioning
- Responsive design
## License
MIT