LineLayer

Example

Bus route visualization demo with 94,000 line segments.

Example Source Code

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

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

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

  const getColor = (d: { from: number[] }) => {
    const r = (d.from[1] - 39.5) * 0.5 + (d.from[0] - 116) * 0.5
    return `rgba(${255 * (1 - r * 2)}, ${128 * r}, ${255 * r},${Math.abs(80 * r) + 60
      })`
  }

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbLineLayer
          data={data}
          color={getColor}
          width={width}
          sourcePosition={(d) => d.from}
          targetPosition={(d) => d.to}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
sourcePosition	Source position. This defines the starting point of the connection/line. Can be an array of coordinates or a function that returns the coordinates based on the data.	AnyArr / AnyFunc	-
targetPosition	Target position. This defines the ending point of the connection/line. Can be an array of coordinates or a function that returns the coordinates based on the data.	AnyArr / 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
color	Color of the connection/line. This can be a string representing a color name (e.g., 'red', 'blue'), a function that returns a color based on the data, or an array of RGBA values (e.g., [255, 0, 0, 255] for red).	string / AnyFunc	'black'
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 is used to create the highlight effect. The value can be a string representing a color or an array of RGBA values.	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted element within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
opacity	The opacity of the connection/line (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
width	Width of the connection/line. This can be a fixed number or a function that returns a width based on the data.	number / AnyNumberFunc	1
widthMaxPixels	The maximum width in pixels. This limits the maximum width of the rendered connections/lines.	number	Number.MAX_SAFE_INTEGER
widthMinPixels	The minimum width in pixels. This ensures that connections/lines are not rendered with a width smaller than this value.	number	0
widthScale	A scaling factor applied to the width. This allows you to easily adjust the width of all connections/lines in the layer.	number	1
widthUnits	Units for the width: 'pixels' or 'meters'. Specifies whether the width values are interpreted as pixels on screen or meters in world space. This is especially relevant for geographic visualizations where the width should represent a physical distance.	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