react-map-chart

react-map-chart

Simple component to display SVG based World Map. Uses react-spring to make stuff nicer.
World geometry data was extracted from osme-geometry, and has origins in openstreetmap.

<Chart
   className="outerClassName"
   
   // styler make things looks as YOU want
   styler={
     (x, isoCode, feature) => ({
         className: 'paths-classname',
         style: {
           fill: feature.code === 'CN' ? '#F00' : '#44F',
           opacity: x
         },
         onClick: () => onClick(code),
         // "code" is available in dataset
         onMouseOver: event => over(event.target.dataset.code)
     })
   }

   // provide data for interpolation
   data={{
     CN: 1,
     US: 1,
     AU: 0.5
   }}

 />)

MIT