Github url

react-native-maps

by react-native-community

react-native-community /react-native-maps

React Native Mapview component for iOS + Android

11.2K Stars 3.8K Forks Last release: 4 months ago (v0.27.1) MIT License 1.0K Commits 70 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-maps npm version

React Native Map components for iOS + Android

Installation

See Installation Instructions.

See Setup Instructions for the Included Example Project.

Compatibility

Due to the rapid changes being made in the React Native ecosystem, we are not officially going to support this module on anything but the latest version of React Native. With that said, we will do our best to stay compatible with older versions as much that is practical, and the peer dependency of this requirement is set to

"react-native": "\*"

explicitly for this reason. If you are using an older version of React Native with this module though, some features may be buggy.

Note about React requires

Since react-native 0.25.0,

React

should be required from

node\_modules

. React Native versions from 0.18 should be working out of the box, for lower versions you should add

react

as a dependency in your

package.json

.

Component API

[

<mapview></mapview>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md)

[

<marker></marker>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/marker.md)

[

<callout></callout>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/callout.md)

[

<polygon></polygon>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/polygon.md)

[

<polyline></polyline>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/polyline.md)

[

<circle></circle>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/circle.md)

[

<overlay></overlay>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/overlay.md)

[

<heatmap></heatmap>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/heatmap.md)

[

<geojson></geojson>

Component API](https://github.com/react-native-community/react-native-maps/blob/master/docs/geojson.md)

General Usage

import MapView from 'react-native-maps';

or

var MapView = require('react-native-maps');

This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself. This provides an intuitive and react-like API for declaratively controlling features on the map.

Rendering a Map with an initial region

MapView

<mapview initialregion="{{" latitude: longitude: latitudedelta: longitudedelta:></mapview>

Using a MapView while controlling the region as state

getInitialState() { return { region: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }, }; } onRegionChange(region) { this.setState({ region }); } render() { return ( <mapview region="{this.state.region}" onregionchange="{this.onRegionChange}"></mapview> ); }

Rendering a list of markers on a map

import { Marker } from 'react-native-maps';<mapview region="{this.state.region}" onregionchange="{this.onRegionChange}">
  {this.state.markers.map(marker =&gt; (
    <marker coordinate="{marker.latlng}" title="{marker.title}" description="{marker.description}"></marker>
  ))}
</mapview>

Rendering a Marker with a custom view

<marker coordinate="{marker.latlng}">
  <mycustommarkerview></mycustommarkerview>
</marker>

Rendering a Marker with a custom image

<marker coordinate="{marker.latlng}" image="{require('../assets/pin.png')}"></marker>

Rendering a custom Marker with a custom Callout

import { Callout } from 'react-native-maps';<marker coordinate="{marker.latlng}">
  <mycustommarkerview></mycustommarkerview>
  <callout>
    <mycustomcalloutview></mycustomcalloutview>
  </callout>
</marker>

Draggable Markers

<mapview initialregion="{...}">
  <marker draggable coordinate="{this.state.x}" ondragend="{(e)"> this.setState({ x: e.nativeEvent.coordinate })}
  /&gt;
</marker></mapview>

Using a custom Tile Overlay

Tile Overlay using tile server

import { UrlTile } from 'react-native-maps';<mapview region="{this.state.region}" onregionchange="{this.onRegionChange}">
  <urltile the url template of tile server. patterns will be replaced at runtime for example http: urltemplate="{this.state.urlTemplate}" maximum zoom level this overlay. corresponds to maximumz setting in mktileoverlay. ios only. flipy allows tiles with inverted y coordinates bottom left map used. its default value is false.></urltile>
</mapview>

For Android: add the following line in your AndroidManifest.xml

xml<uses-permission android:name="android.permission.INTERNET"></uses-permission>

For IOS: configure App Transport Security in your app

Tile Overlay using local tiles

Tiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage.

import { LocalTile } from 'react-native-maps';<mapview region="{this.state.region}" onregionchange="{this.onRegionChange}">
  <localtile the path template of locally stored tiles. patterns will be replaced at runtime for example pathtemplate="{this.state.pathTemplate}" size provided local tiles or tilesize="{256}"></localtile>
</mapview>

For Android: LocalTile is still just overlay over original map tiles. It means that if device is online, underlying tiles will be still downloaded. If original tiles download/display is not desirable set mapType to 'none'. For example: ``` <MapView mapType={Platform.OS == "android" ? "none" : "standard"}

See OSM Wiki for how to download tiles for offline usage.

Overlaying other components on the map

Place components you that wish to overlay

MapView

underneath the

MapView

closing tag. Absolutely position these elements.

render() { return ( <mapview region="{this.state.region}"></mapview><overlaycomponent style="{{position:" bottom:></overlaycomponent> ); }

Customizing the map style

Create the json object, or download a generated one from the google style generator.

// The generated json object mapStyle = [...] render() { return ( <mapview region="{this.state.region}" onregionchange="{this.onRegionChange}" custommapstyle="{mapStyle}"></mapview> ); }

For iOS, in addition to providing the

mapStyle

you will need to do the following

import MapView, { PROVIDER\_GOOGLE } from 'react-native-maps' // ...<mapview provider="{PROVIDER_GOOGLE}" custommapstyle="{MapStyle}">
</mapview>

Then add the AirGoogleMaps directory:

https://github.com/react-native-community/react-native-maps/blob/1e71a21f39e7b88554852951f773c731c94680c9/docs/installation.md#ios

An unofficial step-by-step guide is also available at https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0

Examples

To run examples:

npm i npm start #Android npm run run:android #iOS npm run build:ios npm run run:ios

MapView Events

The

<mapview></mapview>

component and its child components have several events that you can subscribe to. This example displays some of them in a log as a demonstration.

Tracking Region / Location

Programmatically Changing Region

One can change the mapview's position using refs and component methods, or by passing in an updated

region

prop. The component methods will allow one to animate to a given position like the native API could.

Changing the style of the map

Arbitrary React Views as Markers

Using the MapView with the Animated API

The

<mapview></mapview>

component can be made to work with the Animated API, having the entire

region

prop be declared as an animated value. This allows one to animate the zoom and position of the MapView along with other gestures, giving a nice feel.

Further, Marker views can use the animated API to enhance the effect.

Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views. Not sure if this can be worked around yet or not.

Markers' coordinates can also be animated, as shown in this example:

Polygon Creator

Other Overlays

So far,

<circle></circle>

,

<polygon></polygon>

, and

<polyline></polyline>

are available to pass in as children to the

<mapview></mapview>

component.

Gradient Polylines (iOS MapKit only)

Gradient polylines can be created using the

strokeColors

prop of the

<polyline></polyline>

component.

Default Markers

Default markers will be rendered unless a custom marker is specified. One can optionally adjust the color of the default marker by using the

pinColor

prop.

Custom Callouts

Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view.

Additionally, you can fall back to the standard behavior of just having a title/description through the

<marker></marker>

's

title

and

description

props.

Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble.

To handle press on specific subview of callout use

<calloutsubview></calloutsubview>

with

onPress

. See

Callouts.js

example.

Image-based Markers

Markers can be customized by just using images, and specified using the

image

prop.

Draggable Markers

Markers are draggable, and emit continuous drag events to update other UI during drags.

Lite Mode ( Android )

Enable lite mode on Android with

liteMode

prop. Ideal when having multiple maps in a View or ScrollView.

On Poi Click (Google Maps Only)

Poi are clickable, you can catch the event to get its information (usually to get the full detail from Google Place using the placeId).

Animated Region

The MapView can accept an

AnimatedRegion

value as its

region

prop. This allows you to utilize the Animated API to control the map's center and zoom.

import MapView, { AnimatedRegion, Animated } from 'react-native-maps'; getInitialState() { return { region: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: LATITUDE\_DELTA, longitudeDelta: LONGITUDE\_DELTA, }), }; } onRegionChange(region) { this.state.region.setValue(region); } render() { return ( <animated region="{this.state.region}" onregionchange="{this.onRegionChange}"></animated> ); }

Animated Marker Position

Markers can also accept an

AnimatedRegion

value as a coordinate.

import Mapview, { AnimatedRegion, Marker } from 'react-native-maps'; getInitialState() { return { coordinate: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, }), }; } componentWillReceiveProps(nextProps) { const duration = 500 if (this.props.coordinate !== nextProps.coordinate) { if (Platform.OS === 'android') { if (this.marker) { this.marker.\_component.animateMarkerToCoordinate( nextProps.coordinate, duration ); } } else { this.state.coordinate.timing({ ...nextProps.coordinate, duration }).start(); } } } render() { return ( <mapview initialregion="{...}">
      <mapview.marker.animated ref="{marker"> { this.marker = marker }}
        coordinate={this.state.coordinate}
      /&gt;
    </mapview.marker.animated></mapview> ); }

If you need a smoother animation to move the marker on Android, you can modify the previous example:

// ... componentWillReceiveProps(nextProps) { const duration = 500 if (this.props.coordinate !== nextProps.coordinate) { if (Platform.OS === 'android') { if (this.marker) { this.marker.\_component.animateMarkerToCoordinate( nextProps.coordinate, duration ); } } else { this.state.coordinate.timing({ ...nextProps.coordinate, duration }).start(); } } } render() { return ( <mapview initialregion="{...}">
      <marker.animated ref="{marker"> { this.marker = marker }}
        coordinate={this.state.coordinate}
      /&gt;
    </marker.animated></mapview> ); }

Take Snapshot of map

import MapView, { Marker } from 'react-native-maps'; getInitialState() { return { coordinate: { latitude: LATITUDE, longitude: LONGITUDE, }, }; } takeSnapshot () { // 'takeSnapshot' takes a config object with the // following options const snapshot = this.map.takeSnapshot({ width: 300, // optional, when omitted the view-width is used height: 300, // optional, when omitted the view-height is used region: {..}, // iOS only, optional region to render format: 'png', // image formats: 'png', 'jpg' (default: 'png') quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1) result: 'file' // result types: 'file', 'base64' (default: 'file') }); snapshot.then((uri) =\> { this.setState({ mapSnapshot: uri }); }); } render() { return ( <view>
      <mapview initialregion="{...}" ref="{map"> { this.map = map }}&gt;
        <marker coordinate="{this.state.coordinate}"></marker>
      </mapview>
      <image source="{{" uri: this.state.mapsnapshot.uri></image>
      <touchableopacity onpress="{this.takeSnapshot}">
        Take Snapshot
      </touchableopacity>
    </view> ); }

Zoom to Specified Markers

Pass an array of marker identifiers to have the map re-focus.

Zoom to Specified Coordinates

Pass an array of coordinates to focus a map region on said coordinates.

Troubleshooting

My map is blank

  • Make sure that you have properly installed react-native-maps.
  • Check in the logs if there is more informations about the issue.
  • Try setting the style of the MapView to an absolute position with top, left, right and bottom values set.
  • Make sure you have enabled Google Maps API in Google developer console
const styles = StyleSheet.create({ map: { ...StyleSheet.absoluteFillObject, }, });
<mapview style="{styles.map}" other props></mapview>

Inputs don't focus

  • When inputs don't focus or elements don't respond to tap, look at the order of the view hierarchy, sometimes the issue could be due to ordering of rendered components, prefer putting MapView as the first component.

Bad:

<view>
  <textinput></textinput>
  <mapview></mapview>
</view>

Good:

<view>
  <mapview></mapview>
  <textinput></textinput>
</view>

Children Components Not Re-Rendering

Components that aren't declared by this library (Ex: Markers, Polyline) must not be children of the MapView component due to MapView's unique rendering methodology. Have your custom components / views outside the MapView component and position absolute to ensure they only re-render as needed. Example: Bad:

<view style="{StyleSheet.absoluteFillObject}">
    <mapview style="{StyleSheet.absoluteFillObject}">
      <view style="{{" position: top: left:></view>
    </mapview>
  </view>

Good:

<view style="{StyleSheet.absoluteFillObject}">
    <mapview style="{StyleSheet.absoluteFillObject}"></mapview>
    <view style="{{" position: top: left:></view>
  </view>

Source: https://github.com/react-native-community/react-native-maps/issues/1901

License

Copyright (c) 2017 Airbnb Licensed under the The MIT License (MIT) (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://raw.githubusercontent.com/airbnb/react-native-maps/master/LICENSE Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.