react-leaflet-d3

2.0.0 • Public • Published

react-leaflet-d3

travis build version MIT License dependencies peer dependencies react-leaflet compatibility downloads issues

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

Package Sidebar

Install

npm i react-leaflet-d3

Weekly Downloads

14

Version

2.0.0

License

MIT

Unpacked Size

289 kB

Total Files

8

Last publish

Collaborators

  • m_hasbie