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
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='© <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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{/* Use <WrappedHexbinLayer> where you would have used <HexbinLayer>. */}
<WrappedHexbinLayer data={geoJsonData} {...options} />
</Map>
Hexbin options
OptionsOption | 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='© <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='© <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>
Ping options
OptionsOption | 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
doc
pingLayer.ping(coordinates, cssClassName) -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