GridLayer

Example

Example Source Code

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

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

  const data = 'https://mapbox-web.github.io/mapbox-react/geojson/beijing_price.json'
  const [elevationScale, setElevationScale] = useState(50)

  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']} />
        <MbGridLayer
          data={data}
          position={(d) => d.lnglat}
          colorWeight={(d) => d.transPrice}
          colorAggregation="MEAN"
          elevationWeight={(d) => d.transPrice}
          elevationAggregation="MEAN"
          pickable={true}
          elevationScale={elevationScale}
          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	-
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
cellSize	Radius of the cell in meters.	number	1000
colorAggregation	Aggregation method for cell colors. This property takes effect when used in conjunction with color-weight. Available options are: SUM, MEAN, MIN, MAX.	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 cell. For example, you can calculate the color based on the number of points within the cell (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 cell. This property takes effect when used in conjunction with color-aggregation.	AnyFunc	-
coverage	The coverage ratio of the cell grid. This value is between 0 and 1. The final rendered cell radius will be cellSize * coverage.	number	1
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data.	string / IndexAny / AnyArr / Promise<any>	''
highlightColor	The color to blend with the original color of the highlighted object. 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 object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
elevationValue	Function to calculate the elevation/height of each cell. For example, you can calculate the height based on the number of points within the cell: (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 cell. This property takes effect when used in conjunction with elevation-aggregation.	AnyFunc	() => 1
elevationAggregation	Aggregation method for cell elevation/height. Available options are: SUM, MEAN, MIN, MAX.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
elevationScale	Scaling factor for the height of the cells.	number	1
material	Whether the cells have material properties (e.g., lighting, shading).	boolean	true
opacity	The opacity of the cell (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
stroked	Whether the cells have an outline (stroke).	boolean	false

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