-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(FullscreenControl): add FullscreenControl
- Loading branch information
1 parent
b434cac
commit 4776dd8
Showing
8 changed files
with
140 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| - A `NavigationControl` control contains zoom buttons and a compass. | ||
| - Geolocate the user and then track their current location on the map using the `GeolocateControl`. | ||
| - A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode. | ||
| - A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground. | ||
| - An `AttributionControl` control presents the map's attribution information. | ||
|
|
||
| ```jsx | ||
| <MapGL | ||
| style={{ width: '100%', height: '400px' }} | ||
| mapStyle='mapbox://styles/mapbox/light-v9' | ||
| accessToken={MAPBOX_ACCESS_TOKEN} | ||
| latitude={37.78} | ||
| longitude={-122.41} | ||
| zoom={11} | ||
| attributionControl={false} | ||
| > | ||
| <NavigationControl showCompass showZoom position='top-right' /> | ||
| <GeolocateControl position='top-right' /> | ||
| <FullscreenControl position='top-right' /> | ||
| <AttributionControl | ||
| compact={false} | ||
| position='bottom-right' | ||
| customAttribution='Custom attribution' | ||
| /> | ||
| <ScaleControl unit='metric' position='bottom-right' /> | ||
| </MapGL> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode. | ||
|
|
||
| ```jsx | ||
| <MapGL | ||
| style={{ width: '100%', height: '400px' }} | ||
| mapStyle='mapbox://styles/mapbox/light-v9' | ||
| accessToken={MAPBOX_ACCESS_TOKEN} | ||
| latitude={37.78} | ||
| longitude={-122.41} | ||
| zoom={11} | ||
| > | ||
| <FullscreenControl position='top-left' /> | ||
| </MapGL> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| // @flow | ||
|
|
||
| import { PureComponent, createElement } from 'react'; | ||
|
|
||
| import MapContext from '../MapContext'; | ||
| import mapboxgl from '../../utils/mapbox-gl'; | ||
|
|
||
| type Props = { | ||
| /** | ||
| * container is the compatible DOM element which should be | ||
| * made full screen. By default, the map container element | ||
| * will be made full screen. | ||
| */ | ||
| container: string, | ||
|
|
||
| /* A string representing the position of the control on the map. */ | ||
| position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | ||
| }; | ||
|
|
||
| /** | ||
| * A `FullscreenControl` control contains a button for toggling the map in | ||
| * and out of fullscreen mode. | ||
| */ | ||
| class FullscreenControl extends PureComponent<Props> { | ||
| _map: MapboxMap; | ||
|
|
||
| _control: MapboxFullscreenControl; | ||
|
|
||
| static defaultProps = { | ||
| position: 'top-right' | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| const map: MapboxMap = this._map; | ||
| const { container, position } = this.props; | ||
|
|
||
| const control: MapboxFullscreenControl = new mapboxgl.FullscreenControl({ | ||
| container | ||
| }); | ||
|
|
||
| map.addControl(control, position); | ||
| this._control = control; | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| if (!this._map) { | ||
| return; | ||
| } | ||
|
|
||
| this._map.removeControl(this._control); | ||
| } | ||
|
|
||
| render() { | ||
| return createElement(MapContext.Consumer, {}, (map) => { | ||
| if (map) { | ||
| this._map = map; | ||
| } | ||
| return null; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export default FullscreenControl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters