TrailLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.17381, 39.92155464])
  const [zoom, setZoom] = useState(9)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  const [trailLength, setTrailLength] = useState(3)

  const getPath = (data: any) => {
    let prevPt: any
    const points: number[][] = []
    for (let i = 0; i < data.length; i += 2) {
      let pt = [data[i], data[i + 1]]
      if (i > 0) {
        pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
      }
      prevPt = pt

      points.push([pt[0] / 1e4, pt[1] / 1e4])
    }
    return points
  }
  const getColor = () => [
    Math.random() * 150 + 100,
    Math.random() * 100 + 28,
    93,
  ]

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTrailLayer
          data="https://mapbox-web.github.io/mapbox-react/json/beijing-bus-lines.json"
          getPath={getPath}
          getColor={getColor}
          getWidth={100}
          speed={3}
          trailLength={trailLength}
          interval={5}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
speed	Speed of movement/animation.	number	1
trailLength	Length of the trail (e.g., in number of segments or time units).	number	10
interval	Time interval between updates/frames (e.g., in milliseconds).	number	5
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 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 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	{}
getColor	Color information.	string / AnyFunc / number[]	black
getPath	Path information.	AnyFunc	object => object.path
getWidth	Width information.	number / AnyNumberFunc	100
miterLimit	Miter limit (used when cap-rounded is false).	number	4
capRounded	Whether the line caps are rounded.	boolean	false
jointRounded	Whether the line joints are rounded.	boolean	false
widthMaxPixels	Maximum width in pixels.	number	Number.MAX_SAFE_INTEGER
widthMinPixels	Minimum width in pixels.	number	0
widthScale	Scaling factor for the width.	number	1
widthUnits	Units for the width (pixels or meters).	string ('pixels' / 'meters')	'meters'

EVENTS

Name	Description	Parameters

METHODS

Name	Description	Definition