Skip to content

MapView

Jump to bottom
mamtasharma117 edited this page Mar 15, 2021 · 9 revisions

Mapmyindia Maps SDK for React Native beta

Welcome to the mapmyindia-map-react-native-beta wiki!

<MapmyIndiaGL.MapView />

### MapView backed by Mapmyindia Native

props

Prop Type Default Required Description
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.
preferredFramesPerSecond number none false iOS: The preferred frame rate at which the map view is rendered.
The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,
which will adaptively set the preferred frame rate based on the capability of
the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.

Android: The maximum frame rate at which the map view is rendered, but it can't excess the ability of device hardware.
This property can be set to arbitrary integer values.
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
compassEnabled bool none false Enable/Disable the compass from appearing on the map
compassViewPosition string none false Position the compass on a corner of the map
compassViewMargins object none false Add margins to the compass with x and y values
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
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.
onUserLocationUpdate func none false This event is triggered when the user location is updated.
onDidFinishLoadingStyle func none false This event is triggered when a style has finished loading.
regionWillChangeDebounceTime number 10 false The emitted frequency of regionwillchange events
regionDidChangeDebounceTime number 500 false The emitted frequency of regiondidchange events
onMapError func none false This event is triggered when some error occurred during map loading.For Details

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'])

setCamera()

Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.

arguments
Name Type Required Description

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();

setSourceVisibility(visible, sourceId[, sourceLayerId])

Sets the visibility of all the layers referencing the specified sourceLayerId and/or sourceId

arguments
Name Type Required Description
visible boolean Yes Visibility of the layers
sourceId String Yes Identifier of the target source (e.g. 'composite')
sourceLayerId String No Identifier of the target source-layer (e.g. 'building') 
await this._map.setSourceVisibility(false, 'composite', 'building')

Using night and day themes

Setting Night theme

<MapmyIndiaGL.MapView style={{flex: 1}} styleURL={MapmyIndiaGL.StyleURL.Dark} onPress={(event)=>this.onPress(event)}>
          <MapmyIndiaGL.Camera
            zoomLevel={12}
            ref={c => (this.camera = c)}
            centerCoordinate={DEFAULT_CENTER_COORDINATE}
          />
        </MapmyIndiaGL.MapView>

Setting Day theme

<MapmyIndiaGL.MapView style={{flex: 1}} styleURL={MapmyIndiaGL.StyleURL.Street} onPress={(event)=>this.onPress(event)}>
          <MapmyIndiaGL.Camera
            zoomLevel={12}
            ref={c => (this.camera = c)}
            centerCoordinate={DEFAULT_CENTER_COORDINATE}
          />
        </MapmyIndiaGL.MapView>

For any queries and support, please contact:

Email Email us at apisupport@mapmyindia.com

Stack Overflow Ask a question under the mapmyindia-api

Support Need support? contact us!

Blog Read about the latest updates & customer stories

© Copyright 2019. CE Info Systems Pvt. Ltd. All Rights Reserved. | Terms & Conditions

Clone this wiki locally