TripsLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([-73.9, 40.7])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(20)
  const mapInst = useRef<any>()

  const data = 'https://mapbox-web.github.io/mapbox-react/json/trips.json'
  const [width, setWidth] = useState(100)

  const [currentTime, setCurrentTime] = useState(0)
  const loop = 1900
  const animate = (timestamp: number) => {
    setCurrentTime((timestamp / 10) % loop)
    requestAnimationFrame(animate)
  }

  useEffect(() => {
    animate(0)
  }, [])

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTripsLayer
          data={data}
          getWidth={width}
          getPath={(d) => d.path}
          getTimestamps={(d) => d.timestamps}
          trailLength={200}
          currentTime={currentTime}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
autoHighlight	When this property is true and pickable is also true, the hovered object will be highlighted.	boolean	false
currentTime	Current time.	number	0
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
getColor	Color information.	string / AnyFunc / number[]	'black'
getTimestamps	Function to retrieve timestamp information.	AnyFunc	-
getPath	Function to retrieve path information.	AnyFunc	object => object.path
getWidth	Width information.	number / AnyNumberFunc	100
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
miterLimit	Applies when joint-rounded is false.	number	4
capRounded	Whether the line caps are rounded.	boolean	false
jointRounded	Whether the line joints are rounded.	boolean	false
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
show	Whether the layer is visible.	boolean	true
trailLength	Length of the trail.	number	120
widthMaxPixels	Maximum width in pixels.	number	Number.MAX_SAFE_INTEGER
widthMinPixels	Minimum width in pixels.	number	0
widthScale	A scaling factor applied to the width.	number	1
widthUnits	Units for the width: 'pixels' or 'meters'.	string ('pixels', 'meters')	'meters'

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