-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- - - - -
- - - - - -
- - - - Fork - - - - - - 9,938 - - -
- - - /react-native - -
- -
-
-
-
-
-
-
-
-
-
-
-
-Permalink
-
-
-
-
-
-
- Newer
-
-
--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 100644
-
- 564 lines (508 sloc)
-
- 16.2 KB
-
-
-
-
-
-
-
-
- 
-
- |
- - | -|
| - | 1 | -/** | -
- 
-
- |
- - - - - | -|
| - | 2 | -* Copyright (c) 2015-present, Facebook, Inc. | -
| - | 3 | -* All rights reserved. | -
| - | 4 | -* | -
| - | 5 | -* This source code is licensed under the BSD-style license found in the | -
| - | 6 | -* LICENSE file in the root directory of this source tree. An additional grant | -
| - | 7 | -* of patent rights can be found in the PATENTS file in the same directory. | -
|
-
-
- |
- - | -|
| - | 8 | -* | -
| - | 9 | -* @providesModule MapView | -
- 
-
- |
- - - - - | -|
| - | 10 | -* @flow | -
|
-
-
- |
- - | -|
| - | 11 | -*/ | -
| - | 12 | -'use strict'; | -
| - | 13 | -- |
- 
-
- |
- - - - - | -|
| - | 14 | -const ColorPropType = require('ColorPropType'); | -
- 
-
- |
- - - - - | -|
| - | 15 | -const EdgeInsetsPropType = require('EdgeInsetsPropType'); | -
| - | 16 | -const Image = require('Image'); | -
- 
-
- |
- - - - - | -|
| - | 17 | -const NativeMethodsMixin = require('NativeMethodsMixin'); | -
|
-
-
- |
- - - - - | -|
| - | 18 | -const React = require('React'); | -
| - | 19 | -const StyleSheet = require('StyleSheet'); | -
| - | 20 | -const View = require('View'); | -
| - | 21 | -- |
- 
-
- |
- - - - - | -|
| - | 22 | -const deprecatedPropType = require('deprecatedPropType'); | -
|
-
-
- |
- - - - - | -|
| - | 23 | -const processColor = require('processColor'); | -
| - | 24 | -const resolveAssetSource = require('resolveAssetSource'); | -
| - | 25 | -const requireNativeComponent = require('requireNativeComponent'); | -
|
-
-
- |
- - | -|
| - | 26 | -- |
|
-
-
- |
- - - - - | -|
| - | 27 | -type Event = Object; | -
| - | 28 | -- |
- 
-
- |
- - - - - | -|
| - | 29 | -/** | -
- 
-
- |
- - - - - | -|
| - | 30 | -* State of an annotation on the map. | -
|
-
-
- |
- - - - - | -|
| - | 31 | -*/ | -
- 
- #2512
- |
- - - - - | -|
| - | 32 | -export type AnnotationDragState = $Enum<{ | -
|
-
-
- |
- - - - - | -|
| - | 33 | -/** | -
| - | 34 | -* Annotation is not being touched. | -
| - | 35 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 36 | -idle: string, | -
|
-
-
- |
- - - - - | -|
| - | 37 | -/** | -
| - | 38 | -* Annotation dragging has began. | -
| - | 39 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 40 | -starting: string, | -
|
-
-
- |
- - - - - | -|
| - | 41 | -/** | -
| - | 42 | -* Annotation is being dragged. | -
| - | 43 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 44 | -dragging: string, | -
|
-
-
- |
- - - - - | -|
| - | 45 | -/** | -
| - | 46 | -* Annotation dragging is being canceled. | -
| - | 47 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 48 | -canceling: string, | -
|
-
-
- |
- - - - - | -|
| - | 49 | -/** | -
| - | 50 | -* Annotation dragging has ended. | -
| - | 51 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 52 | -ending: string, | -
|
-
- #2512
- |
- - - - - | -|
| - | 53 | -}>; | -
| - | 54 | -- |
- 
-
- |
- - - - - | -|
| - | 55 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 56 | -* **IMPORTANT: This component is now DEPRECATED and will be removed | -
| - | 57 | -* in January 2017 (React Native version 0.42). This component only supports | -
| - | 58 | -* iOS.** | -
| - | 59 | -* | -
| - | 60 | -* **Please use | -
| - | 61 | -* [react-native-maps](https://github.com/airbnb/react-native-maps) by Airbnb | -
| - | 62 | -* instead of this component.** Our friends at Airbnb have done an amazing job | -
| - | 63 | -* building a cross-platform `MapView` component that is more feature | -
| - | 64 | -* complete. It is used extensively (over 9k installs / month). | -
|
-
-
- |
- - - - - | -|
| - | 65 | -* | -
| - | 66 | -* `MapView` is used to display embeddable maps and annotations using | -
| - | 67 | -* `MKMapView`. | -
| - | 68 | -* | -
| - | 69 | -* ``` | -
| - | 70 | -* import React, { Component } from 'react'; | -
| - | 71 | -* import { MapView } from 'react-native'; | -
| - | 72 | -* | -
| - | 73 | -* class MapMyRide extends Component { | -
| - | 74 | -* render() { | -
| - | 75 | -* return ( | -
| - | 76 | -* <MapView | -
| - | 77 | -* style={{height: 200, margin: 40}} | -
| - | 78 | -* showsUserLocation={true} | -
| - | 79 | -* /> | -
| - | 80 | -* ); | -
| - | 81 | -* } | -
| - | 82 | -* } | -
| - | 83 | -* ``` | -
| - | 84 | -* | -
|
-
-
- |
- - - - - | -|
| - | 85 | -*/ | -
| - | 86 | -- |
|
-
-
- |
- - - - - | -|
| - | 87 | -const MapView = React.createClass({ | -
|
-
- #2512
- |
- - - - - | -|
| - | 88 | -- |
|
-
-
- |
- - | -|
| - | 89 | -mixins: [NativeMethodsMixin], | -
| - | 90 | -- |
| - | 91 | -propTypes: { | -
- 
-
- |
- - - - - | -|
| - | 92 | -...View.propTypes, | -
|
-
-
- |
- - | -|
| - | 93 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 94 | -* Used to style and layout the `MapView`. | -
|
-
-
- |
- - | -|
| - | 95 | -*/ | -
| - | 96 | -style: View.propTypes.style, | -
| - | 97 | -- |
| - | 98 | -/** | -
- 
-
- |
- - - - - | -|
| - | 99 | -* If `true` the app will ask for the user's location and display it on | -
| - | 100 | -* the map. Default value is `false`. | -
|
-
-
- |
- - | -|
| - | 101 | -* | -
|
-
-
- |
- - - - - | -|
| - | 102 | -* **NOTE**: You'll need to add the `NSLocationWhenInUseUsageDescription` | -
|
-
-
- |
- - - - - | -|
| - | 103 | -* key in Info.plist to enable geolocation, otherwise it will fail silently. | -
|
-
-
- |
- - | -|
| - | 104 | -*/ | -
| - | 105 | -showsUserLocation: React.PropTypes.bool, | -
| - | 106 | -- |
| - | 107 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 108 | -* If `true` the map will follow the user's location whenever it changes. | -
| - | 109 | -* Note that this has no effect unless `showsUserLocation` is enabled. | -
| - | 110 | -* Default value is `true`. | -
| - | 111 | -*/ | -
| - | 112 | -followUserLocation: React.PropTypes.bool, | -
|
-
-
- |
- - - - - | -|
| - | 113 | -- |
|
-
-
- |
- - - - - | -|
| - | 114 | -/** | -
- 
-
- |
- - - - - | -|
| - | 115 | -* If `false` points of interest won't be displayed on the map. | -
| - | 116 | -* Default value is `true`. | -
| - | 117 | -*/ | -
| - | 118 | -showsPointsOfInterest: React.PropTypes.bool, | -
| - | 119 | -- |
| - | 120 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 121 | -* If `false`, compass won't be displayed on the map. | -
- 
-
- |
- - - - - | -|
| - | 122 | -* Default value is `true`. | -
| - | 123 | -*/ | -
| - | 124 | -showsCompass: React.PropTypes.bool, | -
| - | 125 | -- |
| - | 126 | -/** | -
- 
-
- |
- - - - - | -|
| - | 127 | -* If `true` the map will show the callouts for all annotations without | -
| - | 128 | -* the user having to click on the annotation. | -
| - | 129 | -* Default value is `false`. | -
| - | 130 | -*/ | -
| - | 131 | -showsAnnotationCallouts: React.PropTypes.bool, | -
| - | 132 | -- |
| - | 133 | -/** | -
|
-
-
- |
- - | -|
| - | 134 | -* If `false` the user won't be able to pinch/zoom the map. | -
- 
-
- |
- - - - - | -|
| - | 135 | -* Default value is `true`. | -
|
-
-
- |
- - | -|
| - | 136 | -*/ | -
| - | 137 | -zoomEnabled: React.PropTypes.bool, | -
| - | 138 | -- |
| - | 139 | -/** | -
| - | 140 | -* When this property is set to `true` and a valid camera is associated with | -
|
-
-
- |
- - - - - | -|
| - | 141 | -* the map, the camera's heading angle is used to rotate the plane of the | -
|
-
-
- |
- - - - - | -|
| - | 142 | -* map around its center point. | -
| - | 143 | -* | -
| - | 144 | -* When this property is set to `false`, the | -
|
-
-
- |
- - - - - | -|
| - | 145 | -* camera's heading angle is ignored and the map is always oriented so | -
|
-
-
- |
- - | -|
| - | 146 | -* that true north is situated at the top of the map view | -
| - | 147 | -*/ | -
| - | 148 | -rotateEnabled: React.PropTypes.bool, | -
| - | 149 | -- |
| - | 150 | -/** | -
| - | 151 | -* When this property is set to `true` and a valid camera is associated | -
|
-
-
- |
- - - - - | -|
| - | 152 | -* with the map, the camera's pitch angle is used to tilt the plane | -
|
-
-
- |
- - - - - | -|
| - | 153 | -* of the map. | -
| - | 154 | -* | -
|
-
-
- |
- - - - - | -|
| - | 155 | -* When this property is set to `false`, the camera's pitch | -
|
-
-
- |
- - | -|
| - | 156 | -* angle is ignored and the map is always displayed as if the user | -
| - | 157 | -* is looking straight down onto it. | -
| - | 158 | -*/ | -
| - | 159 | -pitchEnabled: React.PropTypes.bool, | -
| - | 160 | -- |
| - | 161 | -/** | -
| - | 162 | -* If `false` the user won't be able to change the map region being displayed. | -
| - | 163 | -* Default value is `true`. | -
| - | 164 | -*/ | -
| - | 165 | -scrollEnabled: React.PropTypes.bool, | -
| - | 166 | -- |
| - | 167 | -/** | -
- 
-
- |
- - - - - | -|
| - | 168 | -* The map type to be displayed. | -
- 
-
- |
- - - - - | -|
| - | 169 | -* | -
|
-
-
- |
- - - - - | -|
| - | 170 | -* - `standard`: Standard road map (default). | -
| - | 171 | -* - `satellite`: Satellite view. | -
| - | 172 | -* - `hybrid`: Satellite view with roads and points of interest overlaid. | -
|
-
-
- |
- - - - - | -|
| - | 173 | -*/ | -
| - | 174 | -mapType: React.PropTypes.oneOf([ | -
|
-
-
- |
- - - - - | -|
| - | 175 | -'standard', | -
| - | 176 | -'satellite', | -
|
-
-
- |
- - - - - | -|
| - | 177 | -'hybrid', | -
| - | 178 | -]), | -
| - | 179 | -- |
| - | 180 | -/** | -
|
-
-
- |
- - | -|
| - | 181 | -* The region to be displayed by the map. | -
| - | 182 | -* | -
| - | 183 | -* The region is defined by the center coordinates and the span of | -
| - | 184 | -* coordinates to display. | -
| - | 185 | -*/ | -
| - | 186 | -region: React.PropTypes.shape({ | -
| - | 187 | -/** | -
| - | 188 | -* Coordinates for the center of the map. | -
| - | 189 | -*/ | -
| - | 190 | -latitude: React.PropTypes.number.isRequired, | -
| - | 191 | -longitude: React.PropTypes.number.isRequired, | -
| - | 192 | -- |
| - | 193 | -/** | -
- 
-
- |
- - - - - | -|
| - | 194 | -* Distance between the minimum and the maximum latitude/longitude | -
|
-
-
- |
- - | -|
| - | 195 | -* to be displayed. | -
| - | 196 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 197 | -latitudeDelta: React.PropTypes.number, | -
| - | 198 | -longitudeDelta: React.PropTypes.number, | -
|
-
-
- |
- - | -|
| - | 199 | -}), | -
| - | 200 | -- |
| - | 201 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 202 | -* Map annotations with title and subtitle. | -
- 
-
- |
- - - - - | -|
| - | 203 | -*/ | -
| - | 204 | -annotations: React.PropTypes.arrayOf(React.PropTypes.shape({ | -
| - | 205 | -/** | -
| - | 206 | -* The location of the annotation. | -
| - | 207 | -*/ | -
| - | 208 | -latitude: React.PropTypes.number.isRequired, | -
| - | 209 | -longitude: React.PropTypes.number.isRequired, | -
| - | 210 | -- |
| - | 211 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 212 | -* Whether the pin drop should be animated or not | -
| - | 213 | -*/ | -
| - | 214 | -animateDrop: React.PropTypes.bool, | -
|
-
-
- |
- - - - - | -|
| - | 215 | -- |
|
-
- #2512
- |
- - - - - | -|
| - | 216 | -/** | -
| - | 217 | -* Whether the pin should be draggable or not | -
| - | 218 | -*/ | -
| - | 219 | -draggable: React.PropTypes.bool, | -
| - | 220 | -- |
| - | 221 | -/** | -
| - | 222 | -* Event that fires when the annotation drag state changes. | -
|
-
-
- |
- - - - - | -|
| - | 223 | -*/ | -
|
-
- #2512
- |
- - - - - | -|
| - | 224 | -onDragStateChange: React.PropTypes.func, | -
|
-
-
- |
- - - - - | -|
| - | 225 | -- |
| - | 226 | -/** | -
- 
-
- |
- - - - - | -|
| - | 227 | -* Event that fires when the annotation gets was tapped by the user | -
| - | 228 | -* and the callout view was displayed. | -
| - | 229 | -*/ | -
| - | 230 | -onFocus: React.PropTypes.func, | -
| - | 231 | -- |
| - | 232 | -/** | -
| - | 233 | -* Event that fires when another annotation or the mapview itself | -
| - | 234 | -* was tapped and a previously shown annotation will be closed. | -
| - | 235 | -*/ | -
| - | 236 | -onBlur: React.PropTypes.func, | -
| - | 237 | -- |
| - | 238 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 239 | -* Annotation title and subtile. | -
|
-
-
- |
- - - - - | -|
| - | 240 | -*/ | -
| - | 241 | -title: React.PropTypes.string, | -
| - | 242 | -subtitle: React.PropTypes.string, | -
- 
-
- |
- - - - - | -|
| - | 243 | -- |
|
-
-
- |
- - - - - | -|
| - | 244 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 245 | -* Callout views. | -
|
-
-
- |
- - - - - | -|
| - | 246 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 247 | -leftCalloutView: React.PropTypes.element, | -
| - | 248 | -rightCalloutView: React.PropTypes.element, | -
| - | 249 | -detailCalloutView: React.PropTypes.element, | -
|
-
-
- |
- - - - - | -|
| - | 250 | -- |
|
-
-
- |
- - - - - | -|
| - | 251 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 252 | -* The pin color. This can be any valid color string, or you can use one | -
| - | 253 | -* of the predefined PinColors constants. Applies to both standard pins | -
| - | 254 | -* and custom pin images. | -
|
-
-
- |
- - - - - | -|
| - | 255 | -* | -
| - | 256 | -* Note that on iOS 8 and earlier, only the standard PinColor constants | -
|
-
-
- |
- - - - - | -|
| - | 257 | -* are supported for regular pins. For custom pin images, any tintColor | -
|
-
-
- |
- - - - - | -|
| - | 258 | -* value is supported on all iOS versions. | -
|
-
-
- |
- - - - - | -|
| - | 259 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 260 | -tintColor: ColorPropType, | -
|
-
-
- |
- - - - - | -|
| - | 261 | -- |
| - | 262 | -/** | -
| - | 263 | -* Custom pin image. This must be a static image resource inside the app. | -
| - | 264 | -*/ | -
| - | 265 | -image: Image.propTypes.source, | -
- 
-
- |
- - - - - | -|
| - | 266 | -- |
- 
-
- |
- - - - - | -|
| - | 267 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 268 | -* Custom pin view. If set, this replaces the pin or custom pin image. | -
| - | 269 | -*/ | -
| - | 270 | -view: React.PropTypes.element, | -
| - | 271 | -- |
| - | 272 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 273 | -* annotation id | -
| - | 274 | -*/ | -
| - | 275 | -id: React.PropTypes.string, | -
|
-
-
- |
- - - - - | -|
| - | 276 | -- |
|
-
-
- |
- - - - - | -|
| - | 277 | -/** | -
| - | 278 | -* Deprecated. Use the left/right/detailsCalloutView props instead. | -
| - | 279 | -*/ | -
|
-
-
- |
- - - - - | -|
| - | 280 | -hasLeftCallout: deprecatedPropType( | -
| - | 281 | -React.PropTypes.bool, | -
| - | 282 | -'Use `leftCalloutView` instead.' | -
| - | 283 | -), | -
| - | 284 | -hasRightCallout: deprecatedPropType( | -
| - | 285 | -React.PropTypes.bool, | -
| - | 286 | -'Use `rightCalloutView` instead.' | -
| - | 287 | -), | -
| - | 288 | -onLeftCalloutPress: deprecatedPropType( | -
| - | 289 | -React.PropTypes.func, | -
| - | 290 | -'Use `leftCalloutView` instead.' | -
| - | 291 | -), | -
| - | 292 | -onRightCalloutPress: deprecatedPropType( | -
| - | 293 | -React.PropTypes.func, | -
| - | 294 | -'Use `rightCalloutView` instead.' | -
| - | 295 | -), | -
|
-
-
- |
- - - - - | -|
| - | 296 | -})), | -
| - | 297 | -- |
| - | 298 | -/** | -
| - | 299 | -* Map overlays | -
| - | 300 | -*/ | -
| - | 301 | -overlays: React.PropTypes.arrayOf(React.PropTypes.shape({ | -
| - | 302 | -/** | -
| - | 303 | -* Polyline coordinates | -
| - | 304 | -*/ | -
| - | 305 | -coordinates: React.PropTypes.arrayOf(React.PropTypes.shape({ | -
| - | 306 | -latitude: React.PropTypes.number.isRequired, | -
| - | 307 | -longitude: React.PropTypes.number.isRequired | -
| - | 308 | -})), | -
|
-
-
- |
- - - - - | -|
| - | 309 | -- |
|
-
-
- |
- - - - - | -|
| - | 310 | -/** | -
| - | 311 | -* Line attributes | -
| - | 312 | -*/ | -
| - | 313 | -lineWidth: React.PropTypes.number, | -
|
-
-
- |
- - - - - | -|
| - | 314 | -strokeColor: ColorPropType, | -
| - | 315 | -fillColor: ColorPropType, | -
|
-
-
- |
- - - - - | -|
| - | 316 | -- |
| - | 317 | -/** | -
| - | 318 | -* Overlay id | -
| - | 319 | -*/ | -
| - | 320 | -id: React.PropTypes.string | -
|
-
-
- |
- - - - - | -|
| - | 321 | -})), | -
| - | 322 | -- |
| - | 323 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 324 | -* Maximum size of the area that can be displayed. | -
|
-
-
- |
- - | -|
| - | 325 | -*/ | -
| - | 326 | -maxDelta: React.PropTypes.number, | -
| - | 327 | -- |
| - | 328 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 329 | -* Minimum size of the area that can be displayed. | -
|
-
-
- |
- - | -|
| - | 330 | -*/ | -
| - | 331 | -minDelta: React.PropTypes.number, | -
| - | 332 | -- |
| - | 333 | -/** | -
| - | 334 | -* Insets for the map's legal label, originally at bottom left of the map. | -
| - | 335 | -*/ | -
| - | 336 | -legalLabelInsets: EdgeInsetsPropType, | -
| - | 337 | -- |
| - | 338 | -/** | -
| - | 339 | -* Callback that is called continuously when the user is dragging the map. | -
| - | 340 | -*/ | -
| - | 341 | -onRegionChange: React.PropTypes.func, | -
| - | 342 | -- |
| - | 343 | -/** | -
| - | 344 | -* Callback that is called once, when the user is done moving the map. | -
| - | 345 | -*/ | -
| - | 346 | -onRegionChangeComplete: React.PropTypes.func, | -
|
-
-
- |
- - - - - | -|
| - | 347 | -- |
| - | 348 | -/** | -
|
-
-
- |
- - - - - | -|
| - | 349 | -* Deprecated. Use annotation `onFocus` and `onBlur` instead. | -
|
-
-
- |
- - - - - | -|
| - | 350 | -*/ | -
| - | 351 | -onAnnotationPress: React.PropTypes.func, | -
|
-
-
- |
- - - - - | -|
| - | 352 | -- |
| - | 353 | -/** | -
| - | 354 | -* @platform android | -
| - | 355 | -*/ | -
| - | 356 | -active: React.PropTypes.bool, | -
|
-
-
- |
- - | -|
| - | 357 | -}, | -
| - | 358 | -- |
|
-
-
- |
- - - - - | -|
| - | 359 | -statics: { | -
| - | 360 | -/** | -
| - | 361 | -* Standard iOS MapView pin color constants, to be used with the | -
| - | 362 | -* `annotation.tintColor` property. On iOS 8 and earlier these are the | -
| - | 363 | -* only supported values when using regular pins. On iOS 9 and later | -
| - | 364 | -* you are not obliged to use these, but they are useful for matching | -
| - | 365 | -* the standard iOS look and feel. | -
| - | 366 | -*/ | -
| - | 367 | -PinColors: { | -
| - | 368 | -RED: '#ff3b30', | -
| - | 369 | -GREEN: '#4cd964', | -
| - | 370 | -PURPLE: '#c969e0', | -
| - | 371 | -}, | -
| - | 372 | -}, | -
| - | 373 | -- |
|
-
-
- |
- - - - - | -|
| - | 374 | -render: function() { | -
|
-
-
- |
- - - - - | -|
| - | 375 | -let children = [], {annotations, overlays, followUserLocation} = this.props; | -
|
-
-
- |
- - - - - | -|
| - | 376 | -annotations = annotations && annotations.map((annotation: Object) => { | -
|
-
-
- |
- - - - - | -|
| - | 377 | -let { | -
| - | 378 | -id, | -
| - | 379 | -image, | -
| - | 380 | -tintColor, | -
| - | 381 | -view, | -
| - | 382 | -leftCalloutView, | -
| - | 383 | -rightCalloutView, | -
| - | 384 | -detailCalloutView, | -
| - | 385 | -} = annotation; | -
|
-
-
- |
- - - - - | -|
| - | 386 | -- |
|
-
-
- |
- - - - - | -|
| - | 387 | -if (!view && image && tintColor) { | -
| - | 388 | -view = <Image | -
| - | 389 | -style={{ | -
| - | 390 | -tintColor: processColor(tintColor), | -
| - | 391 | -}} | -
| - | 392 | -source={image} | -
| - | 393 | -/>; | -
|
-
-
- |
- - - - - | -|
| - | 394 | -image = undefined; | -
|
-
-
- |
- - - - - | -|
| - | 395 | -} | -
| - | 396 | -if (view) { | -
|
-
-
- |
- - - - - | -|
| - | 397 | -if (image) { | -
| - | 398 | -console.warn('`image` and `view` both set on annotation. Image will be ignored.'); | -
| - | 399 | -} | -
|
-
-
- |
- - - - - | -|
| - | 400 | -var viewIndex = children.length; | -
| - | 401 | -children.push(React.cloneElement(view, { | -
|
-
-
- |
- - - - - | -|
| - | 402 | -// $FlowFixMe - An array of styles should be fine | -
|
-
-
- |
- - - - - | -|
| - | 403 | -style: [styles.annotationView, view.props.style || {}] | -
| - | 404 | -})); | -
| - | 405 | -} | -
| - | 406 | -if (leftCalloutView) { | -
| - | 407 | -var leftCalloutViewIndex = children.length; | -
| - | 408 | -children.push(React.cloneElement(leftCalloutView, { | -
| - | 409 | -style: [styles.calloutView, leftCalloutView.props.style || {}] | -
| - | 410 | -})); | -
| - | 411 | -} | -
| - | 412 | -if (rightCalloutView) { | -
| - | 413 | -var rightCalloutViewIndex = children.length; | -
| - | 414 | -children.push(React.cloneElement(rightCalloutView, { | -
| - | 415 | -style: [styles.calloutView, rightCalloutView.props.style || {}] | -
| - | 416 | -})); | -
| - | 417 | -} | -
| - | 418 | -if (detailCalloutView) { | -
| - | 419 | -var detailCalloutViewIndex = children.length; | -
| - | 420 | -children.push(React.cloneElement(detailCalloutView, { | -
| - | 421 | -style: [styles.calloutView, detailCalloutView.props.style || {}] | -
| - | 422 | -})); | -
| - | 423 | -} | -
|
-
-
- |
- - - - - | -|
| - | 424 | -- |
|
-
-
- |
- - - - - | -|
| - | 425 | -const result = { | -
|
-
-
- |
- - - - - | -|
| - | 426 | -...annotation, | -
| - | 427 | -tintColor: tintColor && processColor(tintColor), | -
|
-
-
- |
- - - - - | -|
| - | 428 | -image, | -
|
-
-
- |
- - - - - | -|
| - | 429 | -viewIndex, | -
| - | 430 | -leftCalloutViewIndex, | -
| - | 431 | -rightCalloutViewIndex, | -
| - | 432 | -detailCalloutViewIndex, | -
| - | 433 | -view: undefined, | -
| - | 434 | -leftCalloutView: undefined, | -
| - | 435 | -rightCalloutView: undefined, | -
| - | 436 | -detailCalloutView: undefined, | -
|
-
-
- |
- - - - - | -|
| - | 437 | -}; | -
|
-
-
- |
- - - - - | -|
| - | 438 | -result.id = id || encodeURIComponent(JSON.stringify(result)); | -
| - | 439 | -result.image = image && resolveAssetSource(image); | -
| - | 440 | -return result; | -
|
-
-
- |
- - - - - | -|
| - | 441 | -}); | -
|
-
-
- |
- - - - - | -|
| - | 442 | -overlays = overlays && overlays.map((overlay: Object) => { | -
|
-
-
- |
- - - - - | -|
| - | 443 | -const {id, fillColor, strokeColor} = overlay; | -
| - | 444 | -const result = { | -
|
-
-
- |
- - - - - | -|
| - | 445 | -...overlay, | -
| - | 446 | -strokeColor: strokeColor && processColor(strokeColor), | -
| - | 447 | -fillColor: fillColor && processColor(fillColor), | -
| - | 448 | -}; | -
|
-
-
- |
- - - - - | -|
| - | 449 | -result.id = id || encodeURIComponent(JSON.stringify(result)); | -
| - | 450 | -return result; | -
|
-
-
- |
- - - - - | -|
| - | 451 | -}); | -
|
-
-
- |
- - - - - | -|
| - | 452 | -- |
|
-
-
- |
- - - - - | -|
| - | 453 | -const findByAnnotationId = (annotationId: string) => { | -
| - | 454 | -if (!annotations) { | -
| - | 455 | -return null; | -
| - | 456 | -} | -
| - | 457 | -for (let i = 0, l = annotations.length; i < l; i++) { | -
| - | 458 | -if (annotations[i].id === annotationId) { | -
| - | 459 | -return annotations[i]; | -
| - | 460 | -} | -
| - | 461 | -} | -
| - | 462 | -return null; | -
| - | 463 | -}; | -
| - | 464 | -- |
|
-
-
- |
- - - - - | -|
| - | 465 | -// TODO: these should be separate events, to reduce bridge traffic | -
|
-
-
- |
- - - - - | -|
| - | 466 | -let onPress, onAnnotationDragStateChange, onAnnotationFocus, onAnnotationBlur; | -
|
-
-
- |
- - - - - | -|
| - | 467 | -if (annotations) { | -
|
-
-
- |
- - - - - | -|
| - | 468 | -onPress = (event: Event) => { | -
|
-
-
- |
- - - - - | -|
| - | 469 | -if (event.nativeEvent.action === 'annotation-click') { | -
|
-
-
- |
- - - - - | -|
| - | 470 | -// TODO: Remove deprecated onAnnotationPress API call later. | -
|
-
-
- |
- - - - - | -|
| - | 471 | -this.props.onAnnotationPress && | -
| - | 472 | -this.props.onAnnotationPress(event.nativeEvent.annotation); | -
| - | 473 | -} else if (event.nativeEvent.action === 'callout-click') { | -
|
-
-
- |
- - - - - | -|
| - | 474 | -const annotation = findByAnnotationId(event.nativeEvent.annotationId); | -
| - | 475 | -if (annotation) { | -
| - | 476 | -// Pass the right function | -
| - | 477 | -if (event.nativeEvent.side === 'left' && annotation.onLeftCalloutPress) { | -
| - | 478 | -annotation.onLeftCalloutPress(event.nativeEvent); | -
| - | 479 | -} else if (event.nativeEvent.side === 'right' && annotation.onRightCalloutPress) { | -
| - | 480 | -annotation.onRightCalloutPress(event.nativeEvent); | -
|
-
-
- |
- - - - - | -|
| - | 481 | -} | -
|
-
-
- |
- - - - - | -|
| - | 482 | -} | -
| - | 483 | -} | -
|
-
-
- |
- - - - - | -|
| - | 484 | -}; | -
|
-
-
- |
- - - - - | -|
| - | 485 | -onAnnotationDragStateChange = (event: Event) => { | -
| - | 486 | -const annotation = findByAnnotationId(event.nativeEvent.annotationId); | -
| - | 487 | -if (annotation) { | -
| - | 488 | -// Call callback | -
| - | 489 | -annotation.onDragStateChange && | -
| - | 490 | -annotation.onDragStateChange(event.nativeEvent); | -
|
-
- #2512
- |
- - - - - | -|
| - | 491 | -} | -
|
-
-
- |
- - - - - | -|
| - | 492 | -}; | -
| - | 493 | -onAnnotationFocus = (event: Event) => { | -
| - | 494 | -const annotation = findByAnnotationId(event.nativeEvent.annotationId); | -
| - | 495 | -if (annotation && annotation.onFocus) { | -
| - | 496 | -annotation.onFocus(event.nativeEvent); | -
|
-
- #2512
- |
- - - - - | -|
| - | 497 | -} | -
|
-
-
- |
- - - - - | -|
| - | 498 | -}; | -
| - | 499 | -onAnnotationBlur = (event: Event) => { | -
| - | 500 | -const annotation = findByAnnotationId(event.nativeEvent.annotationId); | -
| - | 501 | -if (annotation && annotation.onBlur) { | -
| - | 502 | -annotation.onBlur(event.nativeEvent); | -
| - | 503 | -} | -
| - | 504 | -}; | -
|
-
-
- |
- - - - - | -|
| - | 505 | -} | -
|
-
-
- |
- - - - - | -|
| - | 506 | -- |
|
-
-
- |
- - - - - | -|
| - | 507 | -// TODO: these should be separate events, to reduce bridge traffic | -
| - | 508 | -if (this.props.onRegionChange || this.props.onRegionChangeComplete) { | -
| - | 509 | -var onChange = (event: Event) => { | -
| - | 510 | -if (event.nativeEvent.continuous) { | -
| - | 511 | -this.props.onRegionChange && | -
| - | 512 | -this.props.onRegionChange(event.nativeEvent.region); | -
| - | 513 | -} else { | -
| - | 514 | -this.props.onRegionChangeComplete && | -
| - | 515 | -this.props.onRegionChangeComplete(event.nativeEvent.region); | -
| - | 516 | -} | -
| - | 517 | -}; | -
|
-
-
- |
- - - - - | -|
| - | 518 | -} | -
| - | 519 | -- |
|
-
-
- |
- - - - - | -|
| - | 520 | -// followUserLocation defaults to true if showUserLocation is set | -
| - | 521 | -if (followUserLocation === undefined) { | -
| - | 522 | -followUserLocation = this.props.showUserLocation; | -
| - | 523 | -} | -
| - | 524 | -- |
|
-
-
- |
- - - - - | -|
| - | 525 | -return ( | -
| - | 526 | -<RCTMap | -
| - | 527 | -{...this.props} | -
| - | 528 | -annotations={annotations} | -
|
-
-
- |
- - - - - | -|
| - | 529 | -children={children} | -
|
-
-
- |
- - - - - | -|
| - | 530 | -followUserLocation={followUserLocation} | -
|
-
-
- |
- - - - - | -|
| - | 531 | -overlays={overlays} | -
|
-
-
- |
- - - - - | -|
| - | 532 | -onPress={onPress} | -
| - | 533 | -onChange={onChange} | -
|
-
- #2512
- |
- - - - - | -|
| - | 534 | -onAnnotationDragStateChange={onAnnotationDragStateChange} | -
|
-
-
- |
- - - - - | -|
| - | 535 | -onAnnotationFocus={onAnnotationFocus} | -
| - | 536 | -onAnnotationBlur={onAnnotationBlur} | -
|
-
-
- |
- - - - - | -|
| - | 537 | -/> | -
| - | 538 | -); | -
|
-
-
- |
- - | -|
| - | 539 | -}, | -
| - | 540 | -}); | -
| - | 541 | -- |
|
-
-
- |
- - - - - | -|
| - | 542 | -const styles = StyleSheet.create({ | -
| - | 543 | -annotationView: { | -
| - | 544 | -position: 'absolute', | -
| - | 545 | -backgroundColor: 'transparent', | -
| - | 546 | -}, | -
| - | 547 | -calloutView: { | -
| - | 548 | -position: 'absolute', | -
| - | 549 | -backgroundColor: 'white', | -
| - | 550 | -}, | -
| - | 551 | -}); | -
| - | 552 | -- |
| - | 553 | -const RCTMap = requireNativeComponent('RCTMap', MapView, { | -
|
-
- #2512
- |
- - - - - | -|
| - | 554 | -nativeOnly: { | -
| - | 555 | -onAnnotationDragStateChange: true, | -
|
-
-
- |
- - - - - | -|
| - | 556 | -onAnnotationFocus: true, | -
| - | 557 | -onAnnotationBlur: true, | -
|
-
- #2512
- |
- - - - - | -|
| - | 558 | -onChange: true, | -
| - | 559 | -onPress: true | -
| - | 560 | -} | -
|
-
-
- |
- - - - - | -|
| - | 561 | -}); | -
|
-
-
- |
- - | -|
| - | 562 | -- |
| - | 563 | -module.exports = MapView; | -
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+