@newamerica/maps

Components for creating fully responsive maps, with flexibility to change the loaded geometry, projections, overlays, and tooltips.

Installation

npm install @newamerica/maps --save

Usage Example

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>
);

Components

• Cartogram
• Choropleth
• LoadGeometry
• Pindrop
• Projection

API

Cartogram

From ./src/Cartogram/index.js

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		✅

Choropleth

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		✅

LoadGeometry

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

From ./src/Pindrop/index.js

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		✅

Projection

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		❌