HexagonLayer

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbTiandituLayer } from '@mapbox-react/core'
import { MbHexagonLayer } from '@mapbox-react/deck-layers'

const App = () => {
  const [mapCenter] = useState([116.314177, 39.832819])
  const [zoom, setZoom] = useState(8)
  const [pitch, setPitch] = useState(40)
  const mapInst = useRef<any>()

  const data = 'https://mapbox-web.github.io/mapbox-react/geojson/beijing_price.json'
  const [radius, setRadius] = useState(1000)

  const mousemoveHandler = ({ object }: { object: any }) => {
    console.log(object)
  }

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTiandituLayer types={['vec']} />
        <MbHexagonLayer
          data={data}
          radius={radius}
          position={(d) => d.lnglat}
          colorWeight={(d) => d.transPrice}
          colorAggregation="MEAN"
          elevationWeight={(d) => d.transPrice}
          elevationAggregation="MEAN"
          pickable={true}
          elevationScale={50}
          onMouseMove={mousemoveHandler}
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
radius	Radius of the hexagon in meters.	number	1000
position	Function to retrieve the position of each data point. This function should accept a data item as an argument and return an array representing the [longitude, latitude] or [longitude, latitude, altitude/elevation].	AnyFunc	-
autoHighlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
colorAggregation	Aggregation method for hexagon colors. This property takes effect when used in conjunction with color-weight.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
colorRange	Color range used for mapping values to colors. This is an array of color strings, typically in RGB or hexadecimal format.	string[]	[ "rgb(255, 255, 178)", "rgb(254, 217, 118)", "rgb(254, 178, 76)", "rgb(253, 141, 60)", "rgb(240, 59, 32)", "rgb(189, 0, 38)" ]
colorValue	Function to calculate the color for each hexagon. For example, you can calculate the color based on the number of points within the hexagon (density heatmap): (points) => points.length. If this property is set, color-weight and color-aggregation are disabled.	AnyFunc	-
colorWeight	Function to calculate the color weight for each point within a hexagon. This property takes effect when used in conjunction with color-aggregation.	AnyFunc	-
coverage	The coverage ratio of the hexagonal grid. This value is between 0 and 1. The final rendered hexagon radius will be radius * coverage.	number	1
data	Source data for the layer. This can be an array, object, Promise that resolves to data, or a string representing a URL.	array / object / Promise / string	[]
elevationAggregation	Aggregation method for hexagon elevation/height.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
elevationScale	Scaling factor for the height of the extruded hexagons.	number	1
elevationValue	Function to calculate the elevation/height of each hexagon. For example, you can calculate the height based on the number of points within the hexagon: (points) => points.length. If this property is set, elevation-weight and elevation-aggregation are disabled.	AnyFunc	-
elevationWeight	Function to calculate the elevation weight for each point within a hexagon.	AnyFunc	() => 1
extruded	Whether the hexagons are rendered in 3D (extruded).	boolean	true
highlightColor	The color to blend with the original color of the highlighted hexagon. This creates the highlight effect. The value can be a color string or an RGBA array.	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted hexagon within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
material	Whether the 3D hexagons have material properties (e.g., lighting, shading). This only takes effect when extruded is true.	boolean	true
opacity	The opacity of the hexagons (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

Name	Description	Definition