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