Commit Graph

5 Commits

Author SHA1 Message Date
Nick Lockwood f9dfb90a35 Added ability to use a custom view for MapView annotations
Summary:
public
This diff adds the ability to specify a custom React component (aka view) to be displayed as a MapView pin.

This makes it possible to use remote images (using an <Image/> component), or text (using a <Text/> component), or anything else.

One consequence of this is that MapView can no longer support arbitrary subviews. To place views in front the map, add them to a separate container view.

Reviewed By: tadeuzagallo

Differential Revision: D2764790

fb-gh-sync-id: e16b44e866c2d76c76b0cb35ef9eefbfc68d6719
2015-12-17 06:46:33 -08:00
Tim Park 8911b72d9e Add Polyline support to MapView
Summary: Per issue #1925, add support for Polyline to MapView.

Briefly, if you have a MapView declared as:

    <MapView
      annotations={this.state.annotations}
      overlays={this.state.overlays}
      style={styles.map}
      region={this.state.region}
      ref="mapView"
    />

then setting

    this.state.overlays = [{
      coordinates: [
        { latitude: 35.5, longitude: -5.5 },
        { latitude: 35.6, longitude: -5.6 },
        ...
      ],
      strokeColor: 'rgba(255, 0, 0, 0.5)',
      lineWidth: 3,
    }];

will draw a red line between the points in locations with a width of 3 and equally blended with the background.
Closes https://github.com/facebook/react-native/pull/4153

Reviewed By: svcscm

Differential Revision: D2697347

Pulled By: nicklockwood

fb-gh-sync-id: a436e4ed8d4e43f2872b39b4694fad7c02de8fe5
2015-11-26 08:54:16 -08:00
David Mohl 99bc08cf61 [MapView] Support for annotation callouts, annotation press, callout presses and pin animation
Summary:
Started from here - https://github.com/facebook/react-native/issues/1120. Most functionality for annotations were missing so I started implementing and somehow got caught up until the entire thing was done.

![screen shot 2015-05-12 at 10 07 43 pm](https://cloud.githubusercontent.com/assets/688326/7588677/8479a7a4-f8f9-11e4-99a4-1dc3c7691810.png)

2 new events:
- callout presses (left / right)
- annotation presses

6 new properties for annotations:
- hasLeftCallout
- hasRightCallout
- onLeftCalloutPress
- onRightCalloutPress
- animateDrop
- id

1 new property for MapView
- onAnnotationPress

---
Now the important thing is, that I implemented all of this the way "I would do it". I am not sure this is the 'reacty' way so please let me know my mistakes 😄

The problem is that there is no real way to identify annotations which makes it difficult to distinguish which one got clicked. The idea is to pass a `id` and whether it has callouts the entire way with the annotation. I had to
Closes https://github.com/facebook/react-native/pull/1247
Github Author: David Mohl <me@dave.cx>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-25 09:15:21 -08:00
Adam Krell 04b3b52726 Add map type property (standard, satellite, hybrid) to MapView.
Summary:
Here is an example project demonstrating this pull request: [AKMapView](https://github.com/adamkrell/AKMapView)
Closes https://github.com/facebook/react-native/pull/1503
Github Author: Adam Krell <akrell@bethanyassociates.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-11 10:53:41 -08:00
guru inamdar 7a68691686 MapView to support MKPointAnnotation using new attribute annotate in Map...
Summary:
### MapView to support Pin annotation

    var pinLocation = {
			latitude: property.latitude,
			longitude: property.longitude,
			title: property.title
    };
    this.state = {propertyPoint: pinLocation};
    <MapView style={styles.map} region={this.state.region} annotate={this.state.propertyPoint}>
    </MapView>
![mapview-pinannotation](https://cloud.githubusercontent.com/assets/845379/7100280/6c1ffc08-dfe5-11e4-9d1b-8da6a65da1bc.png)

Closes https://github.com/facebook/react-native/pull/810
Github Author: guru inamdar <guru.inamdar@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-04-14 18:03:37 -08:00