mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
Migrate website to Docusaurus (#2180)
This commit is contained in:
Xiaoji Chen
GitHub
parent
2244babaae
commit
c15c0f8d54
2
.github/workflows/website.yml
vendored
2
.github/workflows/website.yml
vendored
@ -45,5 +45,5 @@ jobs:
|
||||
with:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
BRANCH: gh-pages
|
||||
FOLDER: website/public
|
||||
FOLDER: website/build
|
||||
CLEAN: true
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Contributing to react-map-gl
|
||||
# Contributing
|
||||
|
||||
**Thanks for taking the time to contribute!**
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
|
||||
# Introduction
|
||||
|
||||
<p align="center">
|
||||
These docs are for
|
||||
<a href="https://github.com/visgl/react-map-gl/tree/7.0-release/docs">
|
||||
@ -13,9 +15,6 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
# Introduction
|
||||
|
||||
react-map-gl is a suite of [React](http://facebook.github.io/react/) components for
|
||||
Mapbox GL JS-compatible libraries.
|
||||
|
||||
@ -30,9 +29,9 @@ For basemaps:
|
||||
- You can load map data from Mapbox's own service.
|
||||
- You can create and host your own map data using one of the many [open source tools](https://github.com/mapbox/awesome-vector-tiles).
|
||||
|
||||
New to react-map-gl? [Get Started](/docs/get-started/get-started.md)
|
||||
New to react-map-gl? [Get Started](./get-started/get-started.md)
|
||||
|
||||
Want to contribute? See our [Developer Guide](/docs/contributing.md)
|
||||
Want to contribute? See our [Developer Guide](./contributing.md)
|
||||
|
||||
|
||||
## Design Philosophy
|
||||
@ -45,10 +44,10 @@ This does not scale when we have many components that need to synchronize with e
|
||||
|
||||
Ultimately, in the spirit of the [reactive programming paradigm](https://en.wikipedia.org/wiki/Reactive_programming), data always flows **down**. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.
|
||||
|
||||
react-map-gl creates a fully reactive wrapper for mapbox-gl. The [Map](/docs/api-reference/map.md) component can be fully [controlled](https://reactjs.org/docs/forms.html#controlled-components), that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in [state management](/docs/get-started/state-management.md).
|
||||
react-map-gl creates a fully reactive wrapper for mapbox-gl. The [Map](./api-reference/map.md) component can be fully [controlled](https://reactjs.org/docs/forms.html#controlled-components), that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in [state management](./get-started/state-management.md).
|
||||
|
||||
## Limitations
|
||||
|
||||
In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants.
|
||||
|
||||
It is possible to call the native methods directly from the `Map` instance obtained via [getMap](/docs/api-reference/map.md#gemap). However, doing so may result in the map's state to deviate from its props. For example, calling `map.setMaxZoom` directly will cause the map's constraint settings to differ from the value of the `maxZoom` prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.
|
||||
It is possible to call the native methods directly from the `Map` instance obtained via [getMap](./api-reference/map.md#gemap). However, doing so may result in the map's state to deviate from its props. For example, calling `map.setMaxZoom` directly will cause the map's constraint settings to differ from the value of the `maxZoom` prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.
|
||||
|
||||
@ -29,7 +29,7 @@ function App() {
|
||||
|
||||
Note that the following properties are not reactive. They are only used when the component first mounts.
|
||||
|
||||
#### `compact`: boolean | undefined
|
||||
#### `compact`: boolean | undefined {#compact}
|
||||
|
||||
- If `true` , force a compact attribution that shows the full attribution on mouse hover.
|
||||
- If `false` , force the full attribution control.
|
||||
@ -37,17 +37,17 @@ Note that the following properties are not reactive. They are only used when the
|
||||
|
||||
Note that your attribution must adhere to Mapbox's [guidelines](https://docs.mapbox.com/help/getting-started/attribution/).
|
||||
|
||||
#### `customAttribution`: string | string[]
|
||||
#### `customAttribution`: string | string[] {#customattribution}
|
||||
|
||||
String or strings to show in addition to any other attributions.
|
||||
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
|
||||
|
||||
Default: `'bottom-right'`
|
||||
|
||||
Placement of the control relative to the map.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the control's container.
|
||||
|
||||
|
||||
@ -25,17 +25,17 @@ function App() {
|
||||
|
||||
Note that the following properties are not reactive. They are only used when the component first mounts.
|
||||
|
||||
#### `containerId`: string
|
||||
#### `containerId`: string {#containerid}
|
||||
|
||||
Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.
|
||||
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
|
||||
|
||||
Default: `'top-right'`
|
||||
|
||||
Placement of the control relative to the map.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the control's container.
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ function App() {
|
||||
}
|
||||
```
|
||||
|
||||
#### `trigger()`: boolean
|
||||
#### `trigger()`: boolean {#trigger}
|
||||
|
||||
Trigger a geolocation event.
|
||||
|
||||
@ -54,11 +54,11 @@ Note that the following properties are not reactive. They are only used when the
|
||||
|
||||
### Tracking options
|
||||
|
||||
#### `positionOptions`: [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions)
|
||||
#### `positionOptions`: [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) {#positionoptions}
|
||||
|
||||
A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object
|
||||
|
||||
#### `trackUserLocation`: boolean
|
||||
#### `trackUserLocation`: boolean {#trackuserlocation}
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -66,37 +66,37 @@ If `true` the GeolocateControl becomes a toggle button and when active the map w
|
||||
|
||||
### Render options
|
||||
|
||||
#### `fitBoundsOptions`: [FitBoundsOptions](/docs/api-reference/types.md#fitboundsoptions)
|
||||
#### `fitBoundsOptions`: [FitBoundsOptions](./types.md#fitboundsoptions) {#fitboundsoptions}
|
||||
|
||||
Default: `{maxZoom: 15}`
|
||||
|
||||
A ([fitBounds](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds)) options object to use when the map is panned and zoomed to the user's location.
|
||||
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
|
||||
|
||||
Default: `'top-right'`
|
||||
|
||||
Placement of the control relative to the map.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the control's container.
|
||||
|
||||
#### `showAccuracyCircle`: boolean
|
||||
#### `showAccuracyCircle`: boolean {#showaccuracycircle}
|
||||
|
||||
Default: `true`
|
||||
|
||||
Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to `false` to disable.
|
||||
This only has effect if `showUserLocation` is `true`.
|
||||
|
||||
#### `showUserHeading`: boolean
|
||||
#### `showUserHeading`: boolean {#showuserheading}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true`, an arrow will be drawn next to the user location dot indicating the device's heading.
|
||||
This only has affect when `trackUserLocation` is `true`.
|
||||
|
||||
#### `showUserLocation`: boolean
|
||||
#### `showUserLocation`: boolean {#showuserlocation}
|
||||
|
||||
Default: `true`
|
||||
|
||||
@ -104,23 +104,23 @@ Show a dot on the map at the user's location. Set to `false` to disable.
|
||||
|
||||
### Callbacks
|
||||
|
||||
#### `onGeolocate`: (evt: [GeolocateResultEvent](/docs/api-reference/types.md#geolocateresultevent)) => void
|
||||
#### `onGeolocate`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#ongeolocate}
|
||||
|
||||
Called on each Geolocation API position update that returned as success.
|
||||
|
||||
#### `onError`: (evt: [GeolocateErrorEvent](/docs/api-reference/types.md#geolocateerrorevent)) => void
|
||||
#### `onError`: (evt: [GeolocateErrorEvent](./types.md#geolocateerrorevent)) => void {#onerror}
|
||||
|
||||
Called on each Geolocation API position update that returned as an error.
|
||||
|
||||
#### `onOutOfMaxBounds`: (evt: [GeolocateResultEvent](/docs/api-reference/types.md#geolocateresultevent)) => void
|
||||
#### `onOutOfMaxBounds`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#onoutofmaxbounds}
|
||||
|
||||
Called on each Geolocation API position update that returned as success but user position is out of map `maxBounds`.
|
||||
|
||||
#### `onTrackUserLocationStart`: (evt: [GeolocateEvent](/docs/api-reference/types.md#geolocateevent)) => void
|
||||
#### `onTrackUserLocationStart`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationstart}
|
||||
|
||||
Called when the GeolocateControl changes to the active lock state.
|
||||
|
||||
#### `onTrackUserLocationEnd`: (evt: [GeolocateEvent](/docs/api-reference/types.md#geolocateevent)) => void
|
||||
#### `onTrackUserLocationEnd`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationend}
|
||||
|
||||
Called when the GeolocateControl changes to the background state.
|
||||
|
||||
|
||||
@ -42,25 +42,25 @@ When props change *shallowly*, the component will perform style diffing to updat
|
||||
|
||||
Once a `<Layer>` is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
|
||||
|
||||
#### `id`: string
|
||||
#### `id`: string {#id}
|
||||
|
||||
Unique identifier of the layer. If not provided, a default id will be assigned.
|
||||
|
||||
#### `type`: string
|
||||
#### `type`: string {#type}
|
||||
|
||||
Required. Type of the layer.
|
||||
|
||||
### Options
|
||||
|
||||
#### `beforeId`: string
|
||||
#### `beforeId`: string {#beforeid}
|
||||
|
||||
The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.
|
||||
|
||||
Note that layers are added by the order that they mount. They are *NOT* reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate `beforeId` for consistent behavior.
|
||||
|
||||
#### `source`: string
|
||||
#### `source`: string {#source}
|
||||
|
||||
`source` is required by some layer types in the Mapbox style specification. If `<Layer>` is used as the child of a [Source](/docs/api-reference/source.md) component, this prop will be overwritten by the id of the parent source.
|
||||
`source` is required by some layer types in the Mapbox style specification. If `<Layer>` is used as the child of a [Source](./source.md) component, this prop will be overwritten by the id of the parent source.
|
||||
|
||||
|
||||
## Source
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# MapProvider
|
||||
|
||||
A [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operations outside of the component that directly renders a [Map](/docs/api-reference/map.md).
|
||||
A [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operations outside of the component that directly renders a [Map](./map.md).
|
||||
|
||||
The component should wrap all nodes in which you may want to access the maps:
|
||||
|
||||
@ -18,7 +18,7 @@ function Root() {
|
||||
}
|
||||
```
|
||||
|
||||
See [useMap](/docs/api-reference/use-map.md) for more information.
|
||||
See [useMap](./use-map.md) for more information.
|
||||
|
||||
|
||||
## Source
|
||||
|
||||
@ -23,7 +23,7 @@ function App() {
|
||||
|
||||
## Methods
|
||||
|
||||
Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or the [useMap](/docs/api-reference/use-map.md) hook.
|
||||
Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or the [useMap](./use-map.md) hook.
|
||||
|
||||
|
||||
```js
|
||||
@ -43,11 +43,11 @@ function App() {
|
||||
}
|
||||
```
|
||||
|
||||
The [MapRef](/docs/api-reference/types.md#mapref) object exposes [Map methods](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members) that **are safe to call without breaking the React bindings**. For example, `setStyle()` is hidden from the ref object, because the style is supposed to be changed by updating the `mapStyle` prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.
|
||||
The [MapRef](./types.md#mapref) object exposes [Map methods](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members) that **are safe to call without breaking the React bindings**. For example, `setStyle()` is hidden from the ref object, because the style is supposed to be changed by updating the `mapStyle` prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.
|
||||
|
||||
You can still access the hidden members via `getMap()`:
|
||||
|
||||
#### `getMap()`: MapboxMap
|
||||
#### `getMap()`: MapboxMap {#getmap}
|
||||
|
||||
Returns the native [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/) instance associated with this component.
|
||||
|
||||
@ -56,17 +56,17 @@ Returns the native [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/) instance
|
||||
|
||||
### Layout options
|
||||
|
||||
#### `id`: string
|
||||
#### `id`: string {#id}
|
||||
|
||||
Map container id.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
Default: `{position: 'relative', width: '100%', height: '100%'}`
|
||||
|
||||
Map container CSS.
|
||||
|
||||
#### `cursor`: string
|
||||
#### `cursor`: string {#cursor}
|
||||
|
||||
Default: `'auto'`
|
||||
|
||||
@ -74,40 +74,40 @@ The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/curso
|
||||
|
||||
### Styling options
|
||||
|
||||
#### `fog`: [Fog](/docs/api-reference/types.md#fog)
|
||||
#### `fog`: [Fog](./types.md#fog) {#fog}
|
||||
|
||||
The fog property of the style. Must conform to the [Fog Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/).
|
||||
If `undefined` is provided, removes the fog from the map.
|
||||
|
||||
#### `light`: [Light](/docs/api-reference/types.md#light)
|
||||
#### `light`: [Light](./types.md#light) {#light}
|
||||
|
||||
Light properties of the style. Must conform to the [Light Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#light).
|
||||
|
||||
#### `mapStyle`: [MapboxStyle](/docs/api-reference/types.md#mapboxstyle) | string | Immutable
|
||||
#### `mapStyle`: [MapboxStyle](./types.md#mapboxstyle) | string | Immutable {#mapstyle}
|
||||
|
||||
Default: (empty style)
|
||||
|
||||
The map's Mapbox style. This must be an a JSON object conforming to the schema described in the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON.
|
||||
|
||||
#### `projection`: string | [ProjectionSpecification](/docs/api-reference/types.md#projectionspecification)
|
||||
#### `projection`: string | [ProjectionSpecification](./types.md#projectionspecification) {#projection}
|
||||
|
||||
Default: `'mercator'`
|
||||
|
||||
The projection the map should be rendered in. Available projections are Albers (`'albers'`), Equal Earth (`'equalEarth'`), Equirectangular/Plate Carrée/WGS84 (`'equirectangular'`), Lambert (`'lambertConformalConic'`), Mercator (`'mercator'`), Natural Earth (`'naturalEarth'`), and Winkel Tripel (`'winkelTripel'`). Conic projections such as Albers and Lambert have configurable `center` and `parallels` properties that allow developers to define the region in which the projection has minimal distortion; see [example](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection).
|
||||
|
||||
#### `renderWorldCopies`: boolean
|
||||
#### `renderWorldCopies`: boolean {#renderworldcopies}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, multiple copies of the world will be rendered, when zoomed out.
|
||||
|
||||
#### `styleDiffing`: boolean
|
||||
#### `styleDiffing`: boolean {#stylediffing}
|
||||
|
||||
Default: `true`
|
||||
|
||||
Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
|
||||
|
||||
#### `terrain`: [TerrainSpecification](/docs/api-reference/types.md#terrainspecification)
|
||||
#### `terrain`: [TerrainSpecification](./types.md#terrainspecification) {#terrain}
|
||||
|
||||
Terrain property of the style. Must conform to the [Terrain Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/).
|
||||
If `undefined` is provided, removes terrain from the map.
|
||||
@ -115,69 +115,69 @@ If `undefined` is provided, removes terrain from the map.
|
||||
|
||||
### Camera options
|
||||
|
||||
#### `initialViewState`: object
|
||||
#### `initialViewState`: object {#initialviewstate}
|
||||
|
||||
The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` etc. in props are ignored when constructing the map. Only specify `initialViewState` if `Map` is being used as an **uncontrolled component**. See [state management](/docs/get-started/state-management.md) for examples.
|
||||
The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` etc. in props are ignored when constructing the map. Only specify `initialViewState` if `Map` is being used as an **uncontrolled component**. See [state management](../get-started/state-management.md) for examples.
|
||||
|
||||
- `bounds?`: [LngLatBoundsLike](/docs/api-reference/types.md#lnglatboundslike) - The initial bounds of the map. If specified, it overrides the `longitude`, `latitude` and `zoom` options. Default `null`.
|
||||
- `fitBoundsOptions`: [FitBoundsOptions](/docs/api-reference/types.md#fitboundsoptions) - A `fitBounds` options object to use only when setting the `bounds` option. Default `null`.
|
||||
- `bounds?`: [LngLatBoundsLike](./types.md#lnglatboundslike) - The initial bounds of the map. If specified, it overrides the `longitude`, `latitude` and `zoom` options. Default `null`.
|
||||
- `fitBoundsOptions`: [FitBoundsOptions](./types.md#fitboundsoptions) - A `fitBounds` options object to use only when setting the `bounds` option. Default `null`.
|
||||
- `longitude`: number - The initial longitude of the map center. Default `0`.
|
||||
- `latitude`: number - The initial latitude of the map center. Default `0`.
|
||||
- `zoom`: number - The initial zoom level. Default `0`.
|
||||
- `pitch`: number - The initial pitch (tilt) of the map. Default `0`.
|
||||
- `bearing`: number - The initial bearing (rotation) of the map. Default `0`.
|
||||
|
||||
#### `longitude`: number
|
||||
#### `longitude`: number {#longitude}
|
||||
|
||||
The longitude of the map center.
|
||||
|
||||
#### `latitude`: number
|
||||
#### `latitude`: number {#latitude}
|
||||
|
||||
The latitude of the map center.
|
||||
|
||||
#### `zoom`: number
|
||||
#### `zoom`: number {#zoom}
|
||||
|
||||
The [zoom level](https://docs.mapbox.com/help/glossary/camera/#zoom-level) of the map.
|
||||
|
||||
#### `pitch`: number
|
||||
#### `pitch`: number {#pitch}
|
||||
|
||||
The initial [pitch](https://docs.mapbox.com/help/glossary/camera/#pitch) (tilt) of the map, measured in degrees away from the plane of the screen (0-85).
|
||||
|
||||
#### `bearing`: number
|
||||
#### `bearing`: number {#bearing}
|
||||
|
||||
The initial [bearing](https://docs.mapbox.com/help/glossary/camera/#bearing) (rotation) of the map, measured in degrees counter-clockwise from north.
|
||||
|
||||
#### `padding`: [PaddingOptions](/docs/api-reference/types.md#paddingoptions)
|
||||
#### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding}
|
||||
|
||||
Default: `null`
|
||||
|
||||
The padding in pixels around the viewport.
|
||||
|
||||
#### `minZoom`: number
|
||||
#### `minZoom`: number {#minzoom}
|
||||
|
||||
Default: `0`
|
||||
|
||||
The minimum zoom level of the map (0-24).
|
||||
|
||||
#### `maxZoom`: number
|
||||
#### `maxZoom`: number {#maxzoom}
|
||||
|
||||
Default: `22`
|
||||
|
||||
The maximum zoom level of the map (0-24).
|
||||
|
||||
#### `minPitch`: number
|
||||
#### `minPitch`: number {#minpitch}
|
||||
|
||||
Default: `0`
|
||||
|
||||
The minimum pitch of the map (0-85).
|
||||
|
||||
#### `maxPitch`: number
|
||||
#### `maxPitch`: number {#maxpitch}
|
||||
|
||||
Default: `60`
|
||||
|
||||
The maximum pitch of the map (0-85).
|
||||
|
||||
#### `maxBounds`: [LngLatBoundsLike](/docs/api-reference/types.md#lnglatboundslike)
|
||||
#### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds}
|
||||
|
||||
Default: `null`
|
||||
|
||||
@ -185,55 +185,55 @@ If set, the map is constrained to the given bounds.
|
||||
|
||||
### Input handler options
|
||||
|
||||
#### `boxZoom`: boolean
|
||||
#### `boxZoom`: boolean {#boxzoom}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "box zoom" interaction is enabled (see [BoxZoomHandler](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler)).
|
||||
|
||||
#### `doubleClickZoom`: boolean
|
||||
#### `doubleClickZoom`: boolean {#doubleclickzoom}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "double click to zoom" interaction is enabled (see [DoubleClickZoomHandler](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler)).
|
||||
|
||||
#### `dragRotate`: boolean
|
||||
#### `dragRotate`: boolean {#dragrotate}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "drag to rotate" interaction is enabled (see [DragRotateHandler](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler)).
|
||||
|
||||
#### `dragPan`: boolean | [DragPanOptions](/docs/api-reference/types.md#dragpanoptions)
|
||||
#### `dragPan`: boolean | [DragPanOptions](./types.md#dragpanoptions) {#dragpan}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "drag to pan" interaction is enabled. Optionally accpt an object value that is the options to [DragPanHandler#enable](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler).
|
||||
|
||||
#### `keyboard`: boolean
|
||||
#### `keyboard`: boolean {#keyboard}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, keyboard shortcuts are enabled (see [KeyboardHandler](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler)).
|
||||
|
||||
#### `scrollZoom`: boolean | [ZoomRotateOptions](/docs/api-reference/types.md#zoomrotateoptions)
|
||||
#### `scrollZoom`: boolean | [ZoomRotateOptions](./types.md#zoomrotateoptions) {#scrollzoom}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "scroll to zoom" interaction is enabled. Optionally accpt an object value that is the options to [ScrollZoomHandler#enable](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler).
|
||||
|
||||
#### `touchPitch`: boolean
|
||||
#### `touchPitch`: boolean {#touchpitch}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "drag to pitch" interaction is enabled. Optionally accpt an object value that is the options to [TouchPitchHandler#enable](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler).
|
||||
|
||||
#### `touchZoomRotate`: boolean | [ZoomRotateOptions](/docs/api-reference/types.md#zoomrotateoptions)
|
||||
#### `touchZoomRotate`: boolean | [ZoomRotateOptions](./types.md#zoomrotateoptions) {#touchzoomrotate}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the "pinch to rotate and zoom" interaction is enabled. Optionally accpt an object value that is the options to [TouchZoomRotateHandler#enable](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler).
|
||||
|
||||
#### `interactiveLayerIds`: string[]
|
||||
#### `interactiveLayerIds`: string[] {#interactivelayerids}
|
||||
|
||||
Default: `null`
|
||||
|
||||
@ -247,19 +247,19 @@ See the [Callbacks](#callbacks) section for affected events.
|
||||
|
||||
### Callbacks
|
||||
|
||||
#### `onResize`: (event: [MapboxEvent](/docs/api-reference/types.md#mapboxevent)) => void
|
||||
#### `onResize`: (event: [MapboxEvent](./types.md#mapboxevent)) => void {#onresize}
|
||||
|
||||
Called when the map has been resized.
|
||||
|
||||
#### `onLoad`: (event: [MapboxEvent](/docs/api-reference/types.md#mapboxevent)) => void
|
||||
#### `onLoad`: (event: [MapboxEvent](./types.md#mapboxevent)) => void {#onload}
|
||||
|
||||
Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.
|
||||
|
||||
#### `onRender`: (event: [MapboxEvent](/docs/api-reference/types.md#mapboxevent)) => void
|
||||
#### `onRender`: (event: [MapboxEvent](./types.md#mapboxevent)) => void {#onrender}
|
||||
|
||||
Called whenever the map is drawn to the screen.
|
||||
|
||||
#### `onIdle`: (event: [MapboxEvent](/docs/api-reference/types.md#mapboxevent)) => void
|
||||
#### `onIdle`: (event: [MapboxEvent](./types.md#mapboxevent)) => void {#onidle}
|
||||
|
||||
Called after the last frame rendered before the map enters an "idle" state:
|
||||
|
||||
@ -267,186 +267,186 @@ Called after the last frame rendered before the map enters an "idle" state:
|
||||
- All currently requested tiles have loaded
|
||||
- All fade/transition animations have completed
|
||||
|
||||
#### `onRemove`: (event: [MapboxEvent](/docs/api-reference/types.md#mapboxevent)) => void
|
||||
#### `onRemove`: (event: [MapboxEvent](./types.md#mapboxevent)) => void {#onremove}
|
||||
|
||||
Called when the map has been removed.
|
||||
|
||||
#### `onError`: (event: [ErrorEvent](/docs/api-reference/types.md#errorevent)) => void
|
||||
#### `onError`: (event: [ErrorEvent](./types.md#errorevent)) => void {#onerror}
|
||||
|
||||
Default: `evt => console.error(evt.error)`
|
||||
|
||||
Called when an error occurs.
|
||||
|
||||
#### `onMouseDown`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseDown`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousedown}
|
||||
|
||||
Called when a pointing device (usually a mouse) is pressed within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onMouseUp`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseUp`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseup}
|
||||
|
||||
Called when a pointing device (usually a mouse) is released within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onMouseOver`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseOver`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseover}
|
||||
|
||||
Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.
|
||||
|
||||
#### `onMouseEnter`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseEnter`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseenter}
|
||||
|
||||
Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by `interactiveLayerIds` from outside that layer or outside the map canvas.
|
||||
|
||||
#### `onMouseMove`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseMove`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousemove}
|
||||
|
||||
Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onMouseLeave`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseLeave`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseleave}
|
||||
|
||||
Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by `interactiveLayerIds` or moves from the layer to outside the map canvas.
|
||||
|
||||
#### `onMouseOut`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onMouseOut`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseout}
|
||||
|
||||
Called when a point device (usually a mouse) leaves the map's canvas.
|
||||
|
||||
#### `onClick`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onclick}
|
||||
|
||||
Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onDblClick`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onDblClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#ondblclick}
|
||||
|
||||
Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onContextMenu`: (event: [MapLayerMouseEvent](/docs/api-reference/types.md#maplayermouseevent)) => void
|
||||
#### `onContextMenu`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#oncontextmenu}
|
||||
|
||||
Called when the right button of the mouse is clicked or the context menu key is pressed within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onWheel`: (event: [MapWheelEvent](/docs/api-reference/types.md#mapwheelevent)) => void
|
||||
#### `onWheel`: (event: [MapWheelEvent](./types.md#mapwheelevent)) => void {#onwheel}
|
||||
|
||||
Called when a wheel event occurs within the map.
|
||||
|
||||
#### `onTouchStart`: (event: [MapLayerTouchEvent](/docs/api-reference/types.md#maplayertouchevent)) => void
|
||||
#### `onTouchStart`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchstart}
|
||||
|
||||
Called when a `touchstart` event occurs within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onTouchEnd`: (event: [MapLayerTouchEvent](/docs/api-reference/types.md#maplayertouchevent)) => void
|
||||
#### `onTouchEnd`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchend}
|
||||
|
||||
Called when a `touchend` event occurs within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onTouchMove`: (event: [MapLayerTouchEvent](/docs/api-reference/types.md#maplayertouchevent)) => void
|
||||
#### `onTouchMove`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchmove}
|
||||
|
||||
Called when a `touchmove` event occurs within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onTouchCancel`: (event: [MapLayerTouchEvent](/docs/api-reference/types.md#maplayertouchevent)) => void
|
||||
#### `onTouchCancel`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchcancel}
|
||||
|
||||
Called when a `touchcancel` event occurs within the map.
|
||||
|
||||
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
|
||||
|
||||
#### `onMoveStart`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onMoveStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmovestart}
|
||||
|
||||
Called just before the map begins a transition from one view to another.
|
||||
|
||||
#### `onMove`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onMove`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmove}
|
||||
|
||||
Called repeatedly during an animated transition from one view to another.
|
||||
|
||||
When `Map` is used as a controlled component, `event.viewState` reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the view state props (`longitude`, `latitude`, `zoom` etc.).
|
||||
See [state management](/docs/get-started/state-management.md) for examples.
|
||||
See [state management](../get-started/state-management.md) for examples.
|
||||
|
||||
#### `onMoveEnd`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onMoveEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmoveend}
|
||||
|
||||
Called just after the map completes a transition from one view to another.
|
||||
|
||||
#### `onDragStart`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart}
|
||||
|
||||
Called when a "drag to pan" interaction starts.
|
||||
|
||||
#### `onDrag`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag}
|
||||
|
||||
Called repeatedly during a "drag to pan" interaction.
|
||||
|
||||
#### `onDragEnd`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend}
|
||||
|
||||
Called when a "drag to pan" interaction ends.
|
||||
|
||||
#### `onZoomStart`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onZoomStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomstart}
|
||||
|
||||
Called just before the map begins a transition from one zoom level to another.
|
||||
|
||||
#### `onZoom`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onZoom`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoom}
|
||||
|
||||
Called repeatedly during an animated transition from one zoom level to another.
|
||||
|
||||
When `Map` is used as a controlled component, `event.viewState.zoom` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `zoom` prop.
|
||||
|
||||
#### `onZoomEnd`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onZoomEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomend}
|
||||
|
||||
Called just after the map completes a transition from one zoom level to another.
|
||||
|
||||
#### `onRotateStart`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onRotateStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotatestart}
|
||||
|
||||
Called just before the map begins a transition from one bearing (rotation) to another.
|
||||
|
||||
#### `onRotate`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onRotate`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotate}
|
||||
|
||||
Called repeatedly during an animated transition from one bearing (rotation) to another.
|
||||
|
||||
When `Map` is used as a controlled component, `event.viewState.bearing` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `bearing` prop.
|
||||
|
||||
#### `onRotateEnd`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onRotateEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotateend}
|
||||
|
||||
Called just after the map completes a transition from one bearing (rotation) to another.
|
||||
|
||||
#### `onPitchStart`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onPitchStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchstart}
|
||||
|
||||
Called just before the map begins a transition from one pitch (tilt) to another.
|
||||
|
||||
#### `onPitch`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onPitch`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitch}
|
||||
|
||||
Called repeatedly during an animated transition from one pitch (tilt) to another.
|
||||
|
||||
When `Map` is used as a controlled component, `event.viewState.pitch` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `pitch` prop.
|
||||
|
||||
#### `onPitchEnd`: (event: [ViewStateChangeEvent](/docs/api-reference/types.md#viewstatechangeevent)) => void
|
||||
#### `onPitchEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchend}
|
||||
|
||||
Called just after the map completes a transition from one pitch (tilt) to another.
|
||||
|
||||
#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](/docs/api-reference/types.md#mapboxzoomevent)) => void
|
||||
#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomstart}
|
||||
|
||||
Called when a "box zoom" interaction starts.
|
||||
|
||||
#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](/docs/api-reference/types.md#mapboxzoomevent)) => void
|
||||
#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend}
|
||||
|
||||
Called when a "box zoom" interaction ends.
|
||||
|
||||
#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](/docs/api-reference/types.md#mapboxzoomevent)) => void
|
||||
#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomcancel}
|
||||
|
||||
Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.
|
||||
|
||||
#### `onData`: (event: [MapStyleDataEvent](/docs/api-reference/types.md#mapstyledataevent) | [MapSourceDataEvent](/docs/api-reference/types.md#mapsourcedataevent)) => void
|
||||
#### `onData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent) | [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#ondata}
|
||||
|
||||
Called when any map data loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
|
||||
|
||||
#### `onStyleData`: (event: [MapStyleDataEvent](/docs/api-reference/types.md#mapstyledataevent)) => void
|
||||
#### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata}
|
||||
|
||||
Called when the map's style loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
|
||||
|
||||
#### `onSourceData`: (event: [MapSourceDataEvent](/docs/api-reference/types.md#mapsourcedataevent)) => void
|
||||
#### `onSourceData`: (event: [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#onsourcedata}
|
||||
|
||||
Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
|
||||
|
||||
@ -454,7 +454,7 @@ Called when one of the map's sources loads or changes, including if a tile belon
|
||||
|
||||
Props in this section are not reactive. They are only used once when the Map instance is constructed.
|
||||
|
||||
#### `mapLib`: any
|
||||
#### `mapLib`: any {#maplib}
|
||||
|
||||
Specify the underlying base map library for the Map component. The value can be provided with several options:
|
||||
|
||||
@ -497,77 +497,77 @@ function App() {
|
||||
```
|
||||
|
||||
|
||||
#### `mapboxAccessToken`: string
|
||||
#### `mapboxAccessToken`: string {#mapboxaccesstoken}
|
||||
|
||||
Token used to access the Mapbox data service. See [about map tokens](/docs/get-started/mapbox-tokens.md).
|
||||
Token used to access the Mapbox data service. See [about map tokens](../get-started/mapbox-tokens.md).
|
||||
|
||||
#### `antialias`: boolean
|
||||
#### `antialias`: boolean {#antialias}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true` , the gl context will be created with [MSAA antialiasing](https://en.wikipedia.org/wiki/Multisample_anti-aliasing), which can be useful for antialiasing custom layers.
|
||||
This is `false` by default as a performance optimization.
|
||||
|
||||
#### `attributionControl`: boolean
|
||||
#### `attributionControl`: boolean {#attributioncontrol}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, an attribution control will be added to the map.
|
||||
|
||||
#### `baseApiUrl`: string
|
||||
#### `baseApiUrl`: string {#baseapiurl}
|
||||
|
||||
The map's default API URL for requesting tiles, styles, sprites, and glyphs.
|
||||
|
||||
#### `bearingSnap`: number
|
||||
#### `bearingSnap`: number {#bearingsnap}
|
||||
|
||||
Default: `7`
|
||||
|
||||
Snap to north threshold in degrees.
|
||||
|
||||
#### `clickTolerance`: number
|
||||
#### `clickTolerance`: number {#clicktolerance}
|
||||
|
||||
Default: `3`
|
||||
|
||||
The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).
|
||||
|
||||
#### `collectResourceTiming`: boolean
|
||||
#### `collectResourceTiming`: boolean {#collectresourcetiming}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true`, Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a `resourceTiming` property of relevant `data` events.
|
||||
|
||||
#### `cooperativeGestures`: boolean
|
||||
#### `cooperativeGestures`: boolean {#cooperativegestures}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true` , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.
|
||||
|
||||
#### `crossSourceCollisions`: boolean
|
||||
#### `crossSourceCollisions`: boolean {#crosssourcecollisions}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, symbols from multiple sources can collide with each other during collision detection. If `false`, collision detection is run separately for the symbols in each source.
|
||||
|
||||
#### `customAttribution`: string | string[]
|
||||
#### `customAttribution`: string | string[] {#customattribution}
|
||||
|
||||
Default: `null`
|
||||
|
||||
String or strings to show in an AttributionControl.
|
||||
Only applicable if `attributionControl` is `true`.
|
||||
|
||||
#### `fadeDuration`: number
|
||||
#### `fadeDuration`: number {#fadeduration}
|
||||
|
||||
Default: `300`
|
||||
|
||||
Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
|
||||
|
||||
#### `failIfMajorPerformanceCaveat`: boolean
|
||||
#### `failIfMajorPerformanceCaveat`: boolean {#failifmajorperformancecaveat}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.
|
||||
|
||||
#### `hash`: boolean | string
|
||||
#### `hash`: boolean | string {#hash}
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -577,13 +577,13 @@ For example, `http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60`.
|
||||
An additional string may optionally be provided to indicate a parameter-styled hash,
|
||||
e.g. `http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar`, where `foo` is a custom parameter and bar is an arbitrary hash distinct from the map hash.
|
||||
|
||||
#### `interactive`: boolean
|
||||
#### `interactive`: boolean {#interactive}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `false`, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input.
|
||||
|
||||
#### `locale`: Record\<string, string\>
|
||||
#### `locale`: Record\<string, string\> {#locale}
|
||||
|
||||
Default: `null`
|
||||
|
||||
@ -591,62 +591,62 @@ A patch to apply to the default localization table for UI strings, e.g. control
|
||||
The `locale` object maps namespaced UI string IDs to translated strings in the target language; see `src/ui/default_locale.js` for an example with all supported string IDs.
|
||||
The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).
|
||||
|
||||
#### `localFontFamily`: string
|
||||
#### `localFontFamily`: string {#localfontfamily}
|
||||
|
||||
Default: `null`
|
||||
|
||||
Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily.
|
||||
|
||||
#### `localIdeographFontFamily`: string
|
||||
#### `localIdeographFontFamily`: string {#localideographfontfamily}
|
||||
|
||||
Default: `'sans-serif'`
|
||||
|
||||
Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See [example](https://www.mapbox.com/mapbox-gl-js/example/local-ideographs).
|
||||
|
||||
#### `logoPosition`: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
||||
#### `logoPosition`: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {#logoposition}
|
||||
|
||||
Default: `'bottom-left'`
|
||||
|
||||
A string representing the position of the Mapbox wordmark on the map.
|
||||
|
||||
#### `maxParallelImageRequests`: number
|
||||
#### `maxParallelImageRequests`: number {#maxparallelimagerequests}
|
||||
|
||||
Default: `16`
|
||||
|
||||
The maximum number of images (raster tiles, sprites, icons) to load in parallel.
|
||||
|
||||
#### `maxTileCacheSize`: number
|
||||
#### `maxTileCacheSize`: number {#maxtilecachesize}
|
||||
|
||||
Default: `null`
|
||||
|
||||
The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
|
||||
|
||||
#### `optimizeForTerrain`: boolean
|
||||
#### `optimizeForTerrain`: boolean {#optimizeforterrain}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If true, map will prioritize rendering for performance by reordering layers.
|
||||
If false, layers will always be drawn in the specified order.
|
||||
|
||||
#### `pitchWithRotate`: boolean
|
||||
#### `pitchWithRotate`: boolean {#pitchwithrotate}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
|
||||
|
||||
#### `preserveDrawingBuffer`: boolean
|
||||
#### `preserveDrawingBuffer`: boolean {#preservedrawingbuffer}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true`, The maps canvas can be exported to a PNG using `map.getCanvas().toDataURL()`;. This is `false` by default as a performance optimization.
|
||||
|
||||
#### `refreshExpiredTiles`: boolean
|
||||
#### `refreshExpiredTiles`: boolean {#refreshexpiredtiles}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `false`, the map won't attempt to re-request tiles once they expire per their HTTP `cacheControl`/`expires` headers.
|
||||
|
||||
#### `reuseMaps`: boolean
|
||||
#### `reuseMaps`: boolean {#reusemaps}
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -656,7 +656,7 @@ If `reuseMaps` is set to `true`, when a map component is unmounted, the underlyi
|
||||
|
||||
Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and `initialViewState` of the new component are respected.
|
||||
|
||||
#### `RTLTextPlugin`: string
|
||||
#### `RTLTextPlugin`: string {#rtltextplugin}
|
||||
|
||||
Default: `'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'`
|
||||
|
||||
@ -664,38 +664,38 @@ Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#ma
|
||||
|
||||
Setting this prop is the equivelant of calling [mapboxgl.setRTLTextPlugin](https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin) with `lazy: true`.
|
||||
|
||||
#### `testMode`: boolean
|
||||
#### `testMode`: boolean {#testmode}
|
||||
|
||||
Default: `false`
|
||||
|
||||
Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests.
|
||||
|
||||
#### `trackResize`: boolean
|
||||
#### `trackResize`: boolean {#trackresize}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the map will automatically resize when the browser window resizes.
|
||||
|
||||
#### `transformRequest`: [TransformRequestFunction](/docs/api-reference/types.md#transformrequestfunction)
|
||||
#### `transformRequest`: [TransformRequestFunction](./types.md#transformrequestfunction) {#transformrequest}
|
||||
|
||||
Default: `null`
|
||||
|
||||
A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
|
||||
|
||||
#### `workerClass`: object
|
||||
#### `workerClass`: object {#workerclass}
|
||||
|
||||
Default: `null`
|
||||
|
||||
Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
|
||||
Takes precedence over `workerUrl`.
|
||||
|
||||
#### `workerCount`: number
|
||||
#### `workerCount`: number {#workercount}
|
||||
|
||||
Default: `2`
|
||||
|
||||
The number of web workers instantiated on a page with mapbox-gl maps.
|
||||
|
||||
#### `workerUrl`: string
|
||||
#### `workerUrl`: string {#workerurl}
|
||||
|
||||
Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
|
||||
|
||||
|
||||
@ -29,45 +29,45 @@ If `Marker` is mounted with child components, then its content will be rendered
|
||||
|
||||
### Render options
|
||||
|
||||
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
||||
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {#anchor}
|
||||
|
||||
Default: `'center'`
|
||||
|
||||
A string indicating the part of the Marker that should be positioned closest to the coordinate set via `longitude` and `latitude`.
|
||||
|
||||
#### `color`: string
|
||||
#### `color`: string {#color}
|
||||
|
||||
Default: `'#3FB1CE'`
|
||||
|
||||
The color to use for the default marker if the component contains no content.
|
||||
|
||||
#### `clickTolerance`: number
|
||||
#### `clickTolerance`: number {#clicktolerance}
|
||||
|
||||
Default: `null` (inherits [Map](/docs/api-reference/map.md)'s `clickTolerance`)
|
||||
Default: `null` (inherits [Map](./map.md)'s `clickTolerance`)
|
||||
|
||||
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag).
|
||||
|
||||
#### `draggable`: boolean
|
||||
#### `draggable`: boolean {#draggable}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true`, the marker is able to be dragged to a new position on the map.
|
||||
|
||||
#### `latitude`: number
|
||||
#### `latitude`: number {#latitude}
|
||||
|
||||
Required. The latitude of the anchor location.
|
||||
|
||||
#### `longitude`: number
|
||||
#### `longitude`: number {#longitude}
|
||||
|
||||
Required. The longitude of the anchor location.
|
||||
|
||||
#### `offset`: [PointLike](/docs/api-reference/types.md#pointlike)
|
||||
#### `offset`: [PointLike](./types.md#pointlike) {#offset}
|
||||
|
||||
Default: `null`
|
||||
|
||||
The offset in pixels as a [PointLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike) object to apply relative to the element's center. Negatives indicate left and up.
|
||||
|
||||
#### `pitchAlignment`: 'map' | 'viewport' | 'auto'
|
||||
#### `pitchAlignment`: 'map' | 'viewport' | 'auto' {#pitchalignment}
|
||||
|
||||
Default: `'auto'`
|
||||
|
||||
@ -75,13 +75,13 @@ Default: `'auto'`
|
||||
- `viewport` aligns the `Marker` to the plane of the viewport.
|
||||
- `auto` automatically matches the value of `rotationAlignment`.
|
||||
|
||||
#### `rotation`: number
|
||||
#### `rotation`: number {#rotation}
|
||||
|
||||
Default: `0`
|
||||
|
||||
The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
|
||||
|
||||
#### `rotationAlignment`: 'map' | 'viewport' | 'auto'
|
||||
#### `rotationAlignment`: 'map' | 'viewport' | 'auto' {#rotationalignment}
|
||||
|
||||
Default: `'auto'`
|
||||
|
||||
@ -89,7 +89,7 @@ Default: `'auto'`
|
||||
- `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
|
||||
- `auto` is equivalent to `viewport`.
|
||||
|
||||
#### `scale`: number
|
||||
#### `scale`: number {#scale}
|
||||
|
||||
Default: `1`
|
||||
|
||||
@ -98,25 +98,25 @@ The default scale (`1`) corresponds to a height of `41px` and a width of `27px`.
|
||||
|
||||
This prop is not reactive (only used when the marker is mounted).
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the marker's container.
|
||||
|
||||
### Callbacks
|
||||
|
||||
#### `onClick`: (evt: [MapEvent](/docs/api-reference/types.md#mapevent)) => void
|
||||
#### `onClick`: (evt: [MapEvent](./types.md#mapevent)) => void {#onclick}
|
||||
|
||||
Called when the marker is clicked on.
|
||||
|
||||
#### `onDragStart`: (evt: [MarkerDragEvent](/docs/api-reference/types.md#markerdragevent)) => void
|
||||
#### `onDragStart`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragstart}
|
||||
|
||||
Called when dragging starts, if `draggable` is `true`.
|
||||
|
||||
#### `onDrag`: (evt: [MarkerDragEvent](/docs/api-reference/types.md#markerdragevent)) => void
|
||||
#### `onDrag`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondrag}
|
||||
|
||||
Called while dragging, if `draggable` is `true`.
|
||||
|
||||
#### `onDragEnd`: (evt: [MarkerDragEvent](/docs/api-reference/types.md#markerdragevent)) => void
|
||||
#### `onDragEnd`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragend}
|
||||
|
||||
Called when dragging ends, if `draggable` is `true`.
|
||||
|
||||
|
||||
@ -25,29 +25,29 @@ function App() {
|
||||
|
||||
Note that the following properties are not reactive. They are only used when the component first mounts.
|
||||
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
|
||||
|
||||
Default: `'top-right'`
|
||||
|
||||
Placement of the control relative to the map.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the control's container.
|
||||
|
||||
#### `showCompass`: boolean
|
||||
#### `showCompass`: boolean {#showcompass}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true` the compass button is included.
|
||||
|
||||
#### `showZoom`: boolean
|
||||
#### `showZoom`: boolean {#showzoom}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If true the zoom-in and zoom-out buttons are included.
|
||||
|
||||
#### `visualizePitch`: boolean
|
||||
#### `visualizePitch`: boolean {#visualizepitch}
|
||||
|
||||
Default: `false`
|
||||
|
||||
|
||||
@ -33,40 +33,40 @@ function App() {
|
||||
|
||||
### Render options
|
||||
|
||||
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined
|
||||
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined {#anchor}
|
||||
|
||||
A string indicating the part of the popup that should be positioned closest to the coordinate, set via `longitude` and `latitude`.
|
||||
If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for `'bottom'`.
|
||||
|
||||
#### `className`: string
|
||||
#### `className`: string {#classname}
|
||||
|
||||
Space-separated CSS class names to add to popup container.
|
||||
|
||||
#### `closeButton`: boolean
|
||||
#### `closeButton`: boolean {#closebutton}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, a close button will appear in the top right corner of the popup.
|
||||
|
||||
#### `closeOnClick`: boolean
|
||||
#### `closeOnClick`: boolean {#closeonclick}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the popup will close when the map is clicked.
|
||||
|
||||
#### `closeOnMove`: boolean
|
||||
#### `closeOnMove`: boolean {#closeonmove}
|
||||
|
||||
Default: `false`
|
||||
|
||||
If `true`, the popup will closed when the map moves.
|
||||
|
||||
#### `focusAfterOpen`: boolean
|
||||
#### `focusAfterOpen`: boolean {#focusafteropen}
|
||||
|
||||
Default: `true`
|
||||
|
||||
If `true`, the popup will try to focus the first focusable element inside the popup.
|
||||
|
||||
#### `offset`: number | [PointLike](/docs/api-reference/types.md#pointlike) | Record\<string, [PointLike](/docs/api-reference/types.md#pointlike)\>
|
||||
#### `offset`: number | [PointLike](./types.md#pointlike) | Record\<string, [PointLike](./types.md#pointlike)\> {#offset}
|
||||
|
||||
Default: `null`
|
||||
|
||||
@ -78,23 +78,23 @@ A pixel offset applied to the popup's location specified as:
|
||||
|
||||
Negative offsets indicate left and up.
|
||||
|
||||
#### `maxWidth`: string
|
||||
#### `maxWidth`: string {#maxwidth}
|
||||
|
||||
Default: `240px`
|
||||
|
||||
A string that sets the CSS property of the popup's maximum width.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the popup's container.
|
||||
|
||||
### Callbacks
|
||||
|
||||
#### `onOpen`: (evt: [PopupEvent](/docs/api-reference/types.md#popupevent)) => void
|
||||
#### `onOpen`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onopen}
|
||||
|
||||
Called when the popup is opened.
|
||||
|
||||
#### `onClose`: (evt: [PopupEvent](/docs/api-reference/types.md#popupevent)) => void
|
||||
#### `onClose`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onclose}
|
||||
|
||||
Called when the popup is closed by the user clicking on the close button or outside (if `closeOnClick: true`).
|
||||
|
||||
|
||||
@ -23,23 +23,23 @@ function App() {
|
||||
|
||||
## Properties
|
||||
|
||||
#### `maxWidth`: string
|
||||
#### `maxWidth`: string {#maxwidth}
|
||||
|
||||
Default: `100`
|
||||
|
||||
The maximum length of the scale control in pixels.
|
||||
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
|
||||
|
||||
Default: `'bottom-left'`
|
||||
|
||||
Placement of the control relative to the map. Note that this prop is only used when the component first mounts.
|
||||
|
||||
#### `style`: CSSProperties
|
||||
#### `style`: CSSProperties {#style}
|
||||
|
||||
CSS style override that applies to the control's container.
|
||||
|
||||
#### `unit`: 'imperial' | 'metric' | 'nautical'
|
||||
#### `unit`: 'imperial' | 'metric' | 'nautical' {#unit}
|
||||
|
||||
Default: `'metric'`
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Source
|
||||
|
||||
This component allows apps to create a [map source](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) using React. It may contain [Layer](/docs/api-reference/layer.md) components as children.
|
||||
This component allows apps to create a [map source](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) using React. It may contain [Layer](./layer.md) components as children.
|
||||
|
||||
```js
|
||||
import * as React from 'react';
|
||||
@ -47,11 +47,11 @@ When props change _shallowly_, the component will attempt to update the source.
|
||||
|
||||
Once a `<Source>` is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
|
||||
|
||||
#### `id`: string
|
||||
#### `id`: string {#id}
|
||||
|
||||
Unique identifier of the source. If not provided, a default id will be assigned.
|
||||
|
||||
#### `type`: string
|
||||
#### `type`: string {#type}
|
||||
|
||||
Required. Type of the source.
|
||||
|
||||
|
||||
@ -18,11 +18,11 @@ A [custom layer implementation](https://docs.mapbox.com/mapbox-gl-js/api/#custom
|
||||
|
||||
#### MapRef
|
||||
|
||||
Instance [ref]((https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)) of a `Map` component. See [Map documentation](/docs/api-reference/map.md#methods) for details.
|
||||
Instance [ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) of a `Map` component. See [Map documentation](./map.md#methods) for details.
|
||||
|
||||
#### GeolocateControlRef
|
||||
|
||||
Instance [ref]((https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)) of a `GeolocateControl` component. See [GeolocateControl documentation](/docs/api-reference/geolocate-control.md#methods) for details.
|
||||
Instance [ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) of a `GeolocateControl` component. See [GeolocateControl documentation](./geolocate-control.md#methods) for details.
|
||||
|
||||
|
||||
## Styling
|
||||
|
||||
@ -72,7 +72,7 @@ The hook creates an [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/
|
||||
|
||||
Parameters:
|
||||
|
||||
- `onCreate`: ({map: MapRef, mapLib: mapboxgl}) => [IControl](/docs/api-reference/types.md#icontrol) - called to create an instance of the control.
|
||||
- `onCreate`: ({map: MapRef, mapLib: mapboxgl}) => [IControl](./types.md#icontrol) - called to create an instance of the control.
|
||||
- `onAdd`: ({map: MapRef, mapLib: mapboxgl}) => void - called when the control has been added to the map.
|
||||
- `onRemove`: ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed from the map.
|
||||
- `options`: object
|
||||
@ -80,7 +80,7 @@ Parameters:
|
||||
|
||||
Returns:
|
||||
|
||||
[IControl](/docs/api-reference/types.md#icontrol) - the control instance from `onCreate`.
|
||||
[IControl](./types.md#icontrol) - the control instance from `onCreate`.
|
||||
|
||||
|
||||
## Source
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# useMap
|
||||
|
||||
The `useMap` hook allows a custom component to reference the [Map](/docs/api-reference/map.md) that contains it.
|
||||
The `useMap` hook allows a custom component to reference the [Map](./map.md) that contains it.
|
||||
|
||||
When used with the [MapProvider](/docs/api-reference/map-provider.md), this hook can also reference maps that are rendered outside of the current component's direct render tree.
|
||||
When used with the [MapProvider](./map-provider.md), this hook can also reference maps that are rendered outside of the current component's direct render tree.
|
||||
|
||||
```js
|
||||
/// Example using `useMap` inside a Map
|
||||
@ -59,7 +59,7 @@ See a full example [here](https://github.com/visgl/react-map-gl/tree/7.0-release
|
||||
|
||||
`useMap(): {current?: MapRef, [id: string]: MapRef}`
|
||||
|
||||
The hook returns an object that contains all mounted maps under the closest `MapProvider`. The keys are each map's [id](/docs/api-reference/map.md#id) and the values are the [MapRef](/docs/api-reference/types.md#mapref).
|
||||
The hook returns an object that contains all mounted maps under the closest `MapProvider`. The keys are each map's [id](./map.md#id) and the values are the [MapRef](./types.md#mapref).
|
||||
|
||||
If the hook is used inside a decendent of a `Map` component, the returned object also contains a `current` field that references the containing map.
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
## Native Mapbox Layers
|
||||
|
||||
You can inject data and mapbox native layers using the [Source](/docs/api-reference/source.md) and [Layer](/docs/api-reference/layer.md) components:
|
||||
You can inject data and mapbox native layers using the [Source](../api-reference/source.md) and [Layer](../api-reference/layer.md) components:
|
||||
|
||||
```js
|
||||
import * as React from 'react';
|
||||
|
||||
@ -14,14 +14,14 @@ There are several ways to provide a token to your app, as showcased in some of t
|
||||
* Set the `MapboxAccessToken` environment variable (or set `REACT_APP_MAPBOX_ACCESS_TOKEN` if you are using Create React App)
|
||||
* Provide it in the URL, e.g `?access_token=TOKEN`
|
||||
|
||||
We recommend using an environment variable to minimize leaking risks. See [securing Mapbox token](/docs/get-started/tips-and-tricks.md#securing-mapbox-token) for examples.
|
||||
We recommend using an environment variable to minimize leaking risks. See [securing Mapbox token](./tips-and-tricks.md#securing-mapbox-token) for examples.
|
||||
|
||||
## Display Maps Without A Mapbox Token
|
||||
|
||||
It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are:
|
||||
|
||||
- Stay on `mapbox-gl@1.x`. react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox.
|
||||
- Use a community fork of mapbox-gl, for example [maplibre-gl](https://www.npmjs.com/package/maplibre-gl). See [using with a mapbox-gl fork](/docs/get-started/get-started.md#using-with-a-mapbox-gl-fork) for how to configure your project.
|
||||
- Use a community fork of mapbox-gl, for example [maplibre-gl](https://www.npmjs.com/package/maplibre-gl). See [using with a mapbox-gl fork](./get-started.md#using-with-a-mapbox-gl-fork) for how to configure your project.
|
||||
|
||||
To use your own map service, you will need a custom Mapbox GL style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/), and pass it to `Map` using the `mapStyle` prop. This custom style must match the schema of your tile source.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# State Management
|
||||
|
||||
There are two ways to use a [Map](/docs/api-reference/map.md):
|
||||
There are two ways to use a [Map](../api-reference/map.md):
|
||||
|
||||
- [Uncontrolled](https://reactjs.org/docs/uncontrolled-components.html): The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl `Map` class.
|
||||
- [Controlled](https://reactjs.org/docs/forms.html#controlled-components): The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.
|
||||
|
||||
@ -68,7 +68,7 @@ In a moderately complex single-page app, as the user navigates through the UI, a
|
||||
|
||||
Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a [billable event](https://www.mapbox.com/pricing#maploads) every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI.
|
||||
|
||||
In this case, it is recommended that you set the [reuseMaps](/docs/api-reference/map.md#reuseMaps) prop to `true`:
|
||||
In this case, it is recommended that you set the [reuseMaps](../api-reference/map.md#reuseMaps) prop to `true`:
|
||||
|
||||
```jsx
|
||||
<TabPanel value="map">
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
{
|
||||
"id": "table-of-contents",
|
||||
"chapters": [
|
||||
{
|
||||
"title": "Introduction",
|
||||
"entries": [
|
||||
{ "entry": "docs" },
|
||||
{ "entry": "docs/whats-new" },
|
||||
{ "entry": "docs/upgrade-guide" },
|
||||
{ "entry": "docs/contributing" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Developer Guide",
|
||||
"entries": [
|
||||
{ "entry": "docs/get-started/get-started" },
|
||||
{ "entry": "docs/get-started/mapbox-tokens" },
|
||||
{ "entry": "docs/get-started/state-management" },
|
||||
{ "entry": "docs/get-started/adding-custom-data" },
|
||||
{ "entry": "docs/get-started/tips-and-tricks" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "API Reference",
|
||||
"entries": [
|
||||
{ "entry": "docs/api-reference/map" },
|
||||
{ "entry": "docs/api-reference/attribution-control" },
|
||||
{ "entry": "docs/api-reference/fullscreen-control" },
|
||||
{ "entry": "docs/api-reference/geolocate-control" },
|
||||
{ "entry": "docs/api-reference/layer" },
|
||||
{ "entry": "docs/api-reference/map-provider" },
|
||||
{ "entry": "docs/api-reference/marker" },
|
||||
{ "entry": "docs/api-reference/navigation-control" },
|
||||
{ "entry": "docs/api-reference/popup" },
|
||||
{ "entry": "docs/api-reference/scale-control" },
|
||||
{ "entry": "docs/api-reference/source" },
|
||||
{ "entry": "docs/api-reference/use-control" },
|
||||
{ "entry": "docs/api-reference/use-map" },
|
||||
{ "entry": "docs/api-reference/types" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
[
|
||||
{
|
||||
"type": "category",
|
||||
"label": "Overview",
|
||||
"items": [
|
||||
"README",
|
||||
"whats-new",
|
||||
"upgrade-guide",
|
||||
"contributing"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"label": "Developer Guide",
|
||||
"items": [
|
||||
"get-started/get-started",
|
||||
"get-started/mapbox-tokens",
|
||||
"get-started/state-management",
|
||||
"get-started/adding-custom-data",
|
||||
"get-started/tips-and-tricks"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"label": "API Reference",
|
||||
"items": [
|
||||
"api-reference/map",
|
||||
"api-reference/attribution-control",
|
||||
"api-reference/fullscreen-control",
|
||||
"api-reference/geolocate-control",
|
||||
"api-reference/layer",
|
||||
"api-reference/map-provider",
|
||||
"api-reference/marker",
|
||||
"api-reference/navigation-control",
|
||||
"api-reference/popup",
|
||||
"api-reference/scale-control",
|
||||
"api-reference/source",
|
||||
"api-reference/use-control",
|
||||
"api-reference/use-map",
|
||||
"api-reference/types"
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -8,7 +8,7 @@ In v8.0, `react-map-gl` no long require any vender-specific base map library as
|
||||
<Map mapLib={import('mapbox-gl')} ...>
|
||||
```
|
||||
|
||||
For additional options and examples, see [mapLib](/docs/api-reference/map.md#maplib) documentation.
|
||||
For additional options and examples, see [mapLib](./api-reference/map.md#maplib) documentation.
|
||||
|
||||
## Upgrading to v7.0
|
||||
|
||||
@ -26,13 +26,13 @@ v7 is a complete rewrite of the library. It is redesigned to be fast, lightweigh
|
||||
- `InteractiveMap` and `StaticMap` are removed. Instead, import `Map`.
|
||||
- `setRTLTextPlugin` is removed. Use the `Map` component's `RTLTextPlugin` prop (default enabled).
|
||||
- `MapController` is removed. v7.0 has removed its own implementation of user input handling in favor of the [native handlers](https://docs.mapbox.com/mapbox-gl-js/api/handlers/). If you are using a custom implementation of `MapController`, check if the native handlers offer options to address your application's needs.
|
||||
- `MapContext` and `useMapControl` are removed. Check out the new API [useMap](/docs/api-reference/use-map.md) and [useControl](/docs/api-reference/use-control.md).
|
||||
- `MapContext` and `useMapControl` are removed. Check out the new API [useMap](./api-reference/use-map.md) and [useControl](./api-reference/use-control.md).
|
||||
- The overlay components (`HTMLOverlay`, `CanvasOverlay` and `SVGOverlay`) are removed. Check out [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay) for implementing similar controls in your own application.
|
||||
- `LinearInterpolator` and `FlyToInterpolator` are removed. Use `map.easeTo()` and `map.flyTo()` instead, see [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation).
|
||||
|
||||
### Map
|
||||
|
||||
[documentation](/docs/api-reference/map.md)
|
||||
[documentation](./api-reference/map.md)
|
||||
|
||||
- Renamed props for better consistency with the wrapped library:
|
||||
+ `mapboxApiAccessToken` is now `mapboxAccessToken`
|
||||
@ -43,7 +43,7 @@ v7 is a complete rewrite of the library. It is redesigned to be fast, lightweigh
|
||||
+ `width`
|
||||
+ `height`
|
||||
+ `visible`
|
||||
- `onViewportChange`, `onViewStateChange` and `onInteractionStateChange` are removed. You can either use `Map` as an uncontrolled component with the new `initialViewState` prop, or if you need to manage the camera state externally (e.g. in Redux), use the `onMove` callback instead. See examples in [state management](/docs/get-started/state-management.md).
|
||||
- `onViewportChange`, `onViewStateChange` and `onInteractionStateChange` are removed. You can either use `Map` as an uncontrolled component with the new `initialViewState` prop, or if you need to manage the camera state externally (e.g. in Redux), use the `onMove` callback instead. See examples in [state management](./get-started/state-management.md).
|
||||
- `transition*` props are removed. Use `map.easeTo()` and `map.flyTo()` instead, see [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation).
|
||||
- `mapOptions` is removed. Almost all of the options for the native `Map` class are exposed as props.
|
||||
- `onHover` is removed. Use `onMouseMove` or `onMouseEnter`.
|
||||
@ -62,7 +62,7 @@ v7 is a complete rewrite of the library. It is redesigned to be fast, lightweigh
|
||||
|
||||
- `MapContext` is now an official API. The experimental `_MapContext` export will be removed in a future release.
|
||||
- `react-virtualized-auto-sizer` is no longer a dependency.
|
||||
- Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the [interaction options](/docs/api-reference/interactive-map.md#interaction-options):
|
||||
- Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the [interaction options](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options):
|
||||
|
||||
```js
|
||||
const CONTROLLER_OPTS = {
|
||||
@ -94,7 +94,7 @@ const CONTROLLER_OPTS = {
|
||||
|
||||
## Upgrading to v3.2
|
||||
|
||||
- The latest mapbox-gl release requires stylesheet to be included at all times. See [Get Started](/docs/get-started/get-started.md) for information about styling.
|
||||
- The latest mapbox-gl release requires stylesheet to be included at all times. See [Get Started](./get-started/get-started.md) for information about styling.
|
||||
- Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.
|
||||
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ v7 is a complete rewrite of the library. It addresses many long-standing issues
|
||||
- Lightweight: the ESM build size is reduced from 219k to 57k
|
||||
- Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (`flyTo`, `fitBounds` etc.) can now be called directly without breaking the React binding.
|
||||
- Compatibility: first and third-party plugins! Directly use [mapbox-gl-draw](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon), [mapbox-gl-geocoder](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder), to name a few.
|
||||
- TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be [imported](/docs/api-reference/types.md).
|
||||
- TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be [imported](./api-reference/types.md).
|
||||
|
||||
Visit the [upgrade guide](/docs/upgrade-guide.md) if you are trying to upgrade from v5 and v6.
|
||||
Visit the [upgrade guide](./upgrade-guide.md) if you are trying to upgrade from v5 and v6.
|
||||
|
||||
## react-map-gl v5.3/v6.1
|
||||
|
||||
@ -21,10 +21,10 @@ Release date: Jan 27, 2020
|
||||
### Highlights
|
||||
|
||||
- **TypeScript and Flow typings** are now published with the library
|
||||
- **More controller customizations.** Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated [interaction options](/docs/api-reference/interactive-map.md#interaction-options) for details.
|
||||
- A new [eventRecognizerOptions](/docs/api-reference/interactive-map.md#eventrecognizeroptions) prop is added for fine-tuning the interaction experience.
|
||||
- New component: [AttributionControl](/docs/api-reference/attribution-control.md)
|
||||
- Promoted to official API: [MapContext](/docs/api-reference/map-context.md)
|
||||
- **More controller customizations.** Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated [interaction options](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options) for details.
|
||||
- A new [eventRecognizerOptions](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#eventrecognizeroptions) prop is added for fine-tuning the interaction experience.
|
||||
- New component: [AttributionControl](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/attribution-control.md)
|
||||
- Promoted to official API: [MapContext](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/map-context.md)
|
||||
- Resolved React error over attempted state update during render
|
||||
- `GeolocateControl` added supports for `showAccuracyCircle`
|
||||
- All controls now support inline styling with a `style` prop
|
||||
@ -36,9 +36,9 @@ Release date: Dec 16, 2020
|
||||
|
||||
### What's Changed
|
||||
|
||||
The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are [important changes](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do **NOT** upgrade to this version, and consider your options discussed in [this document](/docs/get-started/mapbox-tokens.md).
|
||||
The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are [important changes](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do **NOT** upgrade to this version, and consider your options discussed in [this document](./get-started/mapbox-tokens.md).
|
||||
|
||||
See [upgrade guide](/docs/upgrade-guide.md) for a complete list of breaking changes.
|
||||
See [upgrade guide](./upgrade-guide.md) for a complete list of breaking changes.
|
||||
|
||||
## react-map-gl v5.2
|
||||
|
||||
@ -46,7 +46,7 @@ Release date: Jan 6, 2020
|
||||
|
||||
### Highlights
|
||||
|
||||
- **New Components**: [`ScaleControl`](/docs/api-reference/scale-control.md)
|
||||
- **New Components**: [`ScaleControl`](https://github.com/visgl/react-map-gl/tree/5.2-release/docs/api-reference/scale-control.md)
|
||||
- **NavigationControl**: new `label` prop
|
||||
- **GeolocateControl**: new `label`, `onGeolocate`, `auto` props
|
||||
- **New Export**: `WebMercatorViewport` is re-exported from the `viewport-mercator-project` library for ease of use. It's recommended to import it from `react-map-gl` instead to avoid future dependency change.
|
||||
@ -58,8 +58,8 @@ Release date: Oct 30, 2019
|
||||
|
||||
### Highlights
|
||||
|
||||
- **New Components**: [`Layer`](/docs/api-reference/layer.md) and [`Source`](/docs/api-reference/source.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **Viewport transition**: `transitionDuration` can be set to `'auto'` when using [`FlyToInterpolator`](/docs/api-reference/fly-to-interpolator.md).
|
||||
- **New Components**: [`Layer`](https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/layer.md) and [`Source`](https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/source.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **Viewport transition**: `transitionDuration` can be set to `'auto'` when using [`FlyToInterpolator`](https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/fly-to-interpolator.md).
|
||||
- **New Example**: Add an [example](https://visgl.github.io/react-map-gl/examples/draw-polygon) with drawing library [react-map-gl-draw](https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw).
|
||||
|
||||
## react-map-gl v5.0
|
||||
@ -78,7 +78,7 @@ Release date: Mar 14, 2019
|
||||
|
||||
### Highlights
|
||||
|
||||
- **New Components**: [`FullscreenControl`](/docs/api-reference/fullscreen-control.md), [`GeolocateControl`](/docs/api-reference/geolocate-control.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **New Components**: [`FullscreenControl`](https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/fullscreen-control.md), [`GeolocateControl`](https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/geolocate-control.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **New callback props** `InteractiveMap` supports more callbacks:
|
||||
+ `onNativeClick`
|
||||
|
||||
@ -109,7 +109,7 @@ Release date: Nov 5, 2018
|
||||
+ `onWheel`
|
||||
+ `onMouseOut`
|
||||
|
||||
See [upgrade guide](/docs/upgrade-guide.md) for breaking changes.
|
||||
See [upgrade guide](./upgrade-guide.md) for breaking changes.
|
||||
|
||||
## react-map-gl v3.3
|
||||
|
||||
@ -160,8 +160,8 @@ Release date: July 27th, 2017
|
||||
|
||||
- **Latest Mapbox GL JS**: Bumps `Mapbox GL JS` to [0.38](https://github.com/mapbox/mapbox-gl-js/releases).
|
||||
- **Multi-Touch Support**: Full support for multi-touch gestures such as pinch-to-zoom and rotate.
|
||||
- **New Components**: The `MapGL` component has been split into [`StaticMap`](/docs/api-reference/static-map.md) and [`InteractiveMap`](/docs/api-reference/interactive-map.md) (the default). Also, [`Popup`](/docs/api-reference/popup.md), [`Marker`](/docs/api-reference/marker.md), [`NavigationControl`](/docs/api-reference/navigation-control.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **Improved Overlay Components**: Supplying viewport props (`width` `height` `zoom` `longitude` and `latitude`) are no longer required if you render [`SVGOverlay`](/docs/api-reference/svg-overlay.md), [`CanvasOverlay`](/docs/api-reference/canvas-overlay.md) or [`HTMLOverlay`](/docs/api-reference/html-overlay.md) as a child of the map. Perspective mode is now supported in all overlays.
|
||||
- **New Components**: The `MapGL` component has been split into [`StaticMap`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md) and [`InteractiveMap`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md) (the default). Also, [`Popup`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/popup.md), [`Marker`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/marker.md), [`NavigationControl`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/navigation-control.md) have been added to provide better React parity with the `Mapbox GL JS` API.
|
||||
- **Improved Overlay Components**: Supplying viewport props (`width` `height` `zoom` `longitude` and `latitude`) are no longer required if you render [`SVGOverlay`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/svg-overlay.md), [`CanvasOverlay`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/canvas-overlay.md) or [`HTMLOverlay`](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/html-overlay.md) as a child of the map. Perspective mode is now supported in all overlays.
|
||||
- **New Props**: `maxPitch`, `minPitch`, `dragPan`, `doubleClickZoom`, `touchZoomRotate`,
|
||||
`scrollZoom` are now provided to allow granular control of map interactivity.
|
||||
- **Documentation**: Significantly expanded and linked with our other geospatial frameworks.
|
||||
@ -170,11 +170,11 @@ Release date: July 27th, 2017
|
||||
|
||||
### Components
|
||||
|
||||
#### [InteractiveMap (New, MapGL replacement)](/docs/api-reference/interactive-map.md)
|
||||
#### [InteractiveMap (New, MapGL replacement)](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md)
|
||||
|
||||
This is a wrapper on top of `StaticMap`. It takes all the props of `StaticMap` and additional ones such as `onViewportChange`, `scrollZoom`, `dragRotate`, etc. to control interactivity on the map. See [Source Code](https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/interactive-map.js) for more information.
|
||||
|
||||
#### [StaticMap (New)](/docs/api-reference/static-map.md)
|
||||
#### [StaticMap (New)](https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md)
|
||||
|
||||
This is the React wrapper around `Mapbox GL JS` and takes in viewport properties such as `width`, `height`, `latitude`, `longitude`. Style diffing and updating logic also live here. See [Source Code](https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/static-map.js) for more information.
|
||||
|
||||
|
||||
2
website/.gitignore
vendored
2
website/.gitignore
vendored
@ -1,2 +1,4 @@
|
||||
public/
|
||||
.cache/
|
||||
.docusaurus/
|
||||
build/
|
||||
|
||||
8
website/babel.config.js
Normal file
8
website/babel.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
plugins: [
|
||||
'version-inline',
|
||||
// Ensure consistently hashed component classNames between environments (a must for SSR)
|
||||
'styled-components'
|
||||
]
|
||||
};
|
||||
188
website/docusaurus.config.js
Normal file
188
website/docusaurus.config.js
Normal file
@ -0,0 +1,188 @@
|
||||
// @ts-check
|
||||
// Note: type annotations allow type checking and IDEs autocompletion
|
||||
|
||||
const lightCodeTheme = require('prism-react-renderer/themes/github');
|
||||
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
|
||||
const webpack = require('webpack');
|
||||
const {resolve} = require('path');
|
||||
|
||||
/** @type {import('@docusaurus/types').Config} */
|
||||
const config = {
|
||||
title: 'React Map GL',
|
||||
tagline: 'React wrapper for Mapbox GL JS',
|
||||
url: 'https://visgl.github.io/',
|
||||
baseUrl: '/react-map-gl/',
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
favicon: '/favicon.ico',
|
||||
organizationName: 'visgl', // Usually your GitHub org/user name.
|
||||
projectName: 'react-map-gl', // Usually your repo name.
|
||||
trailingSlash: false,
|
||||
|
||||
presets: [
|
||||
[
|
||||
'classic',
|
||||
/** @type {import('@docusaurus/preset-classic').Options} */
|
||||
({
|
||||
docs: {
|
||||
path: '../docs',
|
||||
sidebarPath: resolve('./src/docs-sidebar.js'),
|
||||
// Point to to the website directory in your repo.
|
||||
editUrl: 'https://github.com/visgl/deck.gl/tree/master/website'
|
||||
},
|
||||
theme: {
|
||||
customCss: [
|
||||
resolve('./src/styles.css'),
|
||||
resolve('../node_modules/mapbox-gl/dist/mapbox-gl.css'),
|
||||
resolve('./node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'),
|
||||
resolve('./node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css')
|
||||
]
|
||||
}
|
||||
})
|
||||
]
|
||||
],
|
||||
|
||||
plugins: [
|
||||
[
|
||||
'./ocular-docusaurus-plugin',
|
||||
{
|
||||
debug: true,
|
||||
resolve: {
|
||||
modules: [resolve('node_modules'), resolve('../node_modules')],
|
||||
alias: {
|
||||
'react-map-gl': resolve('../src'),
|
||||
'mapbox-gl': resolve('../node_modules/mapbox-gl'),
|
||||
'maplibre-gl': resolve('../node_modules/maplibre-gl'),
|
||||
'website-examples': resolve('../examples'),
|
||||
react: resolve('node_modules/react'),
|
||||
'react-dom': resolve('node_modules/react-dom'),
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.EnvironmentPlugin([
|
||||
'MapboxAccessToken'
|
||||
]),
|
||||
// These modules break server side bundling
|
||||
new webpack.IgnorePlugin({
|
||||
resourceRegExp: /asciify-image/
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
// https://github.com/Esri/calcite-components/issues/2865
|
||||
{
|
||||
test: /\.m?js/,
|
||||
resolve: {
|
||||
fullySpecified: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'@docusaurus/plugin-content-docs',
|
||||
{
|
||||
id: 'examples',
|
||||
path: './src/examples',
|
||||
routeBasePath: 'examples',
|
||||
sidebarPath: resolve('./src/examples-sidebar.js'),
|
||||
breadcrumbs: false,
|
||||
docItemComponent: resolve('./src/components/example/doc-item-component.jsx')
|
||||
}
|
||||
]
|
||||
],
|
||||
|
||||
themeConfig:
|
||||
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
|
||||
({
|
||||
navbar: {
|
||||
title: 'react-map-gl',
|
||||
logo: {
|
||||
alt: 'vis.gl Logo',
|
||||
src: 'images/visgl-logo-dark.png',
|
||||
srcDark: 'images/visgl-logo-light.png'
|
||||
},
|
||||
items: [
|
||||
{
|
||||
to: '/examples',
|
||||
position: 'left',
|
||||
label: 'Examples'
|
||||
},
|
||||
{
|
||||
to: '/docs',
|
||||
position: 'left',
|
||||
label: 'Docs'
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/visgl/react-map-gl',
|
||||
label: 'GitHub',
|
||||
position: 'right'
|
||||
}
|
||||
]
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{
|
||||
label: 'API Reference',
|
||||
to: '/docs/api-reference/map'
|
||||
},
|
||||
{
|
||||
label: 'Starter templates',
|
||||
href: 'https://github.com/visgl/react-map-gl/tree/master/examples/get-started'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Other vis.gl Libraries',
|
||||
items: [
|
||||
{
|
||||
label: 'deck.gl',
|
||||
href: 'https://deck.gl'
|
||||
},
|
||||
{
|
||||
label: 'luma.gl',
|
||||
href: 'https://luma.gl'
|
||||
},
|
||||
{
|
||||
label: 'loaders.gl',
|
||||
href: 'https://loaders.gl'
|
||||
},
|
||||
{
|
||||
label: 'nebula.gl',
|
||||
href: 'https://nebula.gl'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
items: [
|
||||
{
|
||||
label: 'Open Visualization',
|
||||
href: 'https://www.openvisualization.org/#'
|
||||
},
|
||||
{
|
||||
label: 'vis.gl blog on Medium',
|
||||
href: 'https://medium.com/vis-gl'
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/visgl/react-map-gl'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
copyright: `Copyright © ${new Date().getFullYear()} OpenJS Foundation`
|
||||
},
|
||||
prism: {
|
||||
theme: lightCodeTheme,
|
||||
darkTheme: darkCodeTheme
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@ -1,186 +0,0 @@
|
||||
const {resolve} = require('path');
|
||||
const DOC_TABLE_OF_CONTENTS = require('../docs/table-of-contents.json');
|
||||
|
||||
const ROOT_DIR = resolve('..');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
resolve: `gatsby-theme-ocular`,
|
||||
options: {
|
||||
logLevel: 1, // Adjusts amount of debug information from ocular-gatsby
|
||||
|
||||
// Folders
|
||||
DIR_NAME: __dirname,
|
||||
ROOT_FOLDER: ROOT_DIR,
|
||||
|
||||
DOCS: DOC_TABLE_OF_CONTENTS,
|
||||
DOC_FOLDERS: [
|
||||
resolve(ROOT_DIR, 'docs')
|
||||
],
|
||||
SOURCE: [
|
||||
resolve('./static'),
|
||||
resolve('./src'),
|
||||
],
|
||||
|
||||
PROJECT_TYPE: 'github',
|
||||
|
||||
PROJECT_NAME: 'react-map-gl',
|
||||
PROJECT_ORG: 'visgl',
|
||||
PROJECT_ORG_LOGO: 'images/visgl-logo.png',
|
||||
PROJECT_URL: 'https://github.com/visgl/',
|
||||
PROJECT_DESC: 'React wrapper for Mapbox GL JS',
|
||||
PROJECT_IMAGE: 'images/hero-sm.jpg',
|
||||
PATH_PREFIX: '/react-map-gl',
|
||||
|
||||
GA_TRACKING_ID: 'UA-74374017-2',
|
||||
|
||||
// For showing star counts and contributors.
|
||||
// Should be like btoa('YourUsername:YourKey') and should be readonly.
|
||||
GITHUB_KEY: null,
|
||||
|
||||
HOME_PATH: '',
|
||||
|
||||
PROJECTS: [
|
||||
{
|
||||
name: 'deck.gl',
|
||||
url: 'https://deck.gl'
|
||||
},
|
||||
{
|
||||
name: 'luma.gl',
|
||||
url: 'https://luma.gl'
|
||||
},
|
||||
{
|
||||
name: 'loaders.gl',
|
||||
url: 'https://loaders.gl'
|
||||
},
|
||||
{
|
||||
name: 'nebula.gl',
|
||||
url: 'https://nebula.gl/'
|
||||
}
|
||||
],
|
||||
|
||||
LINK_TO_GET_STARTED: '/docs/get-started/get-started',
|
||||
|
||||
ADDITIONAL_LINKS: [{name: 'Blog', href: 'http://medium.com/vis-gl', index: 4}],
|
||||
|
||||
INDEX_PAGE_URL: resolve(__dirname, './src/home.js'),
|
||||
|
||||
EXAMPLES: [
|
||||
{
|
||||
title: 'Dynamic Styling',
|
||||
image: 'images/example-layers.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/layers/src/app.tsx'),
|
||||
path: 'examples/layers'
|
||||
},
|
||||
{
|
||||
title: 'Markers & Popups',
|
||||
image: 'images/example-controls.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/controls/src/app.tsx'),
|
||||
path: 'examples/controls'
|
||||
},
|
||||
{
|
||||
title: 'Custom Cursor',
|
||||
image: 'images/example-custom-cursor.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/custom-cursor/src/app.tsx'),
|
||||
path: 'examples/custom-cursor'
|
||||
},
|
||||
{
|
||||
title: 'Draggable Marker',
|
||||
image: 'images/example-draggable-markers.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/draggable-markers/src/app.tsx'),
|
||||
path: 'examples/draggable-markers'
|
||||
},
|
||||
{
|
||||
title: 'GeoJSON',
|
||||
image: 'images/example-geojson.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/geojson/src/app.tsx'),
|
||||
path: 'examples/geojson'
|
||||
},
|
||||
{
|
||||
title: 'GeoJSON Animation',
|
||||
image: 'images/example-geojson-animation.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/geojson-animation/src/app.tsx'),
|
||||
path: 'examples/geojson-animation'
|
||||
},
|
||||
{
|
||||
title: 'Clusters',
|
||||
image: 'images/example-clusters.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/clusters/src/app.tsx'),
|
||||
path: 'examples/clusters'
|
||||
},
|
||||
{
|
||||
title: 'Limit Map Interaction',
|
||||
image: 'images/example-interaction.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/interaction/src/app.tsx'),
|
||||
path: 'examples/interaction'
|
||||
},
|
||||
{
|
||||
title: 'Camera Transition',
|
||||
image: 'images/example-viewport-animation.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/viewport-animation/src/app.tsx'),
|
||||
path: 'examples/viewport-animation'
|
||||
},
|
||||
{
|
||||
title: 'Highlight By Filter',
|
||||
image: 'images/example-filter.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/filter/src/app.tsx'),
|
||||
path: 'examples/filter'
|
||||
},
|
||||
{
|
||||
title: 'Zoom To Bounds',
|
||||
image: 'images/example-zoom-to-bounds.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/zoom-to-bounds/src/app.tsx'),
|
||||
path: 'examples/zoom-to-bounds'
|
||||
},
|
||||
{
|
||||
title: 'Heatmap',
|
||||
image: 'images/example-heatmap.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/heatmap/src/app.tsx'),
|
||||
path: 'examples/heatmap'
|
||||
},
|
||||
{
|
||||
title: 'Draw Polygon',
|
||||
image: 'images/example-draw-polygon.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/draw-polygon/src/app.tsx'),
|
||||
path: 'examples/draw-polygon'
|
||||
},
|
||||
{
|
||||
title: 'Terrain',
|
||||
image: 'images/example-terrain.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/terrain/src/app.tsx'),
|
||||
path: 'examples/terrain'
|
||||
},
|
||||
{
|
||||
title: 'Geocoder',
|
||||
image: 'images/example-geocoder.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/geocoder/src/app.tsx'),
|
||||
path: 'examples/geocoder'
|
||||
},
|
||||
{
|
||||
title: 'Side by Side',
|
||||
image: 'images/example-side-by-side.jpg',
|
||||
componentUrl: resolve(__dirname, '../examples/side-by-side/src/app.tsx'),
|
||||
path: 'examples/side-by-side'
|
||||
}
|
||||
],
|
||||
|
||||
THEME_OVERRIDES: require('./src/theme.json'),
|
||||
|
||||
STYLESHEETS: [
|
||||
'https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css',
|
||||
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css',
|
||||
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css',
|
||||
'/style.css'
|
||||
]
|
||||
}
|
||||
},
|
||||
{resolve: 'gatsby-plugin-no-sourcemaps'},
|
||||
{
|
||||
resolve: 'gatsby-plugin-env-variables',
|
||||
options: {
|
||||
whitelist: ['MapboxAccessToken']
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,62 +0,0 @@
|
||||
const resolve = require('path').resolve;
|
||||
const DEPENDENCIES = require('./package.json').dependencies;
|
||||
|
||||
module.exports.onCreateWebpackConfig = function onCreateWebpackConfigOverride(opts) {
|
||||
const {
|
||||
stage, // build stage: ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’
|
||||
// rules, // Object (map): set of preconfigured webpack config rules
|
||||
// plugins, // Object (map): A set of preconfigured webpack config plugins
|
||||
getConfig, // Function that returns the current webpack config
|
||||
// loaders, // Object (map): set of preconfigured webpack config loaders
|
||||
actions
|
||||
} = opts;
|
||||
|
||||
console.log(`App rewriting gatsby webpack config ${stage}`); // eslint-disable-line
|
||||
|
||||
const config = getConfig();
|
||||
config.resolve = config.resolve || {};
|
||||
config.resolve.alias = config.resolve.alias || {};
|
||||
|
||||
// When duplicating example dependencies in website, autogenerate
|
||||
// aliases to ensure the website version is picked up
|
||||
// NOTE: module dependencies are automatically injected
|
||||
// TODO - should this be automatically done by ocular-gatsby?
|
||||
const dependencyAliases = {};
|
||||
for (const dependency in DEPENDENCIES) {
|
||||
dependencyAliases[dependency] = `${__dirname}/node_modules/${dependency}`;
|
||||
}
|
||||
|
||||
Object.assign(config.resolve.alias, {
|
||||
'react-map-gl': resolve(__dirname, '../src'),
|
||||
react: resolve('node_modules/react'),
|
||||
'react-dom': resolve('node_modules/react-dom')
|
||||
}, dependencyAliases);
|
||||
|
||||
// turf.js uses mjs
|
||||
config.module.rules.push({
|
||||
test: /\.mjs$/,
|
||||
include: /node_modules/,
|
||||
type: "javascript/auto",
|
||||
});
|
||||
|
||||
// Work around for https://github.com/mapbox/mapbox-gl-js/issues/10173
|
||||
if (stage === 'build-javascript') {
|
||||
for (const rule of config.module.rules) {
|
||||
// find the babel loader
|
||||
const loader = rule.use &&
|
||||
(Array.isArray(rule.use) ? rule.use : [rule.use])
|
||||
.find(u => u.loader && u.loader.includes("babel-loader"));
|
||||
if (!rule.include && loader && loader.options) {
|
||||
loader.options.ignore = [
|
||||
resolve(__dirname, '../node_modules/mapbox-gl/dist/mapbox-gl.js')
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Completely replace the webpack config for the current stage.
|
||||
// This can be dangerous and break Gatsby if certain configuration options are changed.
|
||||
// Generally only useful for cases where you need to handle config merging logic yourself,
|
||||
// in which case consider using webpack-merge.
|
||||
actions.replaceWebpackConfig(config);
|
||||
};
|
||||
51
website/ocular-docusaurus-plugin/index.js
Normal file
51
website/ocular-docusaurus-plugin/index.js
Normal file
@ -0,0 +1,51 @@
|
||||
// const util = require('util');
|
||||
|
||||
/* Print full webpack error;
|
||||
edit node_modules/react-dev-utils/formatWebpackMessages.js
|
||||
|
||||
```
|
||||
} else if ('message' in message) {
|
||||
return message.message;
|
||||
```
|
||||
*/
|
||||
|
||||
module.exports = function (
|
||||
context,
|
||||
opts = {
|
||||
resolve: {modules: [], alias: {}},
|
||||
debug: false,
|
||||
module: {},
|
||||
plugins: []
|
||||
}
|
||||
) {
|
||||
return {
|
||||
name: 'ocular-docusaurus-plugin',
|
||||
configureWebpack(_config, isServer, utils) {
|
||||
const {resolve, debug, module, plugins} = opts;
|
||||
|
||||
// Custom merging
|
||||
if (resolve) {
|
||||
if (resolve.modules) {
|
||||
_config.resolve.modules = resolve.modules;
|
||||
}
|
||||
Object.assign(_config.resolve.alias, resolve.alias);
|
||||
}
|
||||
|
||||
// Uncomment to inspect config
|
||||
// console.log(util.inspect(_config.module, {depth: null}));
|
||||
|
||||
// Symlink docs crash otherwise, see https://github.com/facebook/docusaurus/issues/6257
|
||||
_config.resolve.symlinks = false;
|
||||
|
||||
if (isServer) {
|
||||
return {
|
||||
devtool: debug ? 'eval' : false,
|
||||
module,
|
||||
plugins,
|
||||
node: {__dirname: true}
|
||||
};
|
||||
}
|
||||
return {module, plugins};
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "react-map-gl-website",
|
||||
"scripts": {
|
||||
"start": "yarn clean && yarn develop",
|
||||
"build": "yarn clean-examples && yarn clean && gatsby build --prefix-paths",
|
||||
"clean": "rm -rf ./.cache ./public",
|
||||
"clean-examples": "find ../examples -name node_modules -exec rm -rf {} \\; || true",
|
||||
"develop": "yarn clean-examples && gatsby develop",
|
||||
"serve": "gatsby serve",
|
||||
"deploy": "NODE_DEBUG=gh-pages gh-pages -d public"
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus clear && npm run write-heading-ids && docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-heading-ids": "ts-node ./write-heading-ids.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-draw": "^1.3.0",
|
||||
@ -22,10 +22,12 @@
|
||||
"styled-components": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gatsby": "^2.20.24",
|
||||
"gatsby-plugin-env-variables": "^1.0.1",
|
||||
"gatsby-plugin-no-sourcemaps": "^2.1.1",
|
||||
"gatsby-theme-ocular": "^1.2.3",
|
||||
"gh-pages": "^2.1.0"
|
||||
"@docusaurus/core": "^2.2.0",
|
||||
"@docusaurus/plugin-content-docs": "^2.2.0",
|
||||
"@docusaurus/preset-classic": "^2.2.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"babel-plugin-styled-components": "^2.0.0",
|
||||
"prism-react-renderer": "^1.2.1",
|
||||
"ts-node": "~10.9.1"
|
||||
}
|
||||
}
|
||||
|
||||
1
website/src/components/common.jsx
Normal file
1
website/src/components/common.jsx
Normal file
@ -0,0 +1 @@
|
||||
export const isMobile = props => `@media screen and (max-width: 480px)`;
|
||||
36
website/src/components/example/doc-item-component.jsx
Normal file
36
website/src/components/example/doc-item-component.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
const DemoContainer = styled.div`
|
||||
position: absolute;
|
||||
overflow: hidden !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
> h1 {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
/** Passed to @docusaurus/plugin-content-docs to render the mdx content */
|
||||
export default function DocItem({content, route}) {
|
||||
const MDXComponent = content;
|
||||
const indexPath = useBaseUrl('/examples');
|
||||
|
||||
if (route.path === indexPath) {
|
||||
return (
|
||||
<div key="index">
|
||||
<MDXComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DemoContainer key="demo">
|
||||
<MDXComponent />
|
||||
</DemoContainer>
|
||||
);
|
||||
}
|
||||
43
website/src/components/example/examples-index.jsx
Normal file
43
website/src/components/example/examples-index.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
// Note: this is internal API and may change in a future release
|
||||
// https://github.com/facebook/docusaurus/discussions/7457
|
||||
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import {MainExamples, ExamplesGroup, ExampleCard, ExampleHeader, ExampleTitle} from './styled';
|
||||
|
||||
function renderItem(item, getThumbnail) {
|
||||
const imageUrl = useBaseUrl(getThumbnail(item));
|
||||
const {label, href} = item;
|
||||
|
||||
return (
|
||||
<ExampleCard key={label} href={href}>
|
||||
<img width="100%" src={imageUrl} alt={label} />
|
||||
<ExampleTitle>
|
||||
<span>{label}</span>
|
||||
</ExampleTitle>
|
||||
</ExampleCard>
|
||||
);
|
||||
}
|
||||
|
||||
function renderCategory({label, items}, getThumbnail) {
|
||||
return [
|
||||
<ExampleHeader key={`${label}-header`}>{label}</ExampleHeader>,
|
||||
<ExamplesGroup key={label}>{items.map(item => renderItem(item, getThumbnail))}</ExamplesGroup>
|
||||
];
|
||||
}
|
||||
|
||||
export default function ExamplesIndex({getThumbnail}) {
|
||||
const sidebar = useDocsSidebar();
|
||||
|
||||
return (
|
||||
<MainExamples>
|
||||
{sidebar.items.map(item => {
|
||||
if (item.type === 'category') {
|
||||
return renderCategory(item, getThumbnail);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</MainExamples>
|
||||
);
|
||||
}
|
||||
73
website/src/components/example/styled.js
Normal file
73
website/src/components/example/styled.js
Normal file
@ -0,0 +1,73 @@
|
||||
import styled from 'styled-components';
|
||||
import {isMobile} from '../common';
|
||||
|
||||
export const ExampleHeader = styled.div`
|
||||
font: bold 20px/28px var(--ifm-font-family-base);
|
||||
color: var(--ifm-color-content-secondary);
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px solid 20px;
|
||||
display: inline-block;
|
||||
padding: 20px 20px 4px 0;
|
||||
`;
|
||||
|
||||
export const MainExamples = styled.main`
|
||||
padding: 16px 0;
|
||||
`;
|
||||
|
||||
export const ExamplesGroup = styled.main`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
export const ExampleCard = styled.a`
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
width: 50%;
|
||||
max-width: 240px;
|
||||
line-height: 0;
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
img {
|
||||
transition-property: filter;
|
||||
transition-duration: var(--ifm-transition-slow);
|
||||
transition-timing-function: var(--ifm-transition-timing-default);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--ifm-global-shadow-md);
|
||||
}
|
||||
&:hover img {
|
||||
filter: contrast(0.2);
|
||||
}
|
||||
${isMobile} {
|
||||
width: 33%;
|
||||
min-width: 200px;
|
||||
}
|
||||
@media screen and (max-width: 632px) {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ExampleTitle = styled.div`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: var(--ifm-color-white);
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
line-height: initial;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
border: solid 1px var(--ifm-color-white);
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--ifm-transition-slow);
|
||||
transition-timing-function: var(--ifm-transition-timing-default);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
22
website/src/components/home/index.jsx
Normal file
22
website/src/components/home/index.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import {Banner, BannerContainer, HeroExampleContainer, ProjectName, GetStartedLink} from './styled';
|
||||
|
||||
export default function renderPage({HeroExample, children}) {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
|
||||
// Note: The Layout "wrapper" component adds header and footer etc
|
||||
return (
|
||||
<>
|
||||
<Banner>
|
||||
<HeroExampleContainer>{HeroExample && <HeroExample />}</HeroExampleContainer>
|
||||
<BannerContainer>
|
||||
<ProjectName>{siteConfig.title}</ProjectName>
|
||||
<p>{siteConfig.tagline}</p>
|
||||
<GetStartedLink href="./docs/get-started">GET STARTED</GetStartedLink>
|
||||
</BannerContainer>
|
||||
</Banner>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
88
website/src/components/home/styled.js
Normal file
88
website/src/components/home/styled.js
Normal file
@ -0,0 +1,88 @@
|
||||
import styled from 'styled-components';
|
||||
import {isMobile} from '../common';
|
||||
|
||||
export const Banner = styled.section`
|
||||
position: relative;
|
||||
height: 30rem;
|
||||
background: var(--ifm-color-gray-400);
|
||||
color: var(--ifm-color-gray-200);
|
||||
z-index: 0;
|
||||
${isMobile} {
|
||||
height: 80vh;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Container = styled.div`
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
max-width: 80rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
export const BannerContainer = styled(Container)`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
padding-left: 4rem;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
export const HeroExampleContainer = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
`;
|
||||
|
||||
export const Section = styled.section`
|
||||
&:nth-child(2n + 1) {
|
||||
background: var(--ifm-color-gray-300);
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectName = styled.h1`
|
||||
font-size: 5em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
export const GetStartedLink = styled.a`
|
||||
pointer-events: all;
|
||||
font-size: 12px;
|
||||
line-height: 44px;
|
||||
letter-spacing: 2px;
|
||||
font-weight: bold;
|
||||
margin: 24px 0;
|
||||
padding: 0 4rem;
|
||||
pointer-events: all;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: background-color 250ms ease-in, color 250ms ease-in;
|
||||
border: solid 2px var(--ifm-color-primary);
|
||||
color: var(--ifm-color-gray-200);
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
var(--ifm-color-gray-700) 0%,
|
||||
var(--ifm-color-gray-400) 100%
|
||||
);
|
||||
border-image-slice: 2;
|
||||
&:visited {
|
||||
color: var(--ifm-color-gray-200);
|
||||
}
|
||||
&:active {
|
||||
color: var(--ifm-color-white);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--ifm-color-white);
|
||||
background-color: var(--ifm-color-primary);
|
||||
}
|
||||
`;
|
||||
3
website/src/components/index.js
Normal file
3
website/src/components/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
export {default as ExamplesIndex} from './example/examples-index';
|
||||
|
||||
export {default as Home} from './home';
|
||||
15
website/src/docs-sidebar.js
Normal file
15
website/src/docs-sidebar.js
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Creating a sidebar enables you to:
|
||||
- create an ordered group of docs
|
||||
- render a sidebar for each doc of that group
|
||||
- provide next/previous navigation
|
||||
|
||||
The sidebars can be generated from the filesystem, or explicitly defined here.
|
||||
|
||||
Create as many sidebars as you want.
|
||||
*/
|
||||
const sidebars = {
|
||||
docsSidebar: require('../../docs/table-of-contents.json')
|
||||
};
|
||||
|
||||
module.exports = sidebars;
|
||||
43
website/src/examples-sidebar.js
Normal file
43
website/src/examples-sidebar.js
Normal file
@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Creating a sidebar enables you to:
|
||||
- create an ordered group of docs
|
||||
- render a sidebar for each doc of that group
|
||||
- provide next/previous navigation
|
||||
|
||||
The sidebars can be generated from the filesystem, or explicitly defined here.
|
||||
|
||||
Create as many sidebars as you want.
|
||||
*/
|
||||
const sidebars = {
|
||||
examplesSidebar: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Overview',
|
||||
id: 'index'
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Examples',
|
||||
items: [
|
||||
'layers',
|
||||
'controls',
|
||||
'custom-cursor',
|
||||
'draggable-markers',
|
||||
'geojson',
|
||||
'geojson-animation',
|
||||
'clusters',
|
||||
'interaction',
|
||||
'viewport-animation',
|
||||
'filter',
|
||||
'zoom-to-bounds',
|
||||
'heatmap',
|
||||
'draw-polygon',
|
||||
'terrain',
|
||||
'geocoder',
|
||||
'side-by-side'
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = sidebars;
|
||||
5
website/src/examples/clusters.mdx
Normal file
5
website/src/examples/clusters.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Clusters
|
||||
|
||||
import App from 'website-examples/clusters/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/controls.mdx
Normal file
5
website/src/examples/controls.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Markers, Popups and Controls
|
||||
|
||||
import App from 'website-examples/controls/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/custom-cursor.mdx
Normal file
5
website/src/examples/custom-cursor.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Custom Cursor
|
||||
|
||||
import App from 'website-examples/custom-cursor/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/draggable-markers.mdx
Normal file
5
website/src/examples/draggable-markers.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Draggable Marker
|
||||
|
||||
import App from 'website-examples/draggable-markers/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/draw-polygon.mdx
Normal file
5
website/src/examples/draw-polygon.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Draw Polygon
|
||||
|
||||
import App from 'website-examples/draw-polygon/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/filter.mdx
Normal file
5
website/src/examples/filter.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Highlight By Filter
|
||||
|
||||
import App from 'website-examples/filter/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/geocoder.mdx
Normal file
5
website/src/examples/geocoder.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Geocoder
|
||||
|
||||
import App from 'website-examples/geocoder/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/geojson-animation.mdx
Normal file
5
website/src/examples/geojson-animation.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# GeoJSON Animation
|
||||
|
||||
import App from 'website-examples/geojson-animation/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/geojson.mdx
Normal file
5
website/src/examples/geojson.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# GeoJSON
|
||||
|
||||
import App from 'website-examples/geojson/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/heatmap.mdx
Normal file
5
website/src/examples/heatmap.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Heatmap
|
||||
|
||||
import App from 'website-examples/heatmap/src/app';
|
||||
|
||||
<App />
|
||||
3
website/src/examples/index.mdx
Normal file
3
website/src/examples/index.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
import {ExamplesIndex} from '../components';
|
||||
|
||||
<ExamplesIndex getThumbnail={item => `/images/examples/${item.docId || item.label.toLowerCase()}.jpg`} />
|
||||
5
website/src/examples/interaction.mdx
Normal file
5
website/src/examples/interaction.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Limit Map Interaction
|
||||
|
||||
import App from 'website-examples/interaction/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/layers.mdx
Normal file
5
website/src/examples/layers.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Dynamic Styling
|
||||
|
||||
import App from 'website-examples/layers/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/side-by-side.mdx
Normal file
5
website/src/examples/side-by-side.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Side by Side
|
||||
|
||||
import App from 'website-examples/side-by-side/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/terrain.mdx
Normal file
5
website/src/examples/terrain.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Terrain
|
||||
|
||||
import App from 'website-examples/terrain/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/viewport-animation.mdx
Normal file
5
website/src/examples/viewport-animation.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Camera Transition
|
||||
|
||||
import App from 'website-examples/viewport-animation/src/app';
|
||||
|
||||
<App />
|
||||
5
website/src/examples/zoom-to-bounds.mdx
Normal file
5
website/src/examples/zoom-to-bounds.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
# Zoom to Bounds
|
||||
|
||||
import App from 'website-examples/zoom-to-bounds/src/app';
|
||||
|
||||
<App />
|
||||
@ -1,73 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import {Home} from 'gatsby-theme-ocular/components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.website = true;
|
||||
}
|
||||
|
||||
const Icon = styled.img`
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
const HeroExample = styled.div`
|
||||
background-image: url(images/hero.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const ContentContainer = styled.div`
|
||||
padding: 64px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 48px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Home HeroExample={HeroExample}>
|
||||
<ContentContainer>
|
||||
<h2>
|
||||
react-map-gl makes using Mapbox GL JS in React applications easy.
|
||||
</h2>
|
||||
|
||||
<h3>
|
||||
<Icon src="images/icon-react.svg" />
|
||||
React Integration
|
||||
</h3>
|
||||
<p>
|
||||
Use Mapbox GL JS Map as a fully controlled reactive component.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
<Icon src="images/icon-layers.svg" />
|
||||
Extensible
|
||||
</h3>
|
||||
<p>
|
||||
Comes with additional React interfaces such as context and hooks
|
||||
to support custom components.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
<Icon src="images/icon-high-precision.svg" />
|
||||
Part of vis.gl's Framework Suite
|
||||
</h3>
|
||||
<p>
|
||||
Use together with e.g. <a
|
||||
href="https://deck.gl/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
deck.gl</a> to render performant and compelling 2D and 3D
|
||||
WebGL visualizations on top of your Mapbox GL JS based maps.
|
||||
</p>
|
||||
|
||||
</ContentContainer>
|
||||
</Home>
|
||||
);
|
||||
}
|
||||
}
|
||||
98
website/src/pages/index.jsx
Normal file
98
website/src/pages/index.jsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import {Home} from '../components';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import styled from 'styled-components';
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
const HeroExample = styled.div`
|
||||
background-image: url(images/hero.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const TextContainer = styled.div`
|
||||
max-width: 800px;
|
||||
padding: 64px 112px;
|
||||
width: 70%;
|
||||
font-size: 14px;
|
||||
|
||||
h2 {
|
||||
font: bold 32px/48px;
|
||||
margin: 24px 0 16px;
|
||||
position: relative;
|
||||
}
|
||||
h3 {
|
||||
font: bold 16px/24px;
|
||||
margin: 16px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
h3 > img {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
width: 36px;
|
||||
left: -48px;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
background: #e1e8f0;
|
||||
height: 1px;
|
||||
margin: 24px 0 0;
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 48px 48px 48px 80px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function IndexPage() {
|
||||
const baseUrl = useBaseUrl('/');
|
||||
|
||||
return (
|
||||
<Layout title="Home" description="react-map-gl">
|
||||
<Home HeroExample={HeroExample}>
|
||||
<div style={{position: 'relative'}}>
|
||||
<TextContainer>
|
||||
<h2>
|
||||
react-map-gl makes using Mapbox GL JS in React applications easy.
|
||||
</h2>
|
||||
<hr className="short" />
|
||||
|
||||
<h3>
|
||||
<img src={`${baseUrl}images/icon-react.svg`} />
|
||||
React Integration
|
||||
</h3>
|
||||
<p>
|
||||
Use Mapbox GL JS Map as a fully controlled reactive component.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
<img src={`${baseUrl}images/icon-layers.svg`} />
|
||||
Extensible
|
||||
</h3>
|
||||
<p>
|
||||
Comes with additional React interfaces such as context and hooks
|
||||
to support custom components.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
<img src={`${baseUrl}images/icon-high-precision.svg`} />
|
||||
Part of vis.gl's Framework Suite
|
||||
</h3>
|
||||
<p>
|
||||
Use together with e.g. <a
|
||||
href="https://deck.gl/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
deck.gl</a> to render performant and compelling 2D and 3D
|
||||
WebGL visualizations on top of your Mapbox GL JS based maps.
|
||||
</p>
|
||||
</TextContainer>
|
||||
</div>
|
||||
</Home>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@ -1,46 +1,57 @@
|
||||
@font-face {
|
||||
font-family: 'UberMove';
|
||||
src: url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Light.woff2')
|
||||
format('woff2'),
|
||||
url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Light.woff')
|
||||
format('woff');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #00ade6;
|
||||
--ifm-color-primary-dark: #009ccf;
|
||||
--ifm-color-primary-darker: #0093c4;
|
||||
--ifm-color-primary-darkest: #0079a1;
|
||||
--ifm-color-primary-light: #00befd;
|
||||
--ifm-color-primary-lighter: #0ac2ff;
|
||||
--ifm-color-primary-lightest: #2ccbff;
|
||||
--ifm-color-white: #FFFFFF;
|
||||
--ifm-color-gray-200: #F7FAFC;
|
||||
--ifm-color-gray-300: #ECF2F7;
|
||||
--ifm-color-gray-400: #E1E8F0;
|
||||
--ifm-color-gray-500: #CAD5E0;
|
||||
--ifm-color-gray-600: #9EAEC0;
|
||||
--ifm-color-gray-700: #6F8196;
|
||||
--ifm-color-gray-800: #485668;
|
||||
--ifm-color-gray-900: #2B3848;
|
||||
--ifm-color-black: #19202C
|
||||
--code-font-size: 95%;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'UberMove';
|
||||
src: url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Regular.woff2')
|
||||
format('woff2'),
|
||||
url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Regular.woff')
|
||||
format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
main .container {
|
||||
position: relative;
|
||||
min-height: calc(100vh - var(--ifm-navbar-height));
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'UberMove';
|
||||
src: url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Medium.woff2')
|
||||
format('woff2'),
|
||||
url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Medium.woff')
|
||||
format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
.markdown {
|
||||
position: relative;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'UberMove';
|
||||
src: url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Bold.woff2')
|
||||
format('woff2'),
|
||||
url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Bold.woff')
|
||||
format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
.menu__link {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.menu__list {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--pre-padding));
|
||||
padding: 0 var(--pre-padding);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.tooltip {
|
||||
font-family: "UberMove";
|
||||
position: absolute;
|
||||
padding: 4px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
@ -53,7 +64,6 @@
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
font-family: "UberMove";
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
width: 284px;
|
||||
@ -62,7 +72,7 @@
|
||||
margin: 24px;
|
||||
padding: 12px 24px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
outline: none;
|
||||
cursor: auto;
|
||||
@ -148,4 +158,4 @@
|
||||
}
|
||||
.control-panel .input:hover .tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"primary400": "#00ADE6",
|
||||
"mono100": "#FFFFFF",
|
||||
"mono200": "#f7fcfb",
|
||||
"mono300": "#ecf7f5",
|
||||
"mono400": "#e1f0ee",
|
||||
"mono500": "#cae0dc",
|
||||
"mono600": "#9ec0bb",
|
||||
"mono700": "#6f9691",
|
||||
"mono800": "#486865",
|
||||
"mono900": "#2b4845",
|
||||
"mono1000": "#101918"
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
BIN
website/static/images/visgl-logo-dark.png
Normal file
BIN
website/static/images/visgl-logo-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
website/static/images/visgl-logo-light.png
Normal file
BIN
website/static/images/visgl-logo-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
145
website/write-heading-ids.ts
Normal file
145
website/write-heading-ids.ts
Normal file
@ -0,0 +1,145 @@
|
||||
/**
|
||||
* This script adds custom heading ids to all files in the docs directory.
|
||||
* The headings in our API reference may have format such as
|
||||
|
||||
+ ### `opacity` (Number, optional)
|
||||
+ ### `opacity?: number`
|
||||
+ ### `getPosition` ([Function](../../developer-guide/using-layers.md#accessors), optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
|
||||
+ ### `needsRedraw(options?: {clearRedrawFlags?: boolean}): string | false`
|
||||
|
||||
* The default generated hash id by Docusaurus will be something like:
|
||||
|
||||
+ #-opacity-number-optional
|
||||
+ #-opacity-number-
|
||||
+ #-getposition-functiondeveloper-guideusing-layersmdaccessors-optional-transition-enabledhttpsimgshieldsiobadgetransition-enabled-greensvgstyleflat-square
|
||||
+ #-needsredraw-options-clearredrawflags-boolean-string-false-
|
||||
|
||||
* They are long, difficult to read, subject to how the documentation is written, and when the call signature changes.
|
||||
* This script appends a custom id tag to the end of such headings, so that their hash ids will look like:
|
||||
|
||||
+ #opacity
|
||||
+ #opacity
|
||||
+ #getposition
|
||||
+ #needsredraw
|
||||
|
||||
*/
|
||||
const fs = require('fs/promises');
|
||||
const path = require('path');
|
||||
|
||||
const docsDir: string = path.resolve(__dirname, '../docs');
|
||||
/** Should match if the line is a header */
|
||||
const headerTest = /^(#+)\s+(?<headerContent>.*?)\s*(?<customId>\{#[\w\-]+\})?$/;
|
||||
/** Should match if the header describes an API */
|
||||
const apiTest = /^`((?<code>\w+)[^`]*)`(\s*\(.*?\)|:.*?|$)/;
|
||||
|
||||
test();
|
||||
main();
|
||||
|
||||
/** Test that getCustomId handles different formats correctly */
|
||||
function test() {
|
||||
expect(
|
||||
getCustomId(
|
||||
`The line width of each object, in units specified by widthUnits (default pixels). `
|
||||
)?.[2],
|
||||
undefined,
|
||||
'not header'
|
||||
);
|
||||
expect(getCustomId(`## Learning deck.gl`)?.[2], undefined, 'does not contain code');
|
||||
expect(getCustomId(`## Changes to \`TileLayer\``)?.[2], undefined, 'is not api');
|
||||
expect(getCustomId(`## \`pickObjects\``)?.[2], '{#pickobjects}', 'single word api');
|
||||
expect(getCustomId(`## \`@deck.gl/extensions\``)?.[2], undefined, 'Package name');
|
||||
expect(
|
||||
getCustomId(`## \`strokeOpacity\` (Number)`)?.[2],
|
||||
'{#strokeopacity}',
|
||||
'with type annotation 1'
|
||||
);
|
||||
expect(
|
||||
getCustomId(`## \`backgroundPadding:number[]\``)?.[2],
|
||||
'{#backgroundpadding}',
|
||||
'with type annotation 2'
|
||||
);
|
||||
expect(
|
||||
getCustomId(`## \`onBeforeRender(gl: WebGLRenderingContext)\``)?.[2],
|
||||
'{#onbeforerender}',
|
||||
'with call signature'
|
||||
);
|
||||
expect(
|
||||
getCustomId(
|
||||
`##### \`getWidth\` ([Function](../../developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")`
|
||||
)?.[2],
|
||||
'{#getwidth}',
|
||||
'with extra flag'
|
||||
);
|
||||
console.log('All tests pass!\n');
|
||||
}
|
||||
|
||||
/** Traverse all files in the docs directory, append custom ids if necessary */
|
||||
async function main() {
|
||||
const files = await listFiles(docsDir, '.md');
|
||||
for (const f of files) {
|
||||
await processFile(f);
|
||||
}
|
||||
}
|
||||
|
||||
/** Parse a single line of text in a .md file.
|
||||
* @returns new content in 3 parts if custom id is needed, null otherwise.
|
||||
*/
|
||||
function getCustomId(line: string): [hash: string, headerContent: string, customId: string] | null {
|
||||
const m = line.trim().match(headerTest);
|
||||
if (!m) {
|
||||
return null;
|
||||
}
|
||||
const m1 = m.groups!.headerContent.match(apiTest);
|
||||
if (!m1) {
|
||||
return null;
|
||||
}
|
||||
const customId = m1.groups!.code.toLowerCase();
|
||||
return [m[1], m[2], `{#${customId}}`];
|
||||
}
|
||||
|
||||
/** Process a md file. Rewrites the file content if custom ids are needed. */
|
||||
async function processFile(path: string): Promise<void> {
|
||||
const context = await fs.readFile(path, {encoding: 'utf-8'});
|
||||
let changed = false;
|
||||
const lines = context.split('\n').map(line => {
|
||||
const customId = getCustomId(line);
|
||||
if (customId) {
|
||||
changed = true;
|
||||
return customId.join(' ');
|
||||
}
|
||||
return line;
|
||||
});
|
||||
if (changed) {
|
||||
console.log(path);
|
||||
await fs.writeFile(path, lines.join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
/** Recursively get all files within the given directory. */
|
||||
async function listFiles(path: string, extension: string): Promise<string[]> {
|
||||
const result: string[] = [];
|
||||
const items = await fs.readdir(path);
|
||||
for (const item of items) {
|
||||
const itemPath = `${path}/${item}`;
|
||||
const info = await fs.lstat(itemPath);
|
||||
if (item.endsWith(extension) && info.isFile()) {
|
||||
result.push(itemPath);
|
||||
} else if (info.isDirectory()) {
|
||||
const files = await listFiles(itemPath, extension);
|
||||
result.push(...files);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/* Test utils */
|
||||
|
||||
function expect(value1: any, value2: any, message: string) {
|
||||
if (value1 === value2) {
|
||||
console.log('Ok', message, value2 || '');
|
||||
} else {
|
||||
console.log('Not ok', message);
|
||||
throw new Error(`Expect ${value2}, got ${value1}`);
|
||||
}
|
||||
}
|
||||
|
||||
16722
website/yarn.lock
16722
website/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user