MapTooltip

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(13)

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={10}>
        <MbTiandituLayer types={['vec']} />
        <MbMapTooltip>
          {({ pixel, coordinates }) =>
            pixel.x && pixel.y ? (
              <div
                style={{
                  padding: '4px',
                  backgroundColor: 'black',
                  color: 'white',
                }}
              >
                position: {`${coordinates} / x:${pixel.x} y:${pixel.y}`}
              </div>
            ) : null
          }
        </MbMapTooltip>
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
children	Children nodes	({ pixel, coordinates }: { pixel: { x: number; y: number }, coordinates: { lng: number; lat: number }}) => ReactNode	-

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-

METHODS

Name	Description	Definition