React-leaflet-d3 NPM

react-leaflet-d3

React wrapper of @asymmetrik/leaflet-d3 for react-leaflet.

Leaflet D3 Provides a collection of D3.js based visualization plugins for Leaflet.

Demo

Visualization	Demo react-leaflet v1	Demo react-leaflet v2
Hexbins	`CodePen`	`CodePen`
Pings	`CodePen`	`CodePen`

Tested with Leaflet 1.3.4 and React-Leaflet 1.9.1, React-Leaflet 2.1.4

Installation

Install via NPM

npm install --save react-leaflet-d3

react-leaflet-d3 requires d3 and d3-hexbin as peerDependency

(React, PropTypes, Leaflet, react-leaflet also should be installed)

npm install --save d3 d3-hexbin

Customize css

Usage example

HexbinLayer (with react-leaflet v1)

import { Map, TileLayer } from 'react-leaflet';
import { HexbinLayer } from 'react-leaflet-d3';

const options = {
	colorScaleExtent: [ 1, undefined ],
	radiusScaleExtent: [ 1, undefined ],
	colorRange: [ '#f7fbff', '#ff0000' ],
	radiusRange: [ 5, 12 ],
};

<Map center={[2.935403, 101.448205]} zoom={10}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <HexbinLayer data={geoJsonData} {...options} />
</Map>

HexbinLayer (with react-leaflet v2)

import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import { HexbinLayer } from 'react-leaflet-d3';
const WrappedHexbinLayer = withLeaflet(HexbinLayer);

const options = {
	colorScaleExtent: [ 1, undefined ],
	radiusScaleExtent: [ 1, undefined ],
	colorRange: [ '#f7fbff', '#ff0000' ],
	radiusRange: [ 5, 12 ],
};

<Map center={[2.935403, 101.448205]} zoom={10}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  {/* Use <WrappedHexbinLayer> where you would have used <HexbinLayer>. */}
  <WrappedHexbinLayer data={geoJsonData} {...options} />
</Map>

Options Hexbin options

Option	Type	Default	Description
`data`	`object`	`{}`	Required. A valid GeoJSON FeatureCollection object. Currently only supports `Point` geometry type.
`radius`	`int`	`12`	Sets the radius on the hexbin layer.
`opacity`	`float`	`0.6`	Sets the opacity on the hexbin layer.
`duration`	`int`	`200`	Sets the transition duration for the hexbin layer.
`colorScaleExtent`	`array`	`[ 1, undefined ]`	Sets the extent of the color scale for the hexbin layer.
`radiusScaleExtent`	`array`	`[ 1, undefined ]`	This is the same exact configuration option as `colorScaleExtent`, only applied to the radius extent.
`colorRange`	`array`	`[ '#f7fbff', '#08306b' ]`	Sets the range of the color scale used to fill the hexbins on the layer.
`radiusRange`	`array`	`[ 4, 12 ]`	Sets the range of the radius scale used to size the hexbins on the layer.
`pointerEvents`	`string`	`all`	This value is passed directly to an element-level css style for `pointer-events`. You should only modify this config option if you want to change the mouse event behavior on hexbins. This will modify when the events are propagated based on the visibility state and/or part of the hexbin being hovered.

PingLayer (with react-leaflet v1)

import { Map, TileLayer } from 'react-leaflet';
import { PingLayer } from 'react-leaflet-d3';

ping() {
	this.pingLayer.ping([101.448205, 2.935403], 'myCustomCssClass');
}

<Map center={[2.935403, 101.448205]} zoom={10}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <PingLayer ref={(ref) => { this.pingLayer = ref; }} radiusRange={[3, 50]} />
</Map>

PingLayer (with react-leaflet v2)

import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import { PingLayer } from 'react-leaflet-d3';
const WrappedPingLayer = withLeaflet(PingLayer);

ping() {
	this.pingLayer.ping([101.448205, 2.935403], 'myCustomCssClass');
}

<Map center={[2.935403, 101.448205]} zoom={10}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  {/* Use <WrappedPingLayer> where you would have used <PingLayer>. */}
  <WrappedPingLayer ref={(ref) => { this.pingLayer = ref; }} radiusRange={[3, 50]} />
</Map>

Options Ping options

Option	Type	Default	Description
`duration`	`int`	`800`	Sets the transition duration for the ping layer.
`fps`	`int`	`32`	Sets the target framerate for the ping animation.
`opacityRange`	`array`	`[ 1, 0 ]`	Sets the range of the opacity scale used to fade out the pings as they age.
`radiusRange`	`array`	`[ 3, 15 ]`	Sets the range of the radius scale used to size the pings as they age.