React Map component with tooltip and other features
npm install react-map-dashboardA simple map component for your dashboard.
react-map-dashboard playground
``sh`
npm install --save react-map-dashboard
`jsx
import { MapComponent } from "react-map-dashboard";
`
You can pass arrays of your own colors and value ranges. Each range should correspond to a separate color. For example:
`jsx
const colors = ["#f2f0f7", "#dadaeb", "#bcbddc"];
const layers = ["0-10", "10-50", "50-100"];
`
countriesData is an array of objects. Each object should have a "name" property and a "amount" property. Additionally, you can add an additional data object to each object with the data required for your custom tooltip. For example:
`jsx`
countriesData: [
{ country: "CN", amount: 100 },
{ country: "CA", amount: 1000 },
{ country: "FR", amount: 10, data: { some: 'data'} },
],
This library uses country-list as a dependency, so you can use it to get proper country codes and create your countriesData.
You can use both the standard tooltip and your custom one. To do this, create a component and pass it to customTooltip:
` {props.country} {props.some}jsx
const CustomTooltip = (props) => {
return (
);
};
const MapComponent = () => (
layers={layers}
countriesData={countriesData}
customTooltip={CustomTooltip}
/>
);
``
MIT © krodetsa
---