@newamerica/maps

0.0.3 • Public • Published

@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

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

Package Sidebar

Install

npm i @newamerica/maps

Weekly Downloads

1

Version

0.0.3

License

MIT

Unpacked Size

56.5 kB

Total Files

17

Last publish

Collaborators

  • lries