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.

API

Ping API

pingLayer.ping(coordinates, cssClassName) - doc

Submit a ping to the layer. The default data schema for the ping layer is:

[ [ lng1, lat1 ], [ lng2, lat2 ], [ lng3, lat3 ]... [ lngN, latN ] ]

Where the ping radius scale factor is fixed at 1.

Credits

Credits goes to all the contributors for the original work.

License

MIT License