Skip to content

Commit bb553e7

Browse files
PessimistressPessimistress
authored
v7.1 docs (visgl#2189)
1 parent 2bf7ca0 commit bb553e7

21 files changed

+850
-361
lines changed

‎docs/api-reference/attribution-control.md

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,86 @@
11
# AttributionControl
22

3-
React component that wraps [AttributionControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol).
3+
React component that wraps the base library's `AttributionControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/markers/#attributioncontrol)).
44

5-
```js
5+
6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
9+
<Tabs groupId="map-library">
10+
<TabItem value="mapbox" label="Mapbox">
11+
12+
```tsx
613
import * as React from 'react';
714
import Map, {AttributionControl} from 'react-map-gl';
815

916
function App() {
1017
return <Map
11-
mapLib={import('mapbox-gl')}
18+
mapboxAccessToken="<Mapbox access token>"
1219
initialViewState={{
1320
longitude: -100,
1421
latitude: 40,
1522
zoom: 3.5
1623
}}
1724
mapStyle="mapbox://styles/mapbox/streets-v9"
18-
{
19-
// disable the default attribution
20-
}
25+
// disable the default attribution
26+
attributionControl={false}
27+
>
28+
<AttributionControl customAttribution="Map design by me" />
29+
</Map>;
30+
}
31+
```
32+
33+
</TabItem>
34+
<TabItem value="maplibre" label="Maplibre">
35+
36+
```tsx
37+
import * as React from 'react';
38+
import Map, {AttributionControl} from 'react-map-gl/maplibre';
39+
40+
function App() {
41+
return <Map
42+
initialViewState={{
43+
longitude: -100,
44+
latitude: 40,
45+
zoom: 3.5
46+
}}
47+
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
48+
// disable the default attribution
2149
attributionControl={false}
2250
>
2351
<AttributionControl customAttribution="Map design by me" />
2452
</Map>;
2553
}
2654
```
2755

56+
</TabItem>
57+
</Tabs>
58+
2859
## Properties
2960

30-
Note that the following properties are not reactive. They are only used when the component first mounts.
61+
### Reactive Properties
3162

32-
#### `compact`: boolean | undefined {#compact}
63+
#### `style`: CSSProperties {#style}
64+
65+
CSS style override that applies to the control's container.
66+
67+
### Other Properties
3368

34-
- If `true` , force a compact attribution that shows the full attribution on mouse hover.
35-
- If `false` , force the full attribution control.
36-
- If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide.
69+
The properties in this section are not reactive. They are only used when the component first mounts.
3770

38-
Note that your attribution must adhere to Mapbox's [guidelines](https://docs.mapbox.com/help/getting-started/attribution/).
71+
Any options supported by the `AttributionControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/markers/#attributioncontrol)), such as
3972

40-
#### `customAttribution`: string | string[] {#customattribution}
73+
- `compact`
74+
- `customAttribution`
4175

42-
String or strings to show in addition to any other attributions.
76+
Plus the following:
4377

4478
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
4579

4680
Default: `'bottom-right'`
4781

4882
Placement of the control relative to the map.
4983

50-
#### `style`: CSSProperties {#style}
51-
52-
CSS style override that applies to the control's container.
5384

5485
## Source
5586

‎docs/api-reference/fullscreen-control.md

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
# FullscreenControl
22

3-
React component that wraps [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol).
3+
React component that wraps the base library's `FullscreenControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/markers/#fullscreencontrol)).
44

5-
```js
5+
6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
9+
<Tabs groupId="map-library">
10+
<TabItem value="mapbox" label="Mapbox">
11+
12+
```tsx
613
import * as React from 'react';
714
import Map, {FullscreenControl} from 'react-map-gl';
815

916
function App() {
1017
return <Map
11-
mapLib={import('mapbox-gl')}
18+
mapboxAccessToken="<Mapbox access token>"
1219
initialViewState={{
1320
longitude: -100,
1421
latitude: 40,
@@ -21,9 +28,42 @@ function App() {
2128
}
2229
```
2330

31+
</TabItem>
32+
<TabItem value="maplibre" label="Maplibre">
33+
34+
```tsx
35+
import * as React from 'react';
36+
import Map, {FullscreenControl} from 'react-map-gl/maplibre';
37+
38+
function App() {
39+
return <Map
40+
initialViewState={{
41+
longitude: -100,
42+
latitude: 40,
43+
zoom: 3.5
44+
}}
45+
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
46+
>
47+
<FullscreenControl />
48+
</Map>;
49+
}
50+
```
51+
52+
</TabItem>
53+
</Tabs>
54+
2455
## Properties
2556

26-
Note that the following properties are not reactive. They are only used when the component first mounts.
57+
### Reactive Properties
58+
59+
#### `style`: CSSProperties {#style}
60+
61+
CSS style override that applies to the control's container.
62+
63+
64+
### Other Properties
65+
66+
The properties in this section are not reactive. They are only used when the component first mounts.
2767

2868
#### `containerId`: string {#containerid}
2969

@@ -35,9 +75,6 @@ Default: `'top-right'`
3575

3676
Placement of the control relative to the map.
3777

38-
#### `style`: CSSProperties {#style}
39-
40-
CSS style override that applies to the control's container.
4178

4279
## Source
4380

‎docs/api-reference/geolocate-control.md

Lines changed: 90 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
# GeolocateControl
22

3-
React component that wraps [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocateControl).
3+
React component that wraps the base library's `GeolocateControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/markers/#geolocatecontrol)).
44

5-
```js
5+
6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
9+
<Tabs groupId="map-library">
10+
<TabItem value="mapbox" label="Mapbox">
11+
12+
```tsx
613
import * as React from 'react';
714
import Map, {GeolocateControl} from 'react-map-gl';
815

916
function App() {
1017
return <Map
11-
mapLib={import('mapbox-gl')}
18+
mapboxAccessToken="<Mapbox access token>"
1219
initialViewState={{
1320
longitude: -100,
1421
latitude: 40,
@@ -21,87 +28,95 @@ function App() {
2128
}
2229
```
2330

24-
## Methods
25-
26-
Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook:
31+
</TabItem>
32+
<TabItem value="maplibre" label="Maplibre">
2733

28-
```js
34+
```tsx
2935
import * as React from 'react';
30-
import Map, {GeolocateControl} from 'react-map-gl';
36+
import Map, {GeolocateControl} from 'react-map-gl/maplibre';
3137

3238
function App() {
33-
const geolocateControlRef = React.useCallback((ref) => {
34-
if (ref) {
35-
// Activate as soon as the control is loaded
36-
ref.trigger();
37-
}
38-
}, []);
39-
40-
return <Map><GeolocateControl ref={geolocateControlRef} /></Map>;
39+
return <Map
40+
initialViewState={{
41+
longitude: -100,
42+
latitude: 40,
43+
zoom: 3.5
44+
}}
45+
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
46+
>
47+
<GeolocateControl />
48+
</Map>;
4149
}
4250
```
4351

44-
#### `trigger()`: boolean {#trigger}
52+
</TabItem>
53+
</Tabs>
4554

46-
Trigger a geolocation event.
55+
## Reference
4756

48-
Returns: `true` if successful.
57+
The underlying native `GeolocateControl` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
58+
You may use it to call any imperative methods:
4959

60+
<Tabs groupId="map-library">
61+
<TabItem value="mapbox" label="Mapbox">
5062

51-
## Properties
63+
```tsx
64+
import * as React from 'react';
65+
import {useRef, useEffect} from 'react';
66+
import Map, {GeolocateControl} from 'react-map-gl';
67+
import type mapboxgl from 'mapbox-gl';
5268

53-
Note that the following properties are not reactive. They are only used when the component first mounts.
69+
function App() {
70+
const geoControlRef = useRef<mapboxgl.GeolocateControl>();
5471

55-
### Tracking options
72+
useEffect(() => {
73+
// Activate as soon as the control is loaded
74+
geoControlRef.current?.trigger();
75+
}, [geoControlRef.current]);
5676

57-
#### `positionOptions`: [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) {#positionoptions}
77+
return <Map>
78+
<GeolocateControl ref={geoControlRef} />
79+
</Map>;
80+
}
81+
```
5882

59-
A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object
83+
</TabItem>
84+
<TabItem value="maplibre" label="Maplibre">
6085

61-
#### `trackUserLocation`: boolean {#trackuserlocation}
6286

63-
Default: `false`
87+
```tsx
88+
import * as React from 'react';
89+
import {useRef, useEffect} from 'react';
90+
import Map, {GeolocateControl} from 'react-map-gl/maplibre';
91+
import type maplibregl from 'maplibre-gl';
6492

65-
If `true` the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes.
93+
function App() {
94+
const geoControlRef = useRef<maplibregl.GeolocateControl>();
6695

67-
### Render options
96+
useEffect(() => {
97+
// Activate as soon as the control is loaded
98+
geoControlRef.current?.trigger();
99+
}, [geoControlRef.current]);
68100

69-
#### `fitBoundsOptions`: [FitBoundsOptions](./types.md#fitboundsoptions) {#fitboundsoptions}
101+
return <Map>
102+
<GeolocateControl ref={geoControlRef} />
103+
</Map>;
104+
}
105+
```
70106

71-
Default: `{maxZoom: 15}`
107+
</TabItem>
108+
</Tabs>
72109

73-
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.
74110

75-
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
111+
## Properties
76112

77-
Default: `'top-right'`
78113

79-
Placement of the control relative to the map.
114+
### Reactive Properties
80115

81116
#### `style`: CSSProperties {#style}
82117

83118
CSS style override that applies to the control's container.
84119

85-
#### `showAccuracyCircle`: boolean {#showaccuracycircle}
86-
87-
Default: `true`
88-
89-
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.
90-
This only has effect if `showUserLocation` is `true`.
91-
92-
#### `showUserHeading`: boolean {#showuserheading}
93-
94-
Default: `false`
95-
96-
If `true`, an arrow will be drawn next to the user location dot indicating the device's heading.
97-
This only has affect when `trackUserLocation` is `true`.
98-
99-
#### `showUserLocation`: boolean {#showuserlocation}
100-
101-
Default: `true`
102-
103-
Show a dot on the map at the user's location. Set to `false` to disable.
104-
105120
### Callbacks
106121

107122
#### `onGeolocate`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#ongeolocate}
@@ -125,6 +140,27 @@ Called when the GeolocateControl changes to the active lock state.
125140
Called when the GeolocateControl changes to the background state.
126141

127142

143+
### Other Properties
144+
145+
The properties in this section are not reactive. They are only used when the component first mounts.
146+
147+
Any options supported by the `GeolocateControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/markers/#geolocatecontrol)), such as
148+
149+
- `positionOptions`
150+
- `fitBoundsOptions`
151+
- `trackUserLocation`
152+
- `showAccuracyCircle`
153+
- `showUserLocation`
154+
155+
Plus the following:
156+
157+
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
158+
159+
Default: `'bottom-right'`
160+
161+
Placement of the control relative to the map.
162+
163+
128164
## Source
129165

130166
[geolocate-control.ts](https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/geolocate-control.ts)

0 commit comments

Comments
 (0)