A react component that displays an interactive map of Algeria including all 58 wilayas with custom colors for each wilayas.
npm install algeria-map-tsA React component that displays an interactive map of Algeria including all 58 wilayas.
You can see a live demo of the component in action at the following link:
This component is available via npm. To install, run the following command:
npm
``bash`
npm install --save algeria-map-ts
yarn
`bash`
yarn add algeria-map-ts
The component is straightforward to use. First, import it, and then use it as a regular React component:
Example:
`ts
import { Map } from "react-algeria-map-ts";
color="#55E6C1"
HoverColor="#58B19F"
stroke="#fff"
hoverStroke="#218c74"
height="400px"
width="400px"
data={data}
onWilayaClick={(wilaya, data) => console.log(wilaya, data)}
/>;
`
| Prop | Type | Description |
| ------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| color | string | Set the default color of the wilayas in the map |
| HoverColor | string | Set the color of the hovered wilaya |
| stroke | string | Set the color of the borders of the wilayas |
| hoverStroke | string | Set the color of the borders of the hovered wilaya |
| height | string | Set the occupied height by the map |
| width | string | Set the occupied width by the map |
| data | object | Sets the data to show in hover or click actions on each wilaya.
The keys are fixed, and the values of the keys
value and color if u didn't give a color to a wilaya then the default color will be applied. |
| onWilayaClick | function(key: string, value: string \| number \| boolean): void | The callback function to execute when the wilaya is being clicked |
The data prop is an object where each key is the name of the wilaya, and its value is an object with value and color properties. The value represents the data to display, and color is the color of the wilaya.
Exmaple:
`js`
const data = {
Adrar: { value: 120, color: "#fff9eb" },
Alger: { value: 60, color: "#ebf9ee" },
// ... other wilayas
};
Feel free to customize the data object to include the specific values and colors you want for each wilaya.
The component is now fully compatible with TypeScript. Benefit from type checking and improved developer experience.
We warmly welcome contributions from everyone, regardless of their level of expertise.
If you're making a major change, it's a good idea to create an issue first to discuss it.
To start contributing, follow these steps:
1. Fork the repo.
2. Clone your fork: git clone https://github.com/Ad019El/algeria-map-ts.gitgit checkout -b my-new-feature
3. Create your feature branch: git commit -am 'Add some feature'
4. Make your changes and commit them: git push origin my-new-feature`
5. Push to the branch:
6. Submit a pull request.
We'll review your pull request as soon as we can. Thanks for your contribution!
This project is an enhancement of the original react-algeria-map.