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
    }}

  />)

Licence

MIT