Skip to content

Commit

Permalink
Merge branch 'master' into fix_crash_for_airmap_reference
Browse files Browse the repository at this point in the history
* master: (31 commits)
  Wider Note column (prevent horisontal scroll) (react-native-maps#3130)
  replaced deprecated bridge.imageLoader calls with moduleForClass API (react-native-maps#3125)
  Implement onUserLocationChange in AIRMap (react-native-maps#2889)
  keep current mapType when taking snapshot (react-native-maps#3120)
  Add mapPadding on iOS maps (react-native-maps#3119)
  [iOS] Expose isAccessibilityElement as a prop (react-native-maps#3115)
  Add supportLibVersion safeguard in gradle build (react-native-maps#3106)
  [0.26.1] Release
  rn 0.60.5 support (react-native-maps#3020)
  "AIRMap" was not found in the UIManager IN "0.26.0" (react-native-maps#3103)
  [0.26.0] Release
  Add Heatmap back in (react-native-maps#3064)
  Fixes NPE while removing already removed marker. (react-native-maps#3032)
  Add flat property binding on Marker for iOS (react-native-maps#3051)
  Add heading to the onUserLocationChange listener (react-native-maps#3045)
  Add onDoublePress callback (react-native-maps#2937)
  Allow using onPanDrag while scrollEnabled=true (react-native-maps#2935)
  updating pods for compile error (react-native-maps#3011)
  add overlay onPress event (react-native-maps#3007)
  Fix playServicesVersion name in installation docs (react-native-maps#3016)
  ...
  • Loading branch information
yuheidapperapps committed Oct 15, 2019
2 parents e47f2da + 348b1ec commit 6a9eba0
Show file tree
Hide file tree
Showing 50 changed files with 1,500 additions and 94 deletions.
18 changes: 18 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
# Change Log
## 0.26.1 (October 3, 2019)

* Android: [#3103](https://github.com/react-native-community/react-native-maps/pull/3103) Support for RN 0.60.5
* Android: [#3103](https://github.com/react-native-community/react-native-maps/pull/3103) "AIRMap" was not found in the UIManager

## 0.26.0 (September 30, 2019)

* iOS: [#2999](https://github.com/react-native-community/react-native-maps/pull/2999) Update GoogleMaps pod to 3.2.0
* iOS: [#2395](https://github.com/react-native-community/react-native-maps/pull/2395) Allow using onPanDrag while scrollEnabled=true
* iOS: [#3051](https://github.com/react-native-community/react-native-maps/pull/3051) Add flat property binding on Marker for iOS
* Android: [#3007](https://github.com/react-native-community/react-native-maps/pull/3007) Add Overlay onPress event
* Android: [#3001](https://github.com/react-native-community/react-native-maps/pull/3001) Add @ReactModule annotation to help turbo modules processor
* Common: [#3045](https://github.com/react-native-community/react-native-maps/pull/3045) Add heading to the onUserLocationChange listener
* Common: [#2937](https://github.com/react-native-community/react-native-maps/pull/2937) Add onDoublePress callback
* Common: [#2960](https://github.com/react-native-community/react-native-maps/pull/2959) Heatmaps for Android and iOS
* Common: [#2959](https://github.com/react-native-community/react-native-maps/pull/2959) Added GeoJSON support by default
* Common: [#2975](https://github.com/react-native-community/react-native-maps/pull/2975) Convert to new react native config format (RN 0.60)
* Common: [#2973](https://github.com/react-native-community/react-native-maps/pull/2973) Fix select annotation when show/hide callout view

## 0.25.0 (July 11, 2019)
* Android: [#2941](https://github.com/react-native-community/react-native-maps/pull/2941) Fix build gradle to allow jettifier to run correctly
Expand Down
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ versions you should add `react` as a dependency in your `package.json`.

[`<Overlay />` Component API](docs/overlay.md)

[`<Heatmap />` Component API](docs/heatmap.md)

[`<Geojson />` Component API](docs/geojson.md)

## General Usage

```js
Expand Down
36 changes: 36 additions & 0 deletions docs/geojson.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# `<Geojson />` Component API

## Props

| Prop | Type | Default | Note |
| --------- | ---- | ------------------------------------------------------ | ---- |
| `geojson` | | [Geojson](https://geojson.org/) description of object. |

## Example

```
import React from 'react';
import MapView, {Geojson} from 'react-native-maps';
const myPlace = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [64.165329, 48.844287],
}
}
]
};
const Map = props => (
<MapView>
<Geojson geojson={myPlace} />
</MapView>
);
```


32 changes: 32 additions & 0 deletions docs/heatmap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# `<Heatmap />` Component API

## Props

| Prop | Type | Default | Note |
|---|---|---|---|
| `points` | `Array<WeightedLatLng>` | | Array of heatmap entries to apply towards density.
| `radius` | `Number` | `20` | The radius of the heatmap points in pixels, between 10 and 50.
| `opacity` | `Number` | `0.7` | The opacity of the heatmap.
| `gradient` | `Object` | | Heatmap gradient configuration (See below for *Gradient Config*).


## Gradient Config

[Android Doc](https://developers.google.com/maps/documentation/android-sdk/utility/heatmap#custom) | [iOS Doc](https://developers.google.com/maps/documentation/ios-sdk/utility/heatmap#customize)

| Prop | Type | Default | Note |
|---|---|---|---|
| `colors` | `Array<String>` | | Colors (one or more) to use for gradient.
| `startPoints` | `Array<Number>` | | Array of floating point values from 0 to 1 representing where each color starts. Array length must be equal to `colors` array length.
| `colorMapSize` | `Number` | `256` | Resolution of color map -- number corresponding to the number of steps colors are interpolated into.


## Types

```
type WeightedLatLng = {
latitude: Number;
longitude: Number;
weight?: Number;
}
```
129 changes: 82 additions & 47 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,46 @@
Install the library from npm:

```sh
npm install react-native-maps --save
npm install react-native-maps --save-exact
yarn add react-native-maps -E
```

The library ships with platform native code that needs to be compiled
together with React Native. This requires you to configure your build
tools.

Since React Native 0.60 and higher, [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) makes the installation process simpler.

The actual map implementation depends on the platform. On Android, one
has to use [Google
Maps](https://developers.google.com/maps/documentation/), which in turn
requires you to obtain an API key for the [Android
requires you to obtain an [API key for the Android
SDK](https://developers.google.com/maps/documentation/android-sdk/signup).

On iOS, one can choose between Google Maps or the native [Apple
Maps](https://developer.apple.com/documentation/mapkit/) implementation.

When using Google Maps on iOS, you need to also register for the [iOS
When using Google Maps on iOS, you need also to obtain an [API key for the iOS
SDK](https://developers.google.com/maps/documentation/ios-sdk/get-api-key)
and include the Google Maps library in your build. The native Apple Maps
based implementation works out-of-the-box and is therefore simpler to
use at the price of missing some of the features supported by the Google
Maps backend.

> **WARNING**: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a [billing account](https://developers.google.com/maps/gmp-get-started#create-billing-account)!
---

## Build configuration on iOS

### Using React Native Link
### Using React Native Link (React Native 0.59 and lower)

Run `react-native link react-native-maps` after which you should be able
to use this library on iOS. Note that by default this will use Apple
Maps and you will miss some of the features provided by Google (see the
instruction on manually enabling Google Maps below).

### Using CocoaPods
### Using CocoaPods (React Native 0.59 and lower)

> If the CocoaPods package manager is new to you, please first review
> its [installation guide](https://guides.cocoapods.org/using/getting-started.html)
Expand Down Expand Up @@ -108,7 +115,14 @@ pod install

and open the produced workspace file (`.xcworkspace`) in XCode to build your project.

### Enabling Google Maps on iOS
### Using CocoaPods (React Native 0.60 and higher)

```sh
cd ios
pod install
```

### Enabling Google Maps on iOS (React Native all versions)

If you want to enable Google Maps on iOS, obtain the Google API key and
edit your `AppDelegate.m` as follows:
Expand All @@ -127,57 +141,58 @@ edit your `AppDelegate.m` as follows:
The `[GMSServices provideAPIKey]` should be the **first call** of the method.
Then, do either of the following
Then, do either of the following:
1. If you are using CocoaPods to manage your dependecies, uncomment the
a) (React Native 0.59 and lower) If you are using CocoaPods to manage your dependecies, uncomment the
lines related to Google Maps from the `Podfile` and run `pod install`.
2. If you used React Native link, you may include Google Maps manually as a
b) (React Native 0.59 and lower) If you used React Native link, you may include Google Maps manually as a
XCode framework following the instructions from [SDK docs -> Install
manually](https://developers.google.com/maps/documentation/ios-sdk/start). Then, to link this library to the framework, add the following to your
`package.json` and replace the
`REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL` with the relative path
from your project root to the directory in which you installed the
Google Maps frameworks. You might need to specify a recursive search path
by adding a `/**` at the end of the provided path (e.g. `"./node_modules/react-native-maps/enable-google-maps 'ios/my-frameworks/GoogleMaps/**'"
```json
{
"name": "your-app",
"scripts": {
"postinstall": "./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL"
}
}
```
Re-run `npm install` or `yarn` to ensure the `postinstall` script is run.
3. Import and add `{PROVIDER_GOOGLE}` to your JavaScript:
```javascript
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
...
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
...
>
```
by adding a `/**` at the end of the provided path (e.g. "./node_modules/react-native-maps/enable-google-maps 'ios/my-frameworks/GoogleMaps/**'"
```json
{
"name": "your-app",
"scripts": {
"postinstall": "./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL"
}
}
```

Re-run `npm install` or `yarn` to ensure the `postinstall` script is run.

c) (React Native 0.60 and higher) Add the following to your Podfile above the `use_native_modules!` function and run `pod install` in the ios folder:
```ruby
# React Native Maps dependencies
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
```

That's it, you made it! 👍

---


## Build configuration on Android

Ensure your build files match the following requirements:

1. Define the `react-native-maps` project in `android/settings.gradle`:
1. (React Native 0.59 and lower) Define the `react-native-maps` project in `android/settings.gradle`:

```groovy
...
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
```

2. Add the `react-native-maps` as an dependency of your app in `android/app/build.gradle`:
2. (React Native 0.59 and lower) Add the `react-native-maps` as an dependency of your app in `android/app/build.gradle`:

```groovy
...
Expand All @@ -187,7 +202,7 @@ dependencies {
}
```

If you've defined *[project-wide
3.1 (React Native all versions) If you've defined *[project-wide
properties](https://developer.android.com/studio/build/gradle-tips.html)*
(**recommended**) in your root `build.gradle`, this library will detect
the presence of the following properties:
Expand All @@ -200,16 +215,32 @@ allprojects {...}
+ Project-wide Gradle configuration properties
*/
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
supportLibVersion = "26.1.0"
googlePlayServicesVersion = "16.1.0" // or set latest version
androidMapsUtilsVersion = "0.5+"
compileSdkVersion = xxx
targetSdkVersion = xxx
buildToolsVersion = "xxx"
minSdkVersion = xxx
supportLibVersion = "xxx"
playServicesVersion = "xxx" // or set latest version
androidMapsUtilsVersion = "xxx"
}
```
or do
```
buildscript {
ext {
buildToolsVersion = "xxx"
minSdkVersion = xxx
compileSdkVersion = xxx
targetSdkVersion = xxx
supportLibVersion = "xxx"
playServicesVersion = "xxx" // or set latest version
androidMapsUtilsVersion = "xxx"
}
}
...
```

If you do **not** have *project-wide properties* defined and have a
3.2 (React Native all versions) If you do **not** have *project-wide properties* defined and have a
different play-services version than the one included in this library,
use the following instead (switch 10.0.1 for the desired version):

Expand All @@ -226,7 +257,7 @@ dependencies {
}
```

3. Specify your Google Maps API Key:
4. (React Native all versions) Specify your Google Maps API Key:

Add your API key to your manifest file (`android/app/src/main/AndroidManifest.xml`):

Expand All @@ -250,7 +281,7 @@ dependencies {
Source: https://developers.google.com/maps/documentation/android-api/signup

4. Add `import com.airbnb.android.react.maps.MapsPackage;` and `new MapsPackage()` in your `MainApplication.java` :
5. (React Native 0.59 and lower) Add `import com.airbnb.android.react.maps.MapsPackage;` and `new MapsPackage()` in your `MainApplication.java` :

```java
import com.airbnb.android.react.maps.MapsPackage;
Expand All @@ -264,14 +295,18 @@ import com.airbnb.android.react.maps.MapsPackage;
}
```

5. Ensure that you have Google Play Services installed:
6. (React Native all versions) Ensure that you have Google Play Services installed:

* For the Genymotion emulator, you can follow [these instructions](https://www.genymotion.com/help/desktop/faq/#google-play-services).
* For a physical device you need to search on Google for 'Google Play
Services'. There will be a link that takes you to the Play Store and
from there you will see a button to update it (do not search within the
Play Store).

That's it, you made it! :+1:

---

## Troubleshooting

### The map background is blank (Google Maps)
Expand Down
8 changes: 5 additions & 3 deletions docs/mapview.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
| `initialRegion` | `Region` | | The initial region to be displayed by the map. Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
| `camera` | `Camera` | | The camera view the map should display. If you use this, the `region` property is ignored.
| `initialCamera` | `Camera` | | Like `initialRegion`, use this prop instead of `camera` only if you don't want to control the viewport of the map besides the initial camera setting.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
| `mapPadding` | `EdgePadding` | | Adds custom padding to each side of the map. Useful when map elements/markers are obscured. **Note** Google Maps only.
| `paddingAdjustmentBehavior` | 'always'\|'automatic'\|'never' | 'never' | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only)
| `mapPadding` | `EdgePadding` | | Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
| `paddingAdjustmentBehavior` | 'always' \| 'automatic' \| 'never' | 'never' | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only)
| `liteMode` | `Boolean` | `false` | Enable lite mode. **Note**: Android only.
| `mapType` | `String` | `"standard"` | The map type to be displayed. <br/><br/> - standard: standard road map (default)<br/> - none: no map **Note** Not available on MapKit<br/> - satellite: satellite view<br/> - hybrid: satellite view with roads and points of interest overlayed<br/> - terrain: (Android only) topographic view<br/> - mutedStandard: more subtle, makes markers/lines pop more (iOS 11.0+ only)
| `customMapStyle` | `Array` | | Adds custom styling to the map component. See [README](https://github.com/react-native-community/react-native-maps#customizing-the-map-style) for more information.
Expand Down Expand Up @@ -42,6 +42,7 @@
| `legalLabelInsets` | `EdgeInsets` | | If set, changes the position of the "Legal" label link from the OS default. **Note:** iOS only.
| `kmlSrc` | `string` | | The URL from KML file. **Note:** Google Maps and Markers only (either Android or iOS with `PROVIDER_GOOGLE`).
| `compassOffset` | `Point` | | If set, changes the position of the compass. **Note:** iOS Maps only.
| `isAccessibilityElement` | `Boolean` | `false` | Determines whether the MapView captures VoiceOver touches or forwards them to children. When `true`, map markers are not visible to VoiceOver. **Note:** iOS Maps only.


## Events
Expand All @@ -54,8 +55,9 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
| `onKmlReady` | `KmlContainer` | Callback that is called once the kml is fully loaded.
| `onRegionChange` | `Region` | Callback that is called continuously when the region changes, such as when a user is dragging the map.
| `onRegionChangeComplete` | `Region` | Callback that is called once when the region changes, such as when the user is done moving the map.
| `onUserLocationChange` | `{ coordinate: Location }` | Callback that is called when the underlying map figures our users current location (coordinate also includes isFromMockProvider value for Android API 18 and above). Make sure **showsUserLocation** is set to *true* and that the provider is `"google"`.
| `onUserLocationChange` | `{ coordinate: Location }` | Callback that is called when the underlying map figures our users current location (coordinate also includes isFromMockProvider value for Android API 18 and above). Make sure **showsUserLocation** is set to *true*.
| `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user taps on the map.
| `onDoublePress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user double taps on the map.
| `onPanDrag` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user presses and drags the map. **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
| `onPoiClick` | `{ coordinate: LatLng, position: Point, placeId: string, name: string }` | Callback that is called when user click on a POI.
| `onLongPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user makes a "long press" somewhere on the map.
Expand Down
7 changes: 7 additions & 0 deletions docs/overlay.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
|---|---|---|---|
| `image` | `ImageSource` | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used.
| `bounds` | `Array<LatLng>` | | The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
| `tappable` | `Bool` | `false` | `Android only` Boolean to allow an overlay to be tappable and use the onPress function.

## Events

| Event Name | Returns | Notes
|---|---|---|
| `onPress` | | `Android only` Callback that is called when the user presses on the overlay

## Types

Expand Down
Loading

0 comments on commit 6a9eba0

Please sign in to comment.