Skip to content

Latest commit

 

History

History
290 lines (190 loc) · 11.8 KB

MapView.md

File metadata and controls

290 lines (190 loc) · 11.8 KB

<MapboxGL.MapView />

MapView backed by Mapbox Native GL

props

Prop Type Default Required Description
animated bool false false Animates changes between pitch and bearing
centerCoordinate arrayOf none false Initial center coordinate on map [lng, lat]
visibleCoordinateBounds arrayOf none false Initial bounds on map [[lng, lat], [lng, lat]]
showUserLocation bool none false Shows the users location on the map
userTrackingMode number MapboxGL.UserTrackingModes.None false The mode used to track the user location on the map
userLocationVerticalAlignment number none false The vertical alignment of the user location within in map. This is only enabled while tracking the users location.
contentInset union none false The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
heading number 0 false Initial heading on map
pitch number 0 false Initial pitch on map
style any none false Style for wrapping React Native View
styleURL string MapboxGL.StyleURL.Street false Style URL for map
zoomLevel number 16 false Initial zoom level of map
minZoomLevel number none false Min zoom level of map
maxZoomLevel number none false Max zoom level of map
localizeLabels bool false false Automatically change the language of the map labels to the system’s preferred language,
this is not something that can be toggled on/off
zoomEnabled bool none false Enable/Disable zoom on the map
scrollEnabled bool true false Enable/Disable scroll on the map
pitchEnabled bool true false Enable/Disable pitch on map
rotateEnabled bool true false Enable/Disable rotation on map
attributionEnabled bool true false The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,
requires these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.
If that applies to this map view, do not hide this view or remove any notices from it.

You are additionally required to provide users with the option to disable anonymous usage and location sharing (telemetry).
If this view is hidden, you must implement this setting elsewhere in your app. See our website for Android and iOS for implementation details.

Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES
to your Info.plist
logoEnabled bool true false Enable/Disable the logo on the map.
compassEnabled bool none false Enable/Disable the compass from appearing on the map
surfaceView bool false false [Android only] Enable/Disable use of GLSurfaceView insted of TextureView.
onPress func none false Map press listener, gets called when a user presses the map
onLongPress func none false Map long press listener, gets called when a user long presses the map
onRegionWillChange func none false This event is triggered whenever the currently displayed map region is about to change.
onRegionIsChanging func none false This event is triggered whenever the currently displayed map region is changing.
onRegionDidChange func none false This event is triggered whenever the currently displayed map region finished changing
onUserLocationUpdate func none false This event is triggered whenever the location engine receives a location update
onWillStartLoadingMap func none false This event is triggered when the map is about to start loading a new map style.
onDidFinishLoadingMap func none false This is triggered when the map has successfully loaded a new map style.
onDidFailLoadingMap func none false This event is triggered when the map has failed to load a new map style.
onWillStartRenderingFrame func none false This event is triggered when the map will start rendering a frame.
onDidFinishRenderingFrame func none false This event is triggered when the map finished rendering a frame.
onDidFinishRenderingFrameFully func none false This event is triggered when the map fully finished rendering a frame.
onWillStartRenderingMap func none false This event is triggered when the map will start rendering the map.
onDidFinishRenderingMap func none false This event is triggered when the map finished rendering the map.
onDidFinishRenderingMapFully func none false This event is triggered when the map fully finished rendering the map.
onDidFinishLoadingStyle func none false This event is triggered when a style has finished loading.
onUserTrackingModeChange func none false This event is triggered when the users tracking mode is changed.
regionWillChangeDebounceTime number 10 false The emitted frequency of regionwillchange events
regionDidChangeDebounceTime number 500 false The emitted frequency of regiondidchange events

methods

getPointInView(coordinate)

Converts a geographic coordinate to a point in the given view’s coordinate system.

arguments
Name Type Required Description
coordinate Array Yes A point expressed in the map view's coordinate system.
const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);

getCoordinateFromView(point)

Converts a point in the given view’s coordinate system to a geographic coordinate.

arguments
Name Type Required Description
point Array Yes A point expressed in the given view’s coordinate system.
const coordinate = await this._map.getCoordinateFromView([100, 100]);

getVisibleBounds()

The coordinate bounds(ne, sw) visible in the users’s viewport.

arguments
Name Type Required Description
const visibleBounds = await this._map.getVisibleBounds();

queryRenderedFeaturesAtPoint(coordinate[, filter][, layerIDs])

Returns an array of rendered map features that intersect with a given point.

arguments
Name Type Required Description
coordinate Array Yes A point expressed in the map view’s coordinate system.
filter Array No A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs Array No A array of layer id's to filter the features by
this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])

queryRenderedFeaturesInRect(bbox[, filter][, layerIDs])

Returns an array of rendered map features that intersect with the given rectangle,
restricted to the given style layers and filtered by the given predicate.

arguments
Name Type Required Description
bbox Array Yes A rectangle expressed in the map view’s coordinate system.
filter Array No A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs Array No A array of layer id's to filter the features by
this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])

fitBounds(northEastCoordinates, southWestCoordinates[, padding][, duration])

Map camera transitions to fit provided bounds

arguments
Name Type Required Description
northEastCoordinates Array Yes North east coordinate of bound
southWestCoordinates Array Yes South west coordinate of bound
padding Number No Camera padding for bound
duration Number No Duration of camera animation
this.map.fitBounds([lng, lat], [lng, lat])
this.map.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
this.map.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
this.map.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)

flyTo(coordinates[, duration])

Map camera will fly to new coordinate

arguments
Name Type Required Description
coordinates Array Yes Coordinates that map camera will jump too
duration Number No Duration of camera animation
this.map.flyTo([lng, lat])
this.map.flyTo([lng, lat], 12000)

moveTo(coordinates[, duration])

Map camera will move to new coordinate at the same zoom level

arguments
Name Type Required Description
coordinates Array Yes Coordinates that map camera will move too
duration Number No Duration of camera animation
this.map.moveTo([lng, lat], 200) // eases camera to new location based on duration
this.map.moveTo([lng, lat]) // snaps camera to new location without any easing

zoomTo(zoomLevel[, duration])

Map camera will zoom to specified level

arguments
Name Type Required Description
zoomLevel Number Yes Zoom level that the map camera will animate too
duration Number No Duration of camera animation
this.map.zoomTo(16)
this.map.zoomTo(16, 100)

setCamera(config)

Map camera will perform updates based on provided config. Advanced use only!

arguments
Name Type Required Description
config Object Yes Camera configuration
this.map.setCamera({
  centerCoordinate: [lng, lat],
  zoom: 16,
  duration: 2000,
})

this.map.setCamera({
  stops: [
    { pitch: 45, duration: 200 },
    { heading: 180, duration: 300 },
  ]
})

takeSnap(writeToDisk)

Takes snapshot of map with current tiles and returns a URI to the image

arguments
Name Type Required Description
writeToDisk Boolean Yes If true will create a temp file, otherwise it is in base64

getZoom()

Returns the current zoom of the map view.

arguments
Name Type Required Description
const zoom = await this._map.getZoom();

getCenter()

Returns the map's geographical centerpoint

arguments
Name Type Required Description
const center = await this._map.getCenter();

showAttribution()

Show the attribution and telemetry action sheet.
If you implement a custom attribution button, you should add this action to the button.

arguments
Name Type Required Description