Create beautiful,interactive maps with a vivid collection of over 200+ maps ranging from countries, continents and others!
Drop of a ✨ if you are here. It would mean a lot : )
Total downloads: 120745
- Wide range of maps (239 to be exact )
- Very small dependency size ( Largest map is less than 800kB )
- Easy to use components!
Navigate to your favourite map component and install it in your react project using
npm install @react-map/{your_country}
That is it! you are now ready to use the map components.
Each component you add has a fixed set of parameters that you can use to tweek around the map's behaviour.
Important
The 'type' component is mandatory for every component in the latest version of react-map due to the introduction of different types of map behaviours.
export interface props = {
type: 'select-single' | 'select-multiple';
size?: number;
mapColor?: string;
strokeColor?: string;
strokeWidth?: number;
hoverColor?: string;
selectColor?: string;
hints?: boolean;
hintTextColor?: string;
hintBackgroundColor?: string;
hintPadding?: string;
hintBorderRadius?: string;
onSelect?: (state: string, selectedStates?: string[]) => void;
}
type
- It takes value eitherselect-single
orselect-multiple
to alter the selection behaviour of the map. Inselect-single
, only one state/region can be selected at one time, whereas inselect-multiple
, you can select multiple regions at once.size
- It helps you increase or decrease the map size according to your requirement.mapColor
- It changes the default colour of the Map elements.strokeColor
- It defines the colour with which the borders are represented.strokeWidth
- It represents the width of the borders.hoverColor
- It is the colour of the component that is hovered upon.selectColor
- It is the coulour of the component(s) that is selected.hints
- This is a boolean parameter that displays the name of the region/state when it is hovered on.hintTextColor
- If hint is enabled, this parameter would decide the colour of the text in which hints are displayed.hintBackgroundColor
- If hint is enabled, this parameter would decide the background colour of the hints that are displayed.hintPadding
- If hint is enabled, this parameter would decide the Padding of the hints that are displayed.hintBorderRadius
- If hint is enabled, this parameter would decide the Border Radius of the hints that are displayed.onSelect
- It helps you decide what to do upon clicking on a specific component in a map (say city). If the state isselect-multiple
, then the function can have two parameters,(state: string, selectedStates?: string[])
,state
is the latest selected state andselectedState
is an array of all the states that are selected. If the state isselect-single
, then theonSelect
function takes in a singlestate
parameter, that is the code of the latest selected state.
Each element in a map returns a string, that represents the name of the region. That could be used to add different functionality based on the region that is clicked.
React Map components are customizable and can be easily used with whichever library you want! For example -
react-toastify
// Import the required dependencies
import World from "@react-map/world";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
// Define the onselect function that takes in a name
const toast = (sc) => {
toast(sc);
};
// Call that within the component
<World onSelect={toast} size={1600} hoverColor="orange" type = 'select-single'/>
<ToastContainer />
Screencast.from.27-01-24.09.54.21.PM.IST.webm
react-router-dom
// Import the required dependencies
import World from "@react-map/world";
import { useNavigate } from "react-router-dom";
// Define the onselect function that takes in a name
const a = useNavigate();
const redirect = (sc) => {
// Assuming you have defined your routes
a(`${sc}`);
};
// Call that within the component
<World onSelect={redirect} size={1600} hoverColor="orange" type = 'select-single'/>
Screencast.from.27-01-24.10.33.42.PM.IST.webm
- I did not intend to take sides in disputed territories. So, I have tried my best to include both sides of such territories so that the user is free to choose the map they are comfortable in.
- If you are facing problems in using any component, such that map is not displaying completely.. Feel free to post an issue and I would get it corrected. It most probably would be an SVG Viewport issue.
If you find this project helpful, consider buying me a coffee!
If you read till here, thanks for taking interest in this. Hope I could be useful for you :)