DelayedPointLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([-85.2809895, 42.9340835])
  const [zoom, setZoom] = useState(4)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbDelayedPointLayer
          data="https://mapbox-web.github.io/mapbox-react/json/americanLibraries.json"
          getPosition={(d) => d.position}
          getFillColor={[49, 92, 114]}
          getRadius={200}
          radiusMinPixels={3}
          getDelayFactor={(d) => {
            const result = Math.abs(d.position[0] + 71) / 50
            return result < 0 ? 0 : result > 1 ? 1 : result
          }}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
getDelayFactor	Function to retrieve the delay factor.	AnyFunc	-
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
show	Whether the layer is visible.	boolean	true
opacity	The opacity of the layer (0-1).	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events.	boolean	false
autoHighlight	When this property is true and pickable is also true, the hovered object will be highlighted.	boolean	false
highlightColor	The color to blend with the original color of the highlighted object.	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted element.	number	-1
onDataLoad	Callback function invoked after data loading is complete.	AnyFunc	-
dataTransform	Function to transform the data before rendering.	AnyFunc	-
transitions	Transition settings for the layer.	IndexAny	{}
radiusUnits	Units for the radius: 'meters' or 'pixels'.	string ('meters', 'pixels')	'meters'
radiusScale	A scaling factor applied to the radius.	number	1
lineWidthUnits	Units for the line width: 'meter'.	string	'meter'
lineWidthScale	A scaling factor applied to the line width.	number	1
stroked	Whether the object has a stroke (outline).	boolean	false
filled	Whether the object is filled.	boolean	true
radiusMinPixels	Minimum radius in pixels.	number	0
radiusMaxPixels	Maximum radius in pixels.	number	Number.MAX_SAFE_INTEGER
lineWidthMinPixels	Minimum line width in pixels.	number	0
lineWidthMaxPixels	Maximum line width in pixels.	number	Number.MAX_SAFE_INTEGER
getPosition	Function to retrieve the position. Defaults to accessing the position property of the data object.	AnyFunc	(d) => d.position
getRadius	Function to retrieve the radius.	number / AnyNumberFunc	1
getFillColor	Function to retrieve the fill color.	number[] / AnyFunc	[0, 0, 0, 255]
getLineColor	Function to retrieve the line color.	number[] / AnyFunc	[0, 0, 0, 255]
getLineWidth	Function to retrieve the line width.	number / AnyNumberFunc	1

EVENTS

Name	Description	Parameters

METHODS

Name	Description	Definition