react wrapper component for the 'datamaps' library (Interactive maps for data visualizations). Out of the box it includes advance arc-attack-plugin and demo mode.
bash
npm install react-typescript-datamaps
`
Out of the box components:
$3
Adding ability to easily display attacks on svg maps.
$3
React (with typescript) wrapper for the datamaps library for easy integration in your react project.
handleArcsAdvance - Datamaps plugin, can import alone and add to your own datamaps wrapper.
Usage
`jsx
// Use example - AttackMap - with builtin demo mode
import React from "react";
import { AttackMap } from "react-typescript-datamaps";
export default function App() {
return (
);
}
// Use example - DataMapsWrapper , base on the the India map example https://github.com/markmarkoh/datamaps
const demoProps = {
scope: 'india',
geographyConfig: {
popupOnHover: true,
highlightOnHover: true,
borderColor: '#444',
borderWidth: 0.5,
dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json'
//dataJson: topoJsonData
},
bubblesConfig: {
borderWidth: 2,
borderOpacity: 1,
borderColor: '#FFFFFF',
popupOnHover: true, // True to show the popup while hovering
radius: null,
popupTemplate: function (geo, data) {
return ;
},
fillOpacity: 0.75,
animate: true,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.85,
exitDelay: 100, // Milliseconds
key: JSON.stringify
},
fills: {
'MAJOR': '#306596',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#dddddd'
},
data: {
'JH': { fillKey: 'MINOR' },
'MH': { fillKey: 'MINOR' }
},
setProjection: function (element) {
var projection = d3.geo.mercator()
.center([80, 25])
.scale(600)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
}
};
const bubblesDemo = [
{
centered: "MH",
fillKey: "MAJOR",
radius: 20,
state: "Maharastra"
},
{
centered: "AP",
fillKey: "MAJOR",
radius: 22,
state: "Andhra Pradesh"
},
{
centered: "TN",
fillKey: "MAJOR",
radius: 16,
state: "Tamil Nadu"
},
{
centered: "WB",
fillKey: "MEDIUM",
radius: 15,
state: "West Bengal"
},
{
centered: "MP",
fillKey: "MEDIUM",
radius: 15,
state: "Madhya Pradesh"
},
{
centered: "UP",
fillKey: "MINOR",
radius: 8,
state: "Uttar Pradesh"
},
{
centered: "RJ",
fillKey: "MINOR",
radius: 7,
state: "Rajasthan"
}
];
function Demo() {
const [bubbles, setBubbles] = React.useState([]);
React.useEffect(() => {
setInterval(() => {
setBubbles(bubblesDemo as any);
}, 1000);
},[]);
return (
bubbles={bubbles}
/>
);
}
export default function App() {
return (
);
}
``