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.
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;
}| 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>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.
Fork and PR. Not much fuss, I will be try to be as responsive as possible.
Package maintaned by Gabriela D'Ávila Ferrara, website.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
.svg){kind=link}
