![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
react-leaflet-d3
Advanced tools
React wrapper of @asymmetrik/leaflet-d3. Leaflet D3 Provides a collection of D3.js based visualization plugins for Leaflet.
React wrapper of @asymmetrik/leaflet-d3 for react-leaflet.
Leaflet D3 Provides a collection of D3.js based visualization plugins for Leaflet.
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
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
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>
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>
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. |
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>
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>
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. |
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 goes to all the contributors for the original work.
MIT License
2.0.0 (2019-01-12)
react-leaflet@2.x
FAQs
React wrapper of @asymmetrik/leaflet-d3. Leaflet D3 Provides a collection of D3.js based visualization plugins for Leaflet.
The npm package react-leaflet-d3 receives a total of 3 weekly downloads. As such, react-leaflet-d3 popularity was classified as not popular.
We found that react-leaflet-d3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.