react-native-maps 0.30.0 → 0.31.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +4 -4
  2. package/index.d.ts +10 -7
  3. package/index.js +2 -1
  4. package/lib/android/build.gradle +4 -4
  5. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java +20 -0
  6. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java +14 -4
  7. package/lib/components/AnimatedRegion.js +6 -3
  8. package/lib/components/Geojson.js +2 -2
  9. package/lib/components/MapCallout.js +3 -5
  10. package/lib/components/MapCalloutSubview.js +3 -5
  11. package/lib/components/MapCircle.js +5 -5
  12. package/lib/components/MapHeatmap.js +3 -5
  13. package/lib/components/MapLocalTile.js +2 -6
  14. package/lib/components/MapMarker.js +5 -7
  15. package/lib/components/MapOverlay.js +3 -2
  16. package/lib/components/MapPolygon.js +5 -5
  17. package/lib/components/MapPolyline.js +5 -6
  18. package/lib/components/MapUrlTile.js +2 -6
  19. package/lib/components/MapView.js +19 -12
  20. package/lib/components/MapWMSTile.js +2 -6
  21. package/lib/ios/AirMaps/AIRMapManager.m +15 -2
  22. package/lib/ios/AirMaps/AIRMapPolyline.h +1 -0
  23. package/lib/ios/AirMaps/AIRMapPolyline.m +14 -1
  24. package/lib/ios/AirMaps/AIRMapPolylineManager.m +1 -0
  25. package/package.json +42 -5
  26. package/react-native-google-maps.podspec +3 -3
  27. package/react-native-maps.podspec +1 -1
  28. package/.eslintrc +0 -3
  29. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -111
  30. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -32
  31. package/.github/ISSUE_TEMPLATE.md +0 -5
  32. package/.github/PULL_REQUEST_TEMPLATE.md +0 -53
  33. package/.github/stale.yml +0 -17
  34. package/.github/workflows/base.yml +0 -21
  35. package/.prettierrc +0 -4
  36. package/CHANGELOG.md +0 -783
  37. package/docs/callout.md +0 -38
  38. package/docs/circle.md +0 -28
  39. package/docs/examples-setup.md +0 -17
  40. package/docs/geojson.md +0 -52
  41. package/docs/heatmap.md +0 -32
  42. package/docs/installation.md +0 -347
  43. package/docs/mapview.md +0 -252
  44. package/docs/marker.md +0 -85
  45. package/docs/overlay.md +0 -27
  46. package/docs/polygon.md +0 -34
  47. package/docs/polyline.md +0 -65
  48. package/docs/tiles.md +0 -35
  49. package/enable-google-maps +0 -15
package/docs/mapview.md DELETED
@@ -1,252 +0,0 @@
1
- # `<MapView />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `provider` | `string` | | The map framework to use. <br/><br/>Either `"google"` for GoogleMaps, otherwise `null` or `undefined` to use the native map framework (`MapKit` in iOS and `GoogleMaps` in android).
8
- | `region` | `Region` | | The region to be displayed by the map. <br/><br/>The region is defined by the center coordinates and the span of coordinates to display.
9
- | `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.
10
- | `camera` | `Camera` | | The camera view the map should display. If you use this, the `region` property is ignored.
11
- | `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.
12
- | `mapPadding` | `EdgePadding` | | Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
13
- | `paddingAdjustmentBehavior` | 'always' \| 'automatic' \| 'never' | 'never' | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only)
14
- | `liteMode` | `Boolean` | `false` | Enable lite mode. **Note**: Android only.
15
- | `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: topographic view<br/> - mutedStandard: more subtle, makes markers/lines pop more (iOS 11.0+ only)
16
- | `customMapStyle` | `Array` | | Adds custom styling to the map component. See [README](https://github.com/react-native-maps/react-native-maps#customizing-the-map-style) for more information.
17
- | `userInterfaceStyle` | 'light' \| 'dark' | | Sets the map to the style selected. Default is whatever the system settings is. **Note:** iOS Maps only (aka MapKit).
18
- | `showsUserLocation` | `Boolean` | `false` | If `true` the app will ask for the user's location. **NOTE**: You need to add `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation, otherwise it is going to *fail silently*! You will also need to add an explanation for why you need the users location against `NSLocationWhenInUseUsageDescription` in Info.plist. Otherwise Apple may reject your app submission.
19
- | `userLocationPriority` | 'balanced'\|'high'\|'low'\|'passive' | 'high' | Set power priority of user location tracking. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only.
20
- | `userLocationUpdateInterval` | `Number` | 5000 | Interval of user location updates in milliseconds. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only.
21
- | `userLocationFastestInterval` | `Number` | 5000 | Fastest interval the application will actively acquire locations. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only.
22
- | `userLocationAnnotationTitle` | `String` | | The title of the annotation for current user location. This only works if `showsUserLocation` is true. There is a default value `My Location` set by MapView. **Note**: iOS only.
23
- | `followsUserLocation` | `Boolean` | `false` | If `true` the map will focus on the user's location. This only works if `showsUserLocation` is true and the user has shared their location. **Note**: Apple Maps only.
24
- | `userLocationCalloutEnabled` | `Boolean` | `false` | If `true` clicking user location will show the default callout for userLocation annotation. **Note**: Apple Maps only.
25
- | `showsMyLocationButton` | `Boolean` | `true` | If `false` hide the button to move map to the current user's location.
26
- | `showsPointsOfInterest` | `Boolean` | `true` | If `false` points of interest won't be displayed on the map.
27
- | `showsCompass` | `Boolean` | `true` | If `false` compass won't be displayed on the map.
28
- | `showsScale` | `Boolean` | `true` | A Boolean indicating whether the map shows scale information. **Note**: Apple Maps only.
29
- | `showsBuildings` | `Boolean` | `true` | A Boolean indicating whether the map displays extruded building information.
30
- | `showsTraffic` | `Boolean` | `false` | A Boolean value indicating whether the map displays traffic information.
31
- | `showsIndoors` | `Boolean` | `true` | A Boolean indicating whether indoor maps should be enabled.
32
- | `showsIndoorLevelPicker` | `Boolean` | `false` | A Boolean indicating whether indoor level picker should be enabled. **Note:** Google Maps only (either Android or iOS with `PROVIDER_GOOGLE`).
33
- | `zoomEnabled` | `Boolean` | `true` | If `false` the user won't be able to pinch/zoom the map.
34
- | `zoomTapEnabled` | `Boolean` | `true` | If `false` the user won't be able to double tap to zoom the map. **Note:** But it will greatly decrease delay of tap gesture recognition. **Note:** Google Maps on iOS only
35
- | `zoomControlEnabled` | `Boolean` | `true` | If `false` the zoom control at the bottom right of the map won't be visible **Note:** Android only.
36
- | `minZoomLevel` | `Number` | `0` | Minimum zoom value for the map, must be between 0 and 20
37
- | `maxZoomLevel` | `Number` | `20` | Maximum zoom value for the map, must be between 0 and 20
38
- | `rotateEnabled` | `Boolean` | `true` | If `false` the user won't be able to pinch/rotate the map.
39
- | `scrollEnabled` | `Boolean` | `true` | If `false` the user won't be able to change the map region being displayed.
40
- | `scrollDuringRotateOrZoomEnabled` | `Boolean` | `true` | If `false` the map will stay centered while rotating or zooming. **Note:** Google Maps only
41
- | `pitchEnabled` | `Boolean` | `true` | If `false` the user won't be able to adjust the camera’s pitch angle.
42
- | `toolbarEnabled` | `Boolean` | `true` | `Android only` If `false` will hide 'Navigate' and 'Open in Maps' buttons on marker press
43
- | `cacheEnabled` | `Boolean` | `false` | If `true` map will be cached and displayed as an image instead of being interactable, for performance usage. **Note:** Apple Maps only
44
- | `loadingEnabled` | `Boolean` | `false` | If `true` a loading indicator will show while the map is loading.
45
- | `loadingIndicatorColor` | `Color` | `#606060` | Sets loading indicator color, default to `#606060`.
46
- | `loadingBackgroundColor` | `Color` | `#FFFFFF` | Sets loading background color, default to `#FFFFFF`.
47
- | `tintColor` | `color` | `null` | Sets the tint color of the map. (Changes the color of the position indicator) Defaults to system blue. **Note:** iOS (Apple maps) only.
48
- | `moveOnMarkerPress` | `Boolean` | `true` | `Android only` If `false` the map won't move when a marker is pressed.
49
- | `legalLabelInsets` | `EdgeInsets` | | If set, changes the position of the "Legal" label link from the OS default. **Note:** iOS only.
50
- | `kmlSrc` | `string` | | The URL from KML file. **Note:** Google Maps and Markers only (either Android or iOS with `PROVIDER_GOOGLE`).
51
- | `compassOffset` | `Point` | | If set, changes the position of the compass. **Note:** iOS Maps only.
52
- | `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.
53
-
54
-
55
- ## Events
56
-
57
- To access event data, you will need to use `e.nativeEvent`. For example, `onPress={e => console.log(e.nativeEvent)}` will log the entire event object to your console.
58
-
59
- | Event Name | Returns | Notes
60
- |---|---|---|
61
- | `onMapReady` | | Callback that is called once the map is fully loaded.
62
- | `onKmlReady` | `KmlContainer` | Callback that is called once the kml is fully loaded.
63
- | `onRegionChange` | (`Region`, `{isGesture: boolean}`) | Callback that is called continuously when the region changes, such as when a user is dragging the map. The second parameter is an object containing more details about the move. `isGesture` property indicates if the move was from the user (true) or an animation (false). **Note**: `isGesture` is supported by Google Maps only.
64
- | `onRegionChangeComplete` | (`Region`, `{isGesture: boolean}`) | Callback that is called once when the region changes, such as when the user is done moving the map. The second parameter is an object containing more details about the move. `isGesture` property indicates if the move was from the user (true) or an animation (false). **Note**: `isGesture` is supported by Google Maps only.
65
- | `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*.
66
- | `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user taps on the map.
67
- | `onDoublePress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user double taps on the map.
68
- | `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
69
- | `onPoiClick` | `{ coordinate: LatLng, position: Point, placeId: string, name: string }` | Callback that is called when user click on a POI.
70
- | `onLongPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user makes a "long press" somewhere on the map.
71
- | `onMarkerPress` | | Callback that is called when a marker on the map is tapped by the user.
72
- | `onMarkerSelect` | | Callback that is called when a marker on the map becomes selected. This will be called when the callout for that marker is about to be shown. **Note**: iOS only.
73
- | `onMarkerDeselect` | | Callback that is called when a marker on the map becomes deselected. This will be called when the callout for that marker is about to be hidden. **Note**: iOS only.
74
- | `onCalloutPress` | | Callback that is called when a callout is tapped by the user.
75
- | `onMarkerDragStart` | `{ coordinate: LatLng, position: Point }` | Callback that is called when the user initiates a drag on a marker (if it is draggable)
76
- | `onMarkerDrag` | `{ coordinate: LatLng, position: Point }` | Callback called continuously as a marker is dragged
77
- | `onMarkerDragEnd` | `{ coordinate: LatLng, position: Point }` | Callback that is called when a drag on a marker finishes. This is usually the point you will want to setState on the marker's coordinate again
78
- | `onIndoorLevelActivated` | `IndoorLevel` | Callback that is called when a level on indoor building is activated
79
- | `onIndoorBuildingFocused` | `IndoorBuilding` | Callback that is called when a indoor building is focused/unfocused
80
-
81
-
82
-
83
- ## Methods
84
-
85
- | Method Name | Arguments | Notes
86
- |---|---|---|
87
- | `getCamera` | | Returns a `Camera` structure indicating the current camera configuration.
88
- | `animateCamera` | `camera: Camera`, `{ duration: Number }` | Animate the camera to a new view. You can pass a partial camera object here; any property not given will remain unmodified.
89
- | `setCamera` | `camera: Camera`, `{ duration: Number }` | Like `animateCamera`, but sets the new view instantly, without an animation.
90
- | `animateToRegion` | `region: Region`, `duration: Number` |
91
- | `animateToNavigation` | `location: LatLng`, `bearing: Number`, `angle: Number`, `duration: Number` | Deprecated. Use `animateCamera` instead.
92
- | `animateToCoordinate` | `coordinate: LatLng`, `duration: Number` | Deprecated. Use `animateCamera` instead.
93
- | `animateToBearing` | `bearing: Number`, `duration: Number` | Deprecated. Use `animateCamera` instead.
94
- | `animateToViewingAngle` | `angle: Number`, `duration: Number` | Deprecated. Use `animateCamera` instead.
95
- | `getMapBoundaries` | | `Promise<{northEast: LatLng, southWest: LatLng}>`
96
- | `setMapBoundaries` | `northEast: LatLng`, `southWest: LatLng` | The boundary is defined by the map's center coordinates, not the device's viewport itself. **Note:** Google Maps only.
97
- | `setIndoorActiveLevelIndex` | `levelIndex: Number` |
98
- | `fitToElements` | `options: { edgePadding: EdgePadding, animated: Boolean }` | **Note** edgePadding is Google Maps only
99
- | `fitToSuppliedMarkers` | `markerIDs: String[], options: { edgePadding: EdgePadding, animated: Boolean }` | If you need to use this in `ComponentDidMount`, make sure you put it in a timeout or it will cause performance problems. **Note** edgePadding is Google Maps only
100
- | `fitToCoordinates` | `coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean }` | If called in `ComponentDidMount` in android, it will cause an exception. It is recommended to call it from the MapView `onLayout` event.
101
- | `addressForCoordinate` | `coordinate: LatLng` | Converts a map coordinate to a address (`Address`). Returns a `Promise<Address>`.
102
- | `pointForCoordinate` | `coordinate: LatLng` | Converts a map coordinate to a view coordinate (`Point`). Returns a `Promise<Point>`.
103
- | `coordinateForPoint` | `point: Point` | Converts a view coordinate (`Point`) to a map coordinate. Returns a `Promise<Coordinate>`.
104
- | `getMarkersFrames` | `onlyVisible: Boolean` | Get markers' centers and frames in view coordinates. Returns a `Promise<{ "markerID" : { point: Point, frame: Frame } }>`. **Note**: iOS only.
105
-
106
-
107
-
108
- ## Types
109
-
110
- ```
111
- type Region {
112
- latitude: Number,
113
- longitude: Number,
114
- latitudeDelta: Number,
115
- longitudeDelta: Number,
116
- }
117
- ```
118
-
119
- ```
120
- type Camera = {
121
- center: {
122
- latitude: number,
123
- longitude: number,
124
- },
125
- pitch: number,
126
- heading: number,
127
-
128
- // Only on iOS MapKit, in meters. The property is ignored by Google Maps.
129
- altitude: number,
130
-
131
- // Only when using Google Maps.
132
- zoom: number
133
- }
134
- ```
135
-
136
- Latitude and longitude are self explanatory while latitudeDelta and longitudeDelta may not.
137
- On the [developer.apple.com](https://developer.apple.com/reference/mapkit/mkcoordinatespan/1452417-latitudedelta) website this is how the "latitudeDelta" property is explained:
138
-
139
- > The amount of north-to-south distance (measured in degrees) to display on the map. Unlike longitudinal distances, which vary based on the latitude, one degree of latitude is always approximately 111 kilometers (69 miles).
140
-
141
- If this is not enough, you can find a [visual explanation on stackoverflow](https://stackoverflow.com/questions/36685372/how-to-zoom-in-out-in-react-native-map/36688156#36688156).
142
-
143
- Note that when using the `Camera`, MapKit on iOS and Google Maps differ in how the height is specified. For a cross-platform app, it is necessary
144
- to specify both the zoom level and the altitude separately.
145
-
146
- ```
147
- type LatLng {
148
- latitude: Number,
149
- longitude: Number,
150
- }
151
- ```
152
-
153
- ```
154
- type Location {
155
- latitude: Number,
156
- longitude: Number,
157
- altitude: Number,
158
- timestamp: Number, //Milliseconds since Unix epoch
159
- accuracy: Number,
160
- altitudeAccuracy: Number,
161
- speed: Number,
162
- }
163
- ```
164
-
165
- ```
166
- type Point {
167
- x: Number,
168
- y: Number,
169
- }
170
- ```
171
-
172
- ```
173
- type Frame {
174
- x: Number,
175
- y: Number,
176
- width: Number,
177
- height: Number,
178
- }
179
- ```
180
-
181
- ```
182
- enum MapType : String {
183
- "standard",
184
- "satellite",
185
- "hybrid",
186
- "terrain" //Android only
187
- }
188
- ```
189
-
190
- ```
191
- type EdgePadding {
192
- top: Number,
193
- right: Number,
194
- bottom: Number,
195
- left: Number
196
- }
197
- ```
198
-
199
- ```
200
- type EdgeInsets {
201
- top: Number,
202
- left: Number,
203
- bottom: Number,
204
- right: Number
205
- }
206
- ```
207
-
208
- ```
209
- type Marker {
210
- id: String,
211
- coordinate: LatLng,
212
- title: String,
213
- description: String
214
- }
215
- ```
216
-
217
- ```
218
- type KmlContainer {
219
- markers: [Marker]
220
- }
221
- ```
222
-
223
- ```
224
- type IndoorBuilding {
225
- underground: boolean,
226
- activeLevelIndex: Number,
227
- levels: Array<IndoorLevel>,
228
- }
229
- ```
230
-
231
- ```
232
- type IndoorLevel {
233
- index: Number,
234
- name: String,
235
- shortName: String,
236
- }
237
- ```
238
-
239
- ```
240
- type Address {
241
- name: String,
242
- thoroughfare: String,
243
- subThoroughfare: String,
244
- locality: String,
245
- subLocality: String,
246
- administrativeArea: String,
247
- subAdministrativeArea: String,
248
- postalCode: String,
249
- countryCode: String,
250
- country: String,
251
- }
252
- ```
package/docs/marker.md DELETED
@@ -1,85 +0,0 @@
1
- # `<Marker />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `title` | `String` | | The title of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
8
- | `description` | `String` | | The description of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
9
- | `image` | `ImageSource`* | | A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
10
- | `icon` | `ImageSource`* | | Marker icon to render (equivalent to `icon` property of GMSMarker Class). Only local image resources are allowed to be used. **Note:** Google maps only!
11
- | `pinColor` | `Color` | | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used.<br/><br/> For Android, the set of available colors is limited. Unsupported colors will fall back to red. See [#887](https://github.com/react-community/react-native-maps/issues/887) for more information.
12
- | `coordinate` | `LatLng` | | The coordinate for the marker.
13
- | `centerOffset` | `Point` | (0, 0) | The offset (in points) at which to display the view.<br/><br/> By default, the center point of an annotation view is placed at the coordinate point of the associated annotation. You can use this property to reposition the annotation view as needed. This x and y offset values are measured in points. Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.<br/><br/> For Google Maps, see the `anchor` prop.
14
- | `calloutOffset` | `Point` | (0, 0) | The offset (in points) at which to place the callout bubble.<br/><br/> This property determines the additional distance by which to move the callout bubble. When this property is set to (0, 0), the anchor point of the callout bubble is placed on the top-center point of the marker view’s frame. Specifying positive offset values moves the callout bubble down and to the right, while specifying negative values moves it up and to the left.<br/><br/> For Google Maps, see the `calloutAnchor` prop.
15
- | `anchor` | `Point` | (0.5, 1) | Sets the anchor point for the marker.<br/><br/> The anchor specifies the point in the icon image that is anchored to the marker's position on the Earth's surface.<br/><br/> The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0], where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner. The anchoring point in a W x H image is the nearest discrete grid point in a (W + 1) x (H + 1) grid, obtained by scaling the then rounding. For example, in a 4 x 2 image, the anchor point (0.7, 0.6) resolves to the grid point at (3, 1).<br/><br/> For MapKit on iOS, see the `centerOffset` prop.
16
- | `calloutAnchor` | `Point` | (0.5, 0) | Specifies the point in the marker image at which to anchor the callout when it is displayed. This is specified in the same coordinate system as the anchor. See the `anchor` prop for more details.<br/><br/> The default is the top middle of the image.<br/><br/> For MapKit on iOS, see the `calloutOffset` prop.
17
- | `flat` | `Boolean` | false | Sets whether this marker should be flat against the map true or a billboard facing the camera.
18
- | `identifier` | `String` | | An identifier used to reference this marker at a later date.
19
- | `rotation` | `Float` | 0 | A float number indicating marker's rotation angle, in degrees.
20
- | `draggable` | `<null>` | | This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
21
- | `tappable` | `Boolean` | true | Sets whether marker should be tappable. If set to false, the marker will not have onPress events. **Note**: iOS Google Maps only.
22
- | `tracksViewChanges` | `Boolean` | true | Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance.
23
- | `tracksInfoWindowChanges` | `Boolean` | false | Sets whether this marker should track view changes in info window. Enabling it will let marker change content of info window after first render pass, but will lead to decreased performance, so it's recommended to disable it whenever you don't need it. **Note**: iOS Google Maps only.
24
- | `stopPropagation` | `Boolean` | false | Sets whether this marker should propagate `onPress` events. Enabling it will stop the parent `MapView`'s `onPress` from being called. **Note**: iOS only. Android does not propagate `onPress` events. See [#1132](https://github.com/react-community/react-native-maps/issues/1132) for more information.
25
- | `opacity` | `Float` | 1.0 | The marker's opacity between 0.0 and 1.0.
26
- | `isPreselected` | `Boolean` | false | When true, the marker will be pre-selected. Setting this to true allows the user to drag the marker without needing to tap on it once to focus on it. **Note**: iOS Apple Maps only.
27
- | `key` | `String` | | If no key or non-unique `key` is specified, the `<Marker />` will be reused, therefore there is an animation when the position is changed. If you want to disable the animation, add a `key` prop with a unique value like `key_${item.longitude}_${item.latitude}`. **Note**: iOS only.
28
-
29
- \* `ImageSource` [docs](https://reactnative.dev/docs/image#imagesource)
30
-
31
- ## Events
32
-
33
- To access event data, you will need to use `e.nativeEvent`. For example, `onPress={e => console.log(e.nativeEvent)}` will log the entire event object to your console.
34
-
35
- | Event Name | Returns | Notes
36
- |---|---|---|
37
- | `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when the user presses on the marker
38
- | `onSelect` | `{ coordinate: LatLng, position: Point }` | Callback that is called when the user selects the marker, before the callout is shown. **Note**: iOS only.
39
- | `onDeselect` | `{ coordinate: LatLng, position: Point }` | Callback that is called when the marker is deselected, before the callout is hidden. **Note**: iOS only.
40
- | `onCalloutPress` | | Callback that is called when the user taps the callout view.
41
- | `onDragStart` | `{ coordinate: LatLng, position: Point }` | Callback that is called when the user initiates a drag on this marker (if it is draggable)
42
- | `onDrag` | `{ coordinate: LatLng, position: Point }` | Callback called continuously as the marker is dragged
43
- | `onDragEnd` | `{ coordinate: LatLng, position: Point }` | Callback that is called when a drag on this marker finishes. This is usually the point you will want to setState on the marker's coordinate again
44
-
45
-
46
- ## Methods
47
-
48
- | Method Name | Arguments | Notes
49
- |---|---|---|
50
- | `showCallout` | | Shows the callout for this marker
51
- | `hideCallout` | | Hides the callout for this marker
52
- | `redrawCallout` | | Causes a redraw of the marker's callout. Useful for Google Maps on iOS. **Note**: iOS only.
53
- | `animateMarkerToCoordinate` | `coordinate: LatLng, duration: number` | Animates marker movement. **Note**: Android only
54
- | `redraw` | | Causes a redraw of the marker. Useful when there are updates to the marker and `tracksViewChanges` comes with a cost that is too high.
55
-
56
-
57
-
58
- ## Types
59
-
60
- ```
61
- type LatLng {
62
- latitude: Number,
63
- longitude: Number,
64
- }
65
- ```
66
-
67
- ```
68
- type Point {
69
- x: Number,
70
- y: Number,
71
- }
72
- ```
73
-
74
- ## Children Components
75
-
76
- Children components can be added within a Marker and rendered content will replace the marker symbol. This is a way of creating custom markers and allowing use of native SVGs.
77
-
78
- Example:
79
- ```
80
- <Marker ...>
81
- <View style={{backgroundColor: "red", padding: 10}}>
82
- <Text>SF</Text>
83
- </View>
84
- </Marker>
85
- ```
package/docs/overlay.md DELETED
@@ -1,27 +0,0 @@
1
- # `<Overlay />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `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.
8
- | `bounds` | `Array<LatLng>` | | The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
9
- +| `bearing` | `Number ` | `0` | `Google Maps API only` The bearing in degrees clockwise from north. Values outside the range [0, 360) will be normalized.
10
- | `tappable` | `Bool` | `false` | `Android only` Boolean to allow an overlay to be tappable and use the onPress function.
11
- | `opacity` | `Number` | `1.0` | `Google maps only` The opacity of the overlay.
12
-
13
- ## Events
14
-
15
- | Event Name | Returns | Notes
16
- |---|---|---|
17
- | `onPress` | | `Android only` Callback that is called when the user presses on the overlay
18
-
19
- ## Types
20
-
21
- ```
22
- type LatLng = [
23
- latitude: Number,
24
- longitude: Number,
25
- ]
26
- ```
27
-
package/docs/polygon.md DELETED
@@ -1,34 +0,0 @@
1
- # `<Polygon />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `coordinates` | `Array<LatLng>` | (Required) | An array of coordinates to describe the polygon
8
- | `holes` | `Array<Array<LatLng>>` | | A 2d array of coordinates to describe holes of the polygon where each hole has at least 3 points.
9
- | `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
10
- | `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path.
11
- | `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path.
12
- | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path.
13
- | `lineJoin` | `Array<LatLng>` | | The line join style to apply to corners of the path.
14
- | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
15
- | `geodesic` | `Boolean` | | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere.
16
- | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
17
- | `lineDashPattern` | `Array<Number>` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
18
- | `tappable` | `Bool` | false | Boolean to allow a polygon to be tappable and use the onPress function.
19
- | `zIndex` | `Number` | 0 | The order in which this polygon overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0. (Android Only)
20
-
21
- ## Events
22
-
23
- | Event Name | Returns | Notes
24
- |---|---|---|
25
- | `onPress` | | Callback that is called when the user presses on the polygon
26
-
27
- ## Types
28
-
29
- ```
30
- type LatLng {
31
- latitude: Number,
32
- longitude: Number,
33
- }
34
- ```
package/docs/polyline.md DELETED
@@ -1,65 +0,0 @@
1
- # `<Polyline />` Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- |---|---|---|---|
7
- | `coordinates` | `Array<LatLng>` | (Required) | An array of coordinates to describe the polyline
8
- | `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
9
- | `strokeColor` | `String` | `#000, rgba(r,g,b,0.5)` | The stroke color to use for the path.
10
- | `strokeColors` | `Array<String>` | `null` | The stroke colors to use for the path (iOS only). Must be the same length as `coordinates`.
11
- | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS.
12
- | `lineJoin` | `String` | `round` | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`.
13
- | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
14
- | `geodesic` | `Boolean` | | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere.
15
- | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
16
- | `lineDashPattern` | `Array<Number>` | `null` | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
17
- | `tappable` | `Bool` | false | Boolean to allow a polyline to be tappable and use the onPress function.
18
-
19
- ## Events
20
-
21
- | Event Name | Returns | Notes
22
- |---|---|---|
23
- | `onPress` | | Callback that is called when the user presses on the polyline
24
-
25
- ## Types
26
-
27
- ```
28
- type LatLng {
29
- latitude: Number,
30
- longitude: Number,
31
- }
32
- ```
33
-
34
- ## Gradient Polylines (iOS MapKit only)
35
-
36
- Gradient polylines can be created by using the `strokeColors` prop. `strokeColors` must be an array with the same number of elements as `coordinates`.
37
-
38
- Example:
39
-
40
- ```js
41
- import MapView, { Polyline } from 'react-native-maps';
42
-
43
- <MapView>
44
- <Polyline
45
- coordinates={[
46
- { latitude: 37.8025259, longitude: -122.4351431 },
47
- { latitude: 37.7896386, longitude: -122.421646 },
48
- { latitude: 37.7665248, longitude: -122.4161628 },
49
- { latitude: 37.7734153, longitude: -122.4577787 },
50
- { latitude: 37.7948605, longitude: -122.4596065 },
51
- { latitude: 37.8025259, longitude: -122.4351431 }
52
- ]}
53
- strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
54
- strokeColors={[
55
- '#7F0000',
56
- '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
57
- '#B24112',
58
- '#E5845C',
59
- '#238C23',
60
- '#7F0000'
61
- ]}
62
- strokeWidth={6}
63
- />
64
- </MapView>
65
- ```
package/docs/tiles.md DELETED
@@ -1,35 +0,0 @@
1
- # `<URLTile />` and `<WMSTile />`Component API
2
-
3
- ## Props
4
-
5
- | Prop | Type | Default | Note |
6
- | ------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7
- | `urlTemplate` | `String` | | The url template of the map tileserver. <br/><br/> (URLTile) The patterns {x} {y} {z} will be replaced at runtime. For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png. It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format. <br/><br/> (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box. For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213. |
8
- | `minimumZ` | `Number` | | The minimum zoom level for this tile overlay. |
9
- | `maximumZ` | `Number` | | The maximum zoom level for this tile overlay. |
10
- | `maximumNativeZ` | `Number` | | (Optional) The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides. Tiles are auto-scaled for higher zoom levels. |
11
- | `zIndex` | `Number` | `-1` | (Optional) The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. |
12
- | `tileSize` | `Number` | `256` | (Optional) Tile size, default size is 256 (for tiles of 256 _ 256 pixels). High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels). |
13
- | `doubleTileSize` | `Boolean` | `false` | (Optional) Doubles tile size from 256 to 512 utilising higher zoom levels i.e loading 4 higher zoom level tiles and combining them for one high-resolution tile. iOS does this automatically, even if it is not desirable always. NB! using this makes text labels smaller than in the original map style. |
14
- | `shouldReplaceMapContent` | `Boolean` | `false` | (iOS) Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown. |
15
- | `flipY` | `Boolean` | `false` | (Optional)Allow tiles using the TMS coordinate system (origin bottom left) to be used, and displayed at their correct coordinates. |
16
- | `tileCachePath` | `String` | | (Optional) Enable caching of tiles in the specified directory. Directory can be specified either as a normal path or in URL format (`file://`). Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep, filename is tile y-coordinate without any filetype-extension. <br/><br/>NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc. |
17
- | `tileCacheMaxAge` | `Number` | | (Optional) Defines maximum age in seconds for a cached tile before it's refreshed. NB! Refresh logic is "serve-stale-while-refresh" i.e. to ensure map availability a stale (over max age) tile is served while a tile refresh process is started in the background. |
18
- | `offlineMode` | `Boolean` | `false` | (Optional) Sets offline-mode. In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used. Furthermore automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory, then lower zoom level tile is used (up to 4 levels lower) and scaled. |
19
- | `opacity` | `Number` | | (Optional) Map layer opacity. Value between 0 - 1, with 0 meaning fully transparent. |
20
-
21
- ## Using tile components
22
-
23
- Both `URLTile` and `WMSTile` components require access to a tileserver. Please note that due to overuse OpenStreetMap free tileservers do not work on Android with `URLTile` and are not recommended to be used for iOS either for other than small scale test use.
24
-
25
- `URLTile` and `WMSTile` components both implement caching and non-caching usage modes. Non-caching is the default and uses Android and iOS default implementations for tile overlays. Non-caching means that there is no caching of map tiles in React Native Maps implementation, however both iOS and Android do some limited caching with their default implementation. Non-caching mode works well when network connectivity is good and is simple to use.
26
-
27
- Caching mode is activated when `tileCachePath` property is defined as a valid directory where React Native app has read & write access. In caching mode any new tile fetched from the tileserver is also cached in the directory defined by `tileCachePath` property and cached version is used for any future access to the tile, which means tiles can be used also when there is no or limited network connectivity. Caching also allows pre-loading of tiles to the cache directory, enabling offline map loading functionality which is typical feature in many map applications.
28
-
29
- NB! There is no cache size management in React Native Maps, rather developer needs to implement in JS side code some mechanism to watch the size of tile cache directory and either automatically remove old tiles or allow user to delete the tiles.
30
-
31
- `tileCacheMaxAge` property enables automatic renewal of cached tiles. Refresh logic is "serve-stale-while-refresh" meaning that when expired (i.e. older than defined `tileCacheMaxAge`) tile is requested the old cached ("stale") tile is served while a background process is started to refresh ("update") the expired tile. Refresh logic is optimised for poor network connectivity situation / app offline-mode use: if tile is cached, user is always served a tile even if it is stale, before a tile refresh is attempted and a failure in tile refresh is not a problem as stale tile remains available. Refresh logic is "lazy" i.e. tile refresh check is only done when tile is accessed. Any other refresh logic needs to be implemented in JS side code e.g. at set time intervals checking through tiles in cache and refreshing tiles as needed.
32
-
33
- `offlineMode` property enables mode in which only cached tiles are used, tile fetch from tileserver is not even attempted. This is useful for situations when network connectivity is poor and repeated & possibly failed attempts to fetch tiles (even with caching enabled) from tileserver would increase device power consumption. Another benefit of offline-mode is that if a requested tile is missing from the cache then lower zoom level tiles are used if available and served (after scaling). This is especially useful when user has pre-loaded an area of map for certain zoom levels, allowing user to zoom in the map to higher zoom levels than which were pre-loaded.
34
-
35
- `maximumNativeZ` property works both in caching and non-caching mode, however it is very much recommended to be used in caching mode: it sets the highest zoom level for tiles to be fetched from the tileserver. Any higher zoom levels that `maximumNativeZ` will be created by scaling a lower zoom level tile. This will help to manage the cache size, since an increase in zoom level means 4 times as many tiles are needed as in a previous level. Depending on type of map tiles and their quality a `maximumNativeZ` set at 15 - 17 and `maximumZ` set at 18 - 20 will often give good results, allowing user to zoom in deep into the map with good enough map visual quality.
@@ -1,15 +0,0 @@
1
- #!/bin/bash
2
-
3
- cd "$(dirname "${BASH_SOURCE[0]}")"
4
-
5
- GOOGLE_MAPS_INSTALL_LOCATION=$1
6
-
7
- if [[ -z "$GOOGLE_MAPS_INSTALL_LOCATION" ]]; then
8
- echo "usage: enable-google-maps <google-frameworks-relative-install-dir>"
9
- exit 1
10
- fi
11
-
12
- cat > lib/ios/User.xcconfig <<EOF
13
- FRAMEWORK_SEARCH_PATHS = \$(inherited) \$(SRCROOT)/../../../../$GOOGLE_MAPS_INSTALL_LOCATION
14
- GCC_PREPROCESSOR_DEFINITIONS = \$(inherited) HAVE_GOOGLE_MAPS=1
15
- EOF