Skip to content

replot-map: Intelligent and customizable map chart components for react.

License

Notifications You must be signed in to change notification settings

replot/replot-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

replot-map: Map charts for react

Intelligent and customizable map chart components for react.

Installation

Only works with React projects. React must be installed separately.

npm install replot-map

Then with a module bundler like webpack/browserify that supports CommonJS/ES2015 modules, use as you would anything else.

import {Map} from 'replot-map'

Quick Start

replot-map is designed to create beautiful map charts right out of the box. The only required inputs are properly formatted data and svg paths of your map.

In the simplest case, just supply data and svg paths (as Javascript arrays) and specify the keys for geocodes and weights of data and IDs and titles of paths:

render() {
    let populations = [
        {"code": "US-AL", "population": 4853875},
        {"code": "US-AK", "population": 737709},
        {"code": "US-AZ", "population": 6817565},
        ...
    ]

    let paths = [
    	  {"ID":"US-AK", "name":"Alaska", "d":"M456.18,...,731.03z"},
        {"ID":"US-AL", "name":"Alabama", "d":"M955.38,...,481.61z"},
        {"ID":"US-AZ", "name":"Arizona", "d":"M533.89,...,320.29z"},
        ...
    ]

    return(
        <Map data={populations}
            geoCode="code"
            weightKey="population"
            paths={paths}
            pathIDKey="ID"
            pathTitleKey="name"
        />
    )
}
  • data and paths are the only required props
  • geoCode defaults to "ID"
  • weightKey defaults to "weight"
  • pathIDKey defaults to "id"
  • pathTitleKey defaults to "title"

ScreenshotDefaultUSA

You can also import our complimentary svg map paths:

import {Map, USA} from 'replot-map'
render() {
    let populations = [
        {"code": "US-AL", "population": 4853875},
        {"code": "US-AK", "population": 737709},
        {"code": "US-AZ", "population": 6817565},
        ...
    ]

    return(
        <Map data={populations}
            geoCode="code"
            weightKey="population"
            paths={USA}
        />
    )
}

If you're using our complimentary map paths, do not specify pathIDKey or pathTitleKey.

Our complimentary map paths currently support 243 countries and regions. See the list of all supported countries/regions.

API

Dimensions

Dimensions may be specified by passing in width prop with a number, in the unit of pixels.

render() {
  return(
    <Map data={populations} paths={USA} width={600} />
  )
}
  • width defaults to 800

Width dimensions may also be specified with a string, as a percentage. The width will then be calculated as a proportion of the parent container.

render() {
  return(
    <Map data={populations} paths={USA} width="60%" />
  )
}
Default (800px) width={600} width="60%"
ScreenshotDefaultWidth ScreenshotWidth600px ScreenshotWidth60%

Height dimension will be adjusted automatically to best match the width, fitting the entirity of map without skewing the original aspect ratio.

Zoom

You may zoom into a specific area of map by passing in zoomID and zoomScale props. The Map will be centered on the area specified by zoomID, scaled up by zoomScale. Original dimensions of the Map will be preserved.

render() {
  return(
    <Map data={populations} paths={USA} zoomID="US-TX" zoomScale={2} />
  )
}
  • zoomID defaults to null
  • zoomScale defaults to 1

If zoomScale is passed in, but zoomID is not, the Map will be scaled up from its top left corner by zoomScale.

Default zoomID={null} zoomScale={2} zoomID="US-TX" zoomScale={2}
ScreenshotDefault ScreenshotZoomIDNullScale2 ScreenshotZoomIDTexasScale2

Color

Colors may be specified by passing in colorRangeLow and colorRangeHigh props. The Map is colored with the gradient in the range of colorRangeLow to colorRangeHigh, from the smallest to the largest weight.

render() {
  return(
    <Map data={populations} paths={USA} colorRangeLow="#ffffff" colorRangeHigh="#ff4c4c" />
  )
}
  • colorRangeLow defaults to "#ffffff"
  • colorRangeHigh defaults to "#225588"
Default colorRangeLow="#ffffff" colorRangeHigh="#ff4c4c"
ScreenshotDefault ScreenshotColorHighFF4C4CLowFFFFFF

Coloring Regions with No Data

Color of the regions with no data may be specified by passing in noDataColor prop.

render() {
  return(
    <Map data={populations} paths={USA} noDataColor="red" />
  )
}
  • noDataColor defaults to the value of colorRangeLow

Opacity of the regions with no data may be specified by passing in noDataOpacity prop.

render() {
  return(
    <Map data={populations} paths={USA} noDataOpacity={0.1} />
  )
}
  • noDataOpacity defaults to 0.5
Default (No data for California) noDataColor="red" noDataOpacity={0.1}
ScreenshotNoDataDefault ScreenshotNoDataColorRed ScreenshotNoDataOpacity0.1

Scale

Users can control the scale of the Map coloring, linear or logarithmic.

  • scale defaults to "lin" for linear scale, can be "log" for logarithmic scale:
render() {
  return(
    <Map data={populations} paths={USA} scale="log" colorRangeLow="#ffffff" colorRangeHigh="#225588" />
  )
}
Default (scale="lin") scale="log"
ScreenshotDefault ScreenshotScaleLog

User-provided Color function

Users can also specify a function to assign colors to different areas by passing in colorFunc prop. Expected arguments to the function are the geocode and weight for each area.

function customColor(geocode, weight) {
  if (weight > 5000000) {
    return "#225588"
  } else {
    return "#ffffff"
  }
}

render() {
  return(
    <Map data={populations} paths={USA} colorFunc={this.customColor} />
  )
}

When colorFunc is specified, legend is hidden and noDataColor defaults to #ffffff.

ScreenshotColorFunction

Legend

Title of legend may be specified by passing in legendTitle prop.

render() {
  return(
    <Map data={populations} paths={USA} legendTitle="Populations" />
  )
}
  • legendTitle defaults to null and no title is shown.
Default Legend legendTitle="Populations"
ScreenshotDefaultLegend ScreenshotLegendTitle

Tooltip

Tooltips can display more specific information about a data series.

render() {
  return(
    <Map data={populations} paths={USA} tooltip={true} tooltipColor="light" />
  )
}
  • tooltip defaults to true, false turns the tooltip off
  • tooltipColor defaults to light, it can be set to light or dark
  • tooltipContents defaults to data associated with the location (title, weight)
Default (tooltipColor="light") tooltipColor="dark" tooltip={false}
ScreenshotDefaultTooltip ScreenshotTooltipDark ScreenshotTooltipOff

User-provided Tooltip Function

Users can customize what is displayed inside the tooltip with a function. Expected arguments to the function are the title of the location and the data for the specific location hovered over. The function should return JSX.

fillTooltip(title, data){
  return(
    <div>
      <span>The name of this location is {title}.</span><br/>
      <span>The data for this location looks like: {JSON.stringify(data)}</span>
    </div>
  )
}

render() {
  return(
    <Map data={populations} paths={USA} tooltipContents={this.fillTooltip} />
  )
}

ScreenshotTooltipCustom

About

replot-map: Intelligent and customizable map chart components for react.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •