Components for creating fully responsive maps, with flexibility to change the loaded geometry, projections, overlays, and tooltips.
npm install @newamerica/maps --save
import { Pindrop } from "@newamerica/maps";
import { Chart } from "@newamerica/charts";
import "@newamerica/charts/dist/styles.css";
import "@newamerica/maps/dist/styles.css";
const MyMap = () => (
<Chart maxWidth="100%" aspectRatio={0.6}>
{({ width, height }) => (
<Pindrop
data={data}
width={width}
height={height}
geometry="us"
projection="albersUsa"
/>
)}
</Chart>
);
Cartogram map
⚠ this chart wraps the base Chart
component in @newamerica/charts
, because it relies on an internally calculated aspect ratio.
prop | type | default | required | description |
---|---|---|---|---|
colors | Array |
["#e6dcff", "#504a70"] |
❌ | |
data | Array |
✅ | ||
idAccessor | Function |
d => d.id |
❌ | |
mapFill | String |
"#cbcbcd" |
❌ | |
mapStroke | String |
"#fff" |
❌ | |
maxWidth | Union<String | Number> |
❌ | ||
numStops | Number |
6 |
❌ | |
renderTooltip | Function |
❌ | ||
valueAccessor | Function |
✅ |
From ./src/Choropleth/index.js
Choropleth map TODO: legend and margins
prop | type | default | required | description |
---|---|---|---|---|
colors | Array |
["#e6dcff", "#504a70"] |
❌ | An array of two colors, from which the color scale will be calculated |
data | Array |
✅ | ||
geometry | Enum("world","us") |
✅ | ||
handleMouseLeave | Function |
❌ | ||
handleMouseMove | Function |
❌ | ||
height | Number |
✅ | ||
idAccessor | Function |
d => d.id |
❌ | An accessor function for the state, country, or county FIPS code in your data. This is necessary to match politcal boundaries in the feature collection to your data. |
mapFill | String |
"#cbcbcd" |
❌ | |
mapStroke | String |
"#fff" |
❌ | |
numStops | Number |
6 |
❌ | The number of color stops |
projection | Enum("mercator","equalEarth","albersUsa") |
✅ | ||
valueAccessor | Function |
✅ | An accessor function for the data that's colored on the map | |
width | Number |
✅ |
From ./src/LoadGeometry/index.js
Loads a geojson from our S3 bucket, and calls your child function with the topojson feature.
prop | type | default | required | description |
---|---|---|---|---|
children | Function |
✅ | ||
geometry | Enum("world","us") |
✅ |
Pindrop map component
TODO: implement overlap detection with an optional preventOverlap
prop
prop | type | default | required | description |
---|---|---|---|---|
circleFill | Union<String | Function> |
"#2ebcb3" |
❌ | A string for each circle's fill, or a function that will receive that circle's datum |
circleRadius | Union<Number | Function> |
5 |
❌ | A number for the circle's radius, or a function that will receive that point's datum for radius scaling. |
circleStroke | Union<String | Function> |
"#fff" |
❌ | A string for each circle's stroke, or a function that will receive that circle's datum |
data | Array |
✅ | ||
geometry | Enum("world","us") |
✅ | ||
handleMouseLeave | Function |
❌ | ||
handleMouseMove | Function |
❌ | ||
height | Number |
✅ | ||
mapFill | String |
"#cbcbcd" |
❌ | |
mapStroke | String |
"#fff" |
❌ | |
projection | Enum("mercator","equalEarth","albersUsa") |
✅ | ||
width | Number |
✅ |
From ./src/Projection/index.js
Component for all projections.
prop | type | default | required | description |
---|---|---|---|---|
center | Array |
❌ | ||
children | Function |
❌ | ||
clipAngle | Number |
❌ | ||
clipExtent | Array |
❌ | ||
data | Array |
✅ | ||
fitExtent | Array |
❌ | ||
fitSize | Array |
❌ | ||
innerRef | Function |
❌ | ||
pathFunc | Function |
❌ | ||
precision | Number |
❌ | ||
projection | Enum("mercator","equalEarth","albersUsa") |
"mercator" |
❌ | |
projectionFunc | Function |
❌ | ||
rotate | Array |
❌ | ||
scale | Number |
❌ | ||
translate | Array |
❌ |