TempLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(3)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTempLayer
          image="https://mapbox-web.github.io/mapbox-react/wind/tmp.png"
          min={-21.32}
          max={26.8}
          range={[360, 170]}
          origin={[0, 85]}
          resolution={0.25}
          opacity={0.8}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
image	URL of the image	string	-
max	Maximum value (used for color mapping/scaling)	number	-
min	Minimum value (used for color mapping/scaling)	number	-
origin	Origin of the image (e.g., [x, y] coordinates)	number[]	-
range	Value range (e.g., [min, max])	number[]	-
resolution	Resolution of the image (e.g., pixels per unit)	number	-
rampColors	Color ramp for visualization	IndexAny	{ 0.0: "#6fb9e6", 0.1: "#8ac4e6", 0.2: "#abdda4", 0.3: "#e6f598", 0.4: "#fee08b", 0.5: "#fdae61", 0.6: "#f46d43", 1.0: "#d53e4f" }
opacity	Opacity (0-1)	number	0.8
visible	Visibility	boolean	true

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-

METHODS

Name	Description	Definition