algeria-map-ts

A React component that displays an interactive map of Algeria including all 58 wilayas.

Demo

You can see a live demo of the component in action at the following link:

Live Demo

Installation

This component is available via npm. To install, run the following command:

npm

npm install --save algeria-map-ts

yarn

yarn add algeria-map-ts

Usage

The component is straightforward to use. First, import it, and then use it as a regular React component:

Example:

import { Map } from "react-algeria-map-ts";

<Map
  color="#55E6C1"
  HoverColor="#58B19F"
  stroke="#fff"
  hoverStroke="#218c74"
  height="400px"
  width="400px"
  data={data}
  onWilayaClick={(wilaya, data) => console.log(wilaya, data)}
/>;

Props

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

Data Prop

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:

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.

TypeScript Support

The component is now fully compatible with TypeScript. Benefit from type checking and improved developer experience.

Contributing

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.git
3. Create your feature branch: git checkout -b my-new-feature
4. Make your changes and commit them: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request.

We'll review your pull request as soon as we can. Thanks for your contribution!

Credits

This project is an enhancement of the original react-algeria-map.