Skip to content

leaflet-hexbin / HexbinLayer

Class: HexbinLayer<Data> ​

Defined in: HexbinLayer.ts:154

A layer for displaying binned data in a hexagon grid on a Leaflet map. Extends L.SVG to take advantage of built-in zoom animations.

Extends ​

  • SVG

Type Parameters ​

Data ​

Data = L.LatLngExpression

Constructors ​

Constructor ​

new HexbinLayer<Data>(options?): HexbinLayer<Data>

Defined in: HexbinLayer.ts:221

Parameters ​

options? ​

HexbinLayerConfig<Data>

Returns ​

HexbinLayer<Data>

Overrides ​

L.SVG.constructor

Properties ​

options ​

options: Required<HexbinLayerConfig<Data>> & RendererOptions

Defined in: HexbinLayer.ts:158

Default options for the hexbin layer

Overrides ​

L.SVG.options


_scale ​

_scale: object

Defined in: HexbinLayer.ts:189

D3 scales used for the hexbin layer

color ​

color: ScaleLinear<string, string, never>

radius ​

radius: ScaleLinear<number, number, never>

opacity ​

opacity: ScaleLinear<number, number, never>


_hexLayout ​

_hexLayout: Hexbin<HexbinData<Data>>

Defined in: HexbinLayer.ts:202


_container ​

_container: SVGSVGElement

Defined in: HexbinLayer.ts:15

Inherited from ​

L.SVG._container


_dispatch ​

protected _dispatch: Dispatch<object>

Defined in: HexbinLayer.ts:196


_hoverHandler ​

protected _hoverHandler: HexbinHoverHandler<Data>

Defined in: HexbinLayer.ts:199


_data ​

protected _data: Data[]

Defined in: HexbinLayer.ts:208


_map ​

protected _map: Map

Defined in: HexbinLayer.ts:211

Overrides ​

L.SVG._map


_tooltipOptions ​

protected _tooltipOptions: TooltipOptions<Data> = {}

Defined in: HexbinLayer.ts:213


_tooltip ​

protected _tooltip: undefined | Tooltip

Defined in: HexbinLayer.ts:214


_d3Container ​

protected _d3Container: Selection<SVGGElement, unknown, null, undefined>

Defined in: HexbinLayer.ts:219

Methods ​

onAdd() ​

onAdd(map): this

Defined in: HexbinLayer.ts:258

Callback made by Leaflet when the layer is added to the map

Parameters ​

map ​

Map

Reference to the map to which this layer has been added

Returns ​

this

Overrides ​

L.SVG.onAdd


onRemove() ​

onRemove(map): this

Defined in: HexbinLayer.ts:276

Callback made by Leaflet when the layer is removed from the map

Parameters ​

map ​

Map

Reference to the map from which this layer is being removed

Returns ​

this

Overrides ​

L.SVG.onRemove


redraw() ​

redraw(): void

Defined in: HexbinLayer.ts:294

(Re)draws the hexbins data on the container

Returns ​

void


_createHexagons() ​

_createHexagons(g, data): void

Defined in: HexbinLayer.ts:331

Parameters ​

g ​

Selection<SVGGElement, number, SVGGElement, unknown>

data ​

HexbinData<Data>[]

Returns ​

void


_getExtent() ​

_getExtent(bins, valueFn, scaleExtent): [number, number]

Defined in: HexbinLayer.ts:474

Parameters ​

bins ​

HexbinBin<HexbinData<Data>>[]

valueFn ​

(d) => number

scaleExtent ​

[number, undefined | number]

Returns ​

[number, number]


radius() ​

Call Signature ​

radius(): number

Defined in: HexbinLayer.ts:501

Get or set the radius of the hexagon grid cells

Returns ​

number

Call Signature ​

radius(v): this

Defined in: HexbinLayer.ts:502

Get or set the radius of the hexagon grid cells

Parameters ​
v ​

number

Returns ​

this


opacity() ​

Call Signature ​

opacity(): number | [number, number]

Defined in: HexbinLayer.ts:521

Get or set the opacity of the hexbin layer

Returns ​

number | [number, number]

Call Signature ​

opacity(v): this

Defined in: HexbinLayer.ts:522

Get or set the opacity of the hexbin layer

Parameters ​
v ​

The opacity value to set. If an array is provided, the first element is the minimum opacity and the second is the maximum.

number | [number, number]

Returns ​

this


duration() ​

Call Signature ​

duration(): number

Defined in: HexbinLayer.ts:534

Get or set the duration of transition animations

Returns ​

number

Call Signature ​

duration(v): this

Defined in: HexbinLayer.ts:535

Get or set the duration of transition animations

Parameters ​
v ​

number

Returns ​

this


colorScaleExtent() ​

Call Signature ​

colorScaleExtent(): [number, undefined | number]

Defined in: HexbinLayer.ts:547

Get or set the color scale domain extent

Returns ​

[number, undefined | number]

Call Signature ​

colorScaleExtent(v): this

Defined in: HexbinLayer.ts:548

Get or set the color scale domain extent

Parameters ​
v ​

[number, undefined | number]

The color scale extent to set. If an array is provided, the first element is the minimum extent and the second is the maximum. This means that for the purpose of color interpolation, the domain will be clipped to this extent, i.e. values below the minimum will be treated as the minimum, and values above the maximum will be treated as the maximum.

Returns ​

this


radiusScaleExtent() ​

Call Signature ​

radiusScaleExtent(): [number, undefined | number]

Defined in: HexbinLayer.ts:560

Get or set the radius scale domain extent

Returns ​

[number, undefined | number]

Call Signature ​

radiusScaleExtent(v): this

Defined in: HexbinLayer.ts:561

Get or set the radius scale domain extent

Parameters ​
v ​

[number, undefined | number]

The radius scale extent to set. If an array is provided, the first element is the minimum extent and the second is the maximum. This means that for the purpose of radius interpolation, the domain will be clipped to this extent, i.e. values below the minimum will be treated as the minimum, and values above the maximum will be treated as the maximum.

Returns ​

this


opacityScaleExtent() ​

Call Signature ​

opacityScaleExtent(): [number, undefined | number]

Defined in: HexbinLayer.ts:573

Get or set the opacity scale domain extent

Returns ​

[number, undefined | number]

Call Signature ​

opacityScaleExtent(v): this

Defined in: HexbinLayer.ts:574

Get or set the opacity scale domain extent

Parameters ​
v ​

[number, undefined | number]

The opacity scale extent to set. If an array is provided, the first element is the minimum extent and the second is the maximum. This means that for the purpose of opacity interpolation, the domain will be clipped to this extent, i.e. values below the minimum will be treated as the minimum, and values above the maximum will be treated as the maximum.

Returns ​

this


colorRange() ​

Call Signature ​

colorRange(): string[]

Defined in: HexbinLayer.ts:587

Get or set the color scale range

Returns ​

string[]

Call Signature ​

colorRange(v): this

Defined in: HexbinLayer.ts:588

Get or set the color scale range

Parameters ​
v ​

string[]

The color range to set. Colors will be interpolated between all provided colors.

Returns ​

this


radiusRange() ​

Call Signature ​

radiusRange(): null | [number, number]

Defined in: HexbinLayer.ts:601

Get or set the radius scale range

Returns ​

null | [number, number]

Call Signature ​

radiusRange(v): this

Defined in: HexbinLayer.ts:602

Get or set the radius scale range

Parameters ​
v ​

The min and max radius range to set. If null, the range will be set to the hexagon grid cell radius value.

null | [number, number]

Returns ​

this


colorScale() ​

Call Signature ​

colorScale(): ScaleLinear<string, string>

Defined in: HexbinLayer.ts:614

Get or set the color scale domain

Returns ​

ScaleLinear<string, string>

Call Signature ​

colorScale(v): this

Defined in: HexbinLayer.ts:615

Get or set the color scale domain

Parameters ​
v ​

ScaleLinear<string, string>

Returns ​

this


radiusScale() ​

Call Signature ​

radiusScale(): ScaleLinear<number, number>

Defined in: HexbinLayer.ts:625

Get or set the radius scale domain

Returns ​

ScaleLinear<number, number>

Call Signature ​

radiusScale(v): this

Defined in: HexbinLayer.ts:626

Get or set the radius scale domain

Parameters ​
v ​

ScaleLinear<number, number>

Returns ​

this


colorValue() ​

Call Signature ​

colorValue(): ScaleBinding<Data>

Defined in: HexbinLayer.ts:638

Get or set the value mapper for the color scale

Returns ​

ScaleBinding<Data>

Default ​
ts
the length of the data in the hexbin

Call Signature ​

colorValue(v): this

Defined in: HexbinLayer.ts:639

Get or set the value mapper for the color scale

Parameters ​
v ​

ScaleBinding<Data>

The value mapper to set. This function should accept an array of hexbin data and return a number to be used for color interpolation.

Returns ​

this

Default ​
ts
the length of the data in the hexbin

radiusValue() ​

Call Signature ​

radiusValue(): ScaleBinding<Data>

Defined in: HexbinLayer.ts:652

Get or set the value mapper for the radius scale

Returns ​

ScaleBinding<Data>

Default ​
ts
the length of the data in the hexbin

Call Signature ​

radiusValue(v): this

Defined in: HexbinLayer.ts:653

Get or set the value mapper for the radius scale

Parameters ​
v ​

ScaleBinding<Data>

The value mapper to set. This function should return a number for each bin, which will be used to determine the radius of the hexagon.

Returns ​

this

Default ​
ts
the length of the data in the hexbin

fill() ​

Call Signature ​

fill(): (d) => string

Defined in: HexbinLayer.ts:666

Get or set the value mapper for the fill color of the hexbins

Returns ​

(d): string

Parameters ​
d ​

HexbinData<Data>[]

Returns ​

string

Default ​
ts
a color interpolated from the color scale based on the value returned by the colorValue function

Call Signature ​

fill(v): this

Defined in: HexbinLayer.ts:667

Get or set the value mapper for the fill color of the hexbins

Parameters ​
v ​

(d) => string

The value mapper to set. This function should return a string to be used as the fill color for the hexbin.

Returns ​

this

Default ​
ts
a color interpolated from the color scale based on the value returned by the colorValue function

data() ​

Call Signature ​

data(): Data[]

Defined in: HexbinLayer.ts:681

Get or set the data to be binned by the hexbin layer. Triggers a redraw of the hexbins when set.

Returns ​

Data[]

Call Signature ​

data(v): this

Defined in: HexbinLayer.ts:682

Get or set the data to be binned by the hexbin layer. Triggers a redraw of the hexbins when set.

Parameters ​
v ​

Data extends LatLngExpression ? Data<Data>[] : never

The data to set. This should be an array of data to be binned.

Returns ​

this

Call Signature ​

data(v, accessor?): this

Defined in: HexbinLayer.ts:683

Get or set the data to be binned by the hexbin layer. Triggers a redraw of the hexbins when set.

Parameters ​
v ​

Data[]

The data to set. This should be an array of data to be binned.

accessor? ​

(d) => LatLngExpression

An optional function to convert the data into a LatLngExpression. If not provided, the data is assumed to be an array of LatLngExpressions.

Returns ​

this


accessor() ​

accessor(): (d) => LatLngExpression

Defined in: HexbinLayer.ts:702

Returns ​

(d): LatLngExpression

Parameters ​
d ​

Data

Returns ​

LatLngExpression


dispatch() ​

dispatch(): Dispatch<object>

Defined in: HexbinLayer.ts:709

Returns ​

Dispatch<object>


hoverHandler() ​

Call Signature ​

hoverHandler(): HexbinHoverHandler<Data>

Defined in: HexbinLayer.ts:714

Get or set the hover handler for the hexbin layer.

Returns ​

HexbinHoverHandler<Data>

Call Signature ​

hoverHandler(v): this

Defined in: HexbinLayer.ts:715

Get or set the hover handler for the hexbin layer.

Parameters ​
v ​

HexbinHoverHandler<Data>

Returns ​

this


colorBinding() ​

Call Signature ​

colorBinding(): ScaleBinding<Data>

Defined in: HexbinLayer.ts:729

Get or set the color scale binding function for the hexbin layer. This function is used to determine the color of each hexbin based on the data.

Returns ​

ScaleBinding<Data>

Call Signature ​

colorBinding(v): this

Defined in: HexbinLayer.ts:730

Get or set the color scale binding function for the hexbin layer. This function is used to determine the color of each hexbin based on the data.

Parameters ​
v ​

ScaleBinding<Data>

Returns ​

this


radiusBinding() ​

Call Signature ​

radiusBinding(): ScaleBinding<Data>

Defined in: HexbinLayer.ts:742

Get or set the radius scale binding function for the hexbin layer. This function is used to determine the radius of each hexbin based on the data.

Returns ​

ScaleBinding<Data>

Call Signature ​

radiusBinding(v): this

Defined in: HexbinLayer.ts:743

Get or set the radius scale binding function for the hexbin layer. This function is used to determine the radius of each hexbin based on the data.

Parameters ​
v ​

ScaleBinding<Data>

Returns ​

this


opacityBinding() ​

Call Signature ​

opacityBinding(): ScaleBinding<Data>

Defined in: HexbinLayer.ts:755

Get or set the opacity scale binding function for the hexbin layer. This function is used to determine the opacity of each hexbin based on the data.

Returns ​

ScaleBinding<Data>

Call Signature ​

opacityBinding(v): this

Defined in: HexbinLayer.ts:756

Get or set the opacity scale binding function for the hexbin layer. This function is used to determine the opacity of each hexbin based on the data.

Parameters ​
v ​

ScaleBinding<Data>

Returns ​

this


fillColor() ​

Call Signature ​

fillColor(): (d) => string

Defined in: HexbinLayer.ts:769

Get or set the fill binding function for the hexbin layer. This function is used to determine the fill color of each hexbin based on the data. Can be used to override the default color scale function.

Returns ​

(d): string

Parameters ​
d ​

HexbinData<Data>[]

Returns ​

string

Call Signature ​

fillColor(v): this

Defined in: HexbinLayer.ts:770

Get or set the fill binding function for the hexbin layer. This function is used to determine the fill color of each hexbin based on the data. Can be used to override the default color scale function.

Parameters ​
v ​

(d) => string

Returns ​

this


tooltip() ​

tooltip(tooltip): this

Defined in: HexbinLayer.ts:782

Get or set the tooltip content and options for the hexbin layer.

Parameters ​

tooltip ​

TooltipOptions<Data>

Returns ​

this


getTooltip() ​

getTooltip(): undefined | Tooltip

Defined in: HexbinLayer.ts:795

Get the tooltip instance attached to the hexbin layer

Returns ​

undefined | Tooltip

Overrides ​

L.SVG.getTooltip


bindTooltip() ​

bindTooltip(content, options?): this

Defined in: HexbinLayer.ts:803

Bind a tooltip to the hexbin layer with the provided content and options. Useful to bind an existing tooltip instance to the hexbin layer.

Parameters ​

content ​

Content | Tooltip

options? ​

TooltipOptions

Returns ​

this

Overrides ​

L.SVG.bindTooltip


unbindTooltip() ​

unbindTooltip(): this

Defined in: HexbinLayer.ts:820

Unbind the tooltip from the hexbin layer

Returns ​

this

Overrides ​

L.SVG.unbindTooltip


getLatLngs() ​

getLatLngs(): LatLng[]

Defined in: HexbinLayer.ts:829

Returns ​

LatLng[]


toGeoJSON() ​

toGeoJSON(): Feature<MultiPoint, LatLng>

Defined in: HexbinLayer.ts:838

Returns ​

Feature<MultiPoint, LatLng>


onDraw() ​

onDraw(handler): void

Defined in: HexbinLayer.ts:845

Parameters ​

handler ​

(layer, data, view) => void

Returns ​

void


onMouseOver() ​

onMouseOver(handler): void

Defined in: HexbinLayer.ts:852

Bind callback to hexagon mouseover event

Parameters ​

handler ​

(data, layer, ev) => void

Returns ​

void


onMouseOut() ​

onMouseOut(handler): void

Defined in: HexbinLayer.ts:859

Bind callback to hexagon mouseout event

Parameters ​

handler ​

(data, layer, ev) => void

Returns ​

void


onClick() ​

onClick(handler): void

Defined in: HexbinLayer.ts:866

Bind callback to hexagon click event

Parameters ​

handler ​

(data, latLng, layer, ev) => void

Returns ​

void


_accessor() ​

protected _accessor(d): LatLngExpression

Defined in: HexbinLayer.ts:242

Parameters ​

d ​

Data

Returns ​

LatLngExpression


_destroyContainer() ​

protected _destroyContainer(): void

Defined in: HexbinLayer.ts:287

Clean up the svg container

Returns ​

void


_linearlySpace() ​

protected _linearlySpace(from, to, length): number[]

Defined in: HexbinLayer.ts:326

Parameters ​

from ​

number

to ​

number

length ​

number

Returns ​

number[]