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
It requires react 16.13.1 or higher. Run:
yarn add react-usa-map
or
npm install react-usa-map --save
The below example shows the mandatory onClick event.
importReact,{Component}from'react';importUSAMapfrom"react-usa-map";classAppextendsComponent{/* mandatory */mapHandler=(event)=>{alert(event.target.dataset.name);};render(){return(<divclassName="App"><USAMaponClick={this.mapHandler}/></div>);}}exportdefaultApp;Example with optional props, App.js:
importReact,{Component}from'react';import'./App.css';/* optional for styling like the :hover pseudo-class */importUSAMapfrom"react-usa-map";classAppextendsComponent{/* 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(<divclassName="App"><USAMapcustomize={this.statesCustomConfig()}onClick={this.mapHandler}/></div>);}}exportdefaultApp;App.css:
path{pointer-events: all} path:hover{opacity:0.50; cursor: pointer}| 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:
<pathfill="#{custom color or #D3D3D3}" data-name="CA" class="CA state" d="...{polygon dimensions here}..."></path>MIT.
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.
.svg){kind=link}
Fork and PR. Not much fuss, I will be try to be as responsive as possible.
Package maintaned by Gabriela D'Ávila Ferrara, website.