Mapbox React

English

中文

English

中文

Appearance

Installation ​

TIP

When performing SSR packaging, special processing is required. Mapbox includes direct access to the window object

The Mapbox React component library has 5 packages, namely:

  • @mapbox-react/core: v1.0.0, core component package
  • @mapbox-react/effect-layers: v1.0.0, special effect component package
  • @mapbox-react/deck-layers: v1.0.0, Deck GL special effect extension package
  • @mapbox-react/env-layers: v1.0.0, simulation environment component package, including rain, snow, etc.
  • @mapbox-react/utils: v1.0.0, tool package

Usage ​

1. Import css ​

ts
import '@mapbox-web/supermap/mapbox-gl-enhance.css'

// Use core, env-layers, effect-layers, deck-layers packages, you need to import the following css
import "@mapbox-react/core/index.css"

// To use the utils package, you need to import the following css
import "@mapbox-react/utils/index.css"

// If you need to draw related functions, you need to import the following css
import '@mapbox-web/draw/mapbox-web-draw.css'

2. Import components ​

ts
import { MbMap, ... } from "@mapbox-react/core"
import { MbArcLayer, ... } from "@mapbox-react/deck-layers"
import { MbRainLayer, ... } from "@mapbox-react/env-layers"
import { MbDelayedPointLayer, ... } from "@mapbox-react/effect-layers"
import { createMeasure } from "@mapbox-react/utils"

Installation method ​

npm ​

shell
# Install as required
npm i @mapbox-react/core@latest
npm i @mapbox-react/utils@latest
npm i @mapbox-react/env-layers@latest
npm i @mapbox-react/effect-layers@latest
npm i @mapbox-react/deck-layers@latest

yarn ​

shell
# Install as required
yarn add @mapbox-react/core@latest
yarn add @mapbox-react/utils@latest
yarn add @mapbox-react/env-layers@latest
yarn add @mapbox-react/effect-layers@latest
yarn add @mapbox-react/deck-layers@latest

pnpm ​

shell
# Install as needed
pnpm add @mapbox-react/core@latest
pnpm add @mapbox-react/utils@latest
pnpm add @mapbox-react/env-layers@latest
pnpm add @mapbox-react/effect-layers@latest
pnpm add @mapbox-react/deck-layers@latest