Skip to content

Commit

Permalink
Merge commit v0.26.1 into eres
Browse files Browse the repository at this point in the history
* commit '3ae31e4a336102538ee422a0d4e71a2ea32647bb': (24 commits)
  [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)
  Update index.d.ts (react-native-maps#2887)
  Add @ReactModule annotation to help turbomodules processor (react-native-maps#3001)
  Google Maps - Heatmaps for Android and iOS (react-native-maps#2960)
  Added GeoJSON support by default (react-native-maps#2959)
  Update GoogleMaps pos to 3.2.0 (react-native-maps#2999)
  convert to new react native config format (RN 0.60 (react-native-maps#2975)
  fix select annotation when show/hide callout view (react-native-maps#2973)
  ...

# Conflicts:
#	package.json
  • Loading branch information
Nizam Moidu committed Oct 6, 2019
2 parents e0cd12b + 3ae31e4 commit 2e9fbcd
Show file tree
Hide file tree
Showing 47 changed files with 1,448 additions and 84 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
1 change: 1 addition & 0 deletions docs/mapview.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
| `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"`.
| `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
2 changes: 2 additions & 0 deletions example/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import TestIdMarkers from './examples/TestIdMarkers';
import IndoorMap from './examples/IndoorMap';
import CameraControl from './examples/CameraControl';
import MassiveCustomMarkers from './examples/MassiveCustomMarkers';
import GeojsonMap from './examples/Geojson';

const IOS = Platform.OS === 'ios';
const ANDROID = Platform.OS === 'android';
Expand Down Expand Up @@ -177,6 +178,7 @@ export default class App extends React.Component<Props> {
[IndoorMap, 'Indoor Map', true],
[CameraControl, 'CameraControl', true],
[MassiveCustomMarkers, 'MassiveCustomMarkers', true],
[GeojsonMap, 'Geojson', true],
]
// Filter out examples that are not yet supported for Google Maps on iOS.
.filter(
Expand Down
Loading

0 comments on commit 2e9fbcd

Please sign in to comment.