VideoLayer

Video Layer, capable of projecting video onto a map within a target geographic area (latitude/longitude range).

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.4228057861328, 39.93632920085673])
  const [zoom, setZoom] = useState(10)

  const video = {
    urls: ['https://vjs.zencdn.net/v/oceans.mp4'],
    coordinates: [
      [116.3594627380371, 39.93632920085673],
      [116.4228057861328, 39.93632920085673],
      [116.4228057861328, 39.89735776851477],
      [116.3594627380371, 39.89735776851477],
    ],
  }

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={10}>
        <MbTiandituLayer types={['vec']} />
        <MbVideoLayer urls={video.urls} coordinates={video.coordinates} />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
coordinates	Coordinates of the four corners of the image, as an array of latitude/longitude pairs. The order is: top-left, top-right, bottom-right, bottom-left. Example: [ [-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936] ]. These coordinates define the geographic bounds of the video overlay.	Array<number[]>	-
urls	Video resource URLs. An array of URLs pointing to the video resource. Multiple URLs can be provided for browser compatibility (e.g., different video formats like MP4, WebM, Ogg). The player will attempt to play the first compatible format it finds.	string[]	-
id	Layer ID. A unique identifier for the layer.	string	-
show	Visibility of the layer. If true, the layer is displayed; if false, the layer is hidden.	boolean	true

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-

METHODS

Name	Description	Definition