Skip to content

gabidavila/react-usa-map

Repository files navigation

react-usa-map | A simple SVG USA map rendering on React

Build Status codebeat badge

This is an alternate version for you that just want a simple customizable map on HTML. This maps shows states delimitations including DC, Alaska, and Hawaii. D3 is not needed.

It uses the Albers projection.

Live: http://react-usa-map-demo.herokuapp.com

Code: http://github.com/gabidavila/react-usa-map-demo

Installation

It requires react 16.13.1 or higher. Run:

yarn add react-usa-map

or

npm install react-usa-map --save

Usage

The below example shows the mandatory onClick event.

import React, { Component } from 'react';
import USAMap from "react-usa-map";

class App extends Component {
  /* mandatory */
  mapHandler = (event) => {
    alert(event.target.dataset.name);
  };

  render() {
    return (
      <div className="App">
        <USAMap onClick={this.mapHandler} />
      </div>
    );
  }
}

export default App;

Example with optional props, App.js:

import React, { Component } from 'react';
import './App.css'; /* optional for styling like the :hover pseudo-class */
import USAMap from "react-usa-map";

class App extends Component {
  /* mandatory */
  mapHandler = (event) => {
    alert(event.target.dataset.name);
  };

  /* optional customization of filling per state and calling custom callbacks per state */
  statesCustomConfig = () => {
    return {
      "NJ": {
        fill: "navy",
        clickHandler: (event) => console.log('Custom handler for NJ', event.target.dataset)
      },
      "NY": {
        fill: "#CC0000"
      }
    };
  };

  render() {
    return (
      <div className="App">
        <USAMap customize={this.statesCustomConfig()} onClick={this.mapHandler} />
      </div>
    );
  }
}

export default App;

App.css:

path {
  pointer-events: all;
}
path:hover {
  opacity: 0.50;
  cursor: pointer;
}

All optional props:

prop description
title Content for the Title attribute on the svg
width The width for rendering, numeric, no px suffix
height The height for rendering, numeric, no px suffix
defaultFill The default color for filling
customize Optional customization of filling per state

Additionally each path tag has an abbreviation of the current state followed by a state class:

<path fill="#{custom color or #D3D3D3}" data-name="CA" class="CA state" d="...{polygon dimensions here}..."></path>

License

MIT.

Sources

The map is sourced from Wikimedia and is under Creative Commons Attribution-Share Alike 3.0 Unported license. This package is inspired on the react-us-state-map package, in fact the initial SVG class system is based on it.

Contributing

Fork and PR. Not much fuss, I will be try to be as responsive as possible.

Maintainer

Package maintaned by Gabriela D'Ávila Ferrara, website.