Abenetwolde/ethiopian-svg-map-npm-library
Domaine:
geospatialType de record:
software
Créateur:
Abe
Hôte:
Ethiopian Map Component An interactive, customizable React component for rendering SVG maps of Ethiopian regions with hover, click, and zoom support. 📦 Install: npm i ethiopia-svg-map
# Ethiopian SVG Map Component
A customizable **React component** for rendering an interactive SVG map of Ethiopian regions with hover, click, and zoom functionalities.
🌐 **Live Demo Website**
🔗 **ethiopia-svg-map**
---
## 📦 Installation
```bash
npm install ethiopia-svg-map
# or
yarn add ethiopia-svg-map
# or
pnpm install ethiopia-svg-map
```
---
## 🚀 Usage
### Basic Example
```jsx
import { useState } from 'react';
import { EthiopiaSvgMap } from 'ethiopia-svg-map';
const App = () => {
const [selectedRegion, setSelectedRegion] = useState(null);
//sample datas
const regionData = {
tigray: {
value: 5,
label: 'Tigray',
universities: ['Mekelle University', 'Aksum University']
color:"#347433"
},
amhara: {
value: 7,
label: 'Amhara',
color: "FFC107"
universities: ['University of Gondar', 'Bahir Dar University']
}
//Add data for the other regions
};
return (
(
)}
enableZoom
zoomLevel={1}
showLegend
/>
);
};
// Sample Tooltip Component
const Tooltip = ({ regionId, data }) => (
);
```
---
## 🧩 Props
| Prop | Type | Default | Description |
|---------------------|-------------------------------------------------------|------------------------------------------------------------------|------------------------------------------------------------|
| `selectedRegion` | `string \| null` | `null` | Currently selected region ID |
| `setSelectedRegion` | `React.Dispatch >`| — | Setter function for region selection |
| `regionData` | `Record ` | `{}` | Custom data for each region …