CD2H gitForager

boundlessgeo/react-native-maps

Name: react-native-maps

Owner: Boundless

Description: React Native Mapview component for iOS + Android

Forked from: react-community/react-native-maps

Created: 2016-08-29 16:51:21.0

Updated: 2017-08-16 15:34:27.0

Pushed: 2017-05-22 18:51:50.0

Homepage: null

Size: 1306

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-native-maps

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 /> Component API

<MapView.Marker /> Component API

<MapView.Callout /> Component API

<MapView.Polygon /> Component API

<MapView.Polyline /> Component API

<MapView.Circle /> Component API

General Usage

rt MapView from 'react-native-maps';

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

apView
initialRegion={{
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}}

Using a MapView while controlling the region as state

nitialState() {
turn {
region: {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
},



gionChange(region) {
is.setState({ region });


er() {
turn (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
/>

Rendering a list of markers on a map

View
gion={this.state.region}
RegionChange={this.onRegionChange}

his.state.markers.map(marker => (
<MapView.Marker
  coordinate={marker.latlng}
  title={marker.title}
  description={marker.description}
/>
}
pView>

Rendering a Marker with a custom view

View.Marker coordinate={marker.latlng}>
yCustomMarkerView {...marker} />
pView.Marker>

Rendering a Marker with a custom image

View.Marker
ordinate={marker.latlng}
age={require('../assets/pin.png')}

Rendering a custom Marker with a custom Callout

View.Marker coordinate={marker.latlng}>
yCustomMarkerView {...marker} />
apView.Callout>
<MyCustomCalloutView {...marker} />
MapView.Callout>
pView.Marker>

Draggable Markers

View initialRegion={...}>
apView.Marker draggable
coordinate={this.state.x}
onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}

pView>

Using a custom Tile Overlay

View 
gion={this.state.region}
RegionChange={this.onRegionChange}

apView.UrlTile
**
 The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
 For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
/
urlTemplate={this.state.urlTemplate}

pView>

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

s-permission android:name="android.permission.INTERNET" />

For IOS: configure App Transport Security in your app

Customizing the map style

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

he generated json object
tyle = [ ... ]

er() {
turn (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
  customMapStyle={mapStyle}
/>

For iOS, in addition to providing the mapStyle you will need to do the following

rt MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

..

View
ovider={PROVIDER_GOOGLE}
stomMapStyle={MapStyle}

Then add the AirGoogleMaps directory:

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

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

Examples

MapView Events

The <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 /> 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 />, <Polygon />, and <Polyline /> are available to pass in as children to the <MapView /> 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 />'s title and description props.

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

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.

Animated Region

The MapView can accept an MapView.AnimatedRegion value as its region prop. This allows you to utilize the Animated API to control the map's center and zoom.

rt MapView from 'react-native-maps';

nitialState() {
turn {
region: new MapView.AnimatedRegion({
  latitude: LATITUDE,
  longitude: LONGITUDE,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA,
}),



gionChange(region) {
is.state.region.setValue(region);


er() {
turn (
<MapView.Animated
  region={this.state.region}
  onRegionChange={this.onRegionChange}
/>

Animated Marker Position

Markers can also accept an AnimatedRegion value as a coordinate.

nitialState() {
turn {
coordinate: new MapView.AnimatedRegion({
  latitude: LATITUDE,
  longitude: LONGITUDE,
}),



onentWillReceiveProps(nextProps) {
 (this.props.coordinate !== nextProps.coordinate) {
this.state.coordinate.timing({
  ...nextProps.coordinate,
  duration: 500
}).start();



er() {
turn (
<MapView initialRegion={...}>
  <MapView.Marker.Animated coordinate={this.state.coordinate} />
</MapView>

Take Snapshot of map

nitialState() {
turn {
coordinate: {
  latitude: LATITUDE,
  longitude: LONGITUDE,
},



Snapshot () {
 'takeSnapshot' takes a config object with the
 following options
nst 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')
;
apshot.then((uri) => {
this.setState({ mapSnapshot: uri });
;


er() {
turn (
<View>
  <MapView initialRegion={...} ref={map => { this.map = map }}>
    <MapView.Marker coordinate={this.state.coordinate} />
  </MapView>
  <Image source={{ uri: this.state.mapSnapshot.uri }} />
  <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.

t styles = StyleSheet.create({
p: {
...StyleSheet.absoluteFillObject,

sx
View
yle={styles.map}
 other props

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:

w>
extInput/>
apView/>
ew>

Good:

w>
apView/>
extInput/>
ew>

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.

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.