Source

Supports setting GeoJSON and TileJSON data

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([120.30782359643746, 31.49292271319491])
  const [zoom, setZoom] = useState(11)

  const [showLayer, setShowLayer] = useState(false)
  const geoJsonSource = {
    type: 'geojson',
    data: `https://mapbox-web.github.io/mapbox-react/geojson/wuxi.geojson`,
  }

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />

        {showLayer && (
          <MbPolygonLayer sourceId="sourceExample" opacity={0.5} color="blue" />
        )}

        <MbSource
          id="sourceExample"
          geoJsonSource={geoJsonSource}
          onSourceAdded={() => setShowLayer(true)}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Source Id	string	-
geoJsonSource	See：GeoJson	IndexAny	-
tileJsonSource	See：TileJson	IndexAny	-

EVENTS

Name	Description	Parameters
onSourceAdded	Data source added event	source

METHODS

Name	Description	Definition