diff --git a/docs/mapview.html b/docs/mapview.html index d3936b88af1..4f9613f1ae8 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -MapView – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

MapView

Edit on GitHubProps #

View props... #

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] #

Map annotations with title/subtitle.

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. +MapView – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

MapView

Edit on GitHubProps #

View props... #

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string, tintColor: string, image: Image.propTypes.source}] #

Map annotations with title/subtitle.

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. See EdgeInsetsPropType.js for more information.

mapType enum('standard', 'satellite', 'hybrid') #

The map type to be displayed.

  • standard: standard road map (default)
  • satellite: satellite view
  • hybrid: satellite view with roads and points of interest overlayed

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onAnnotationPress function #

Callback that is called once, when the user taps an annotation.

onRegionChange function #

Callback that is called continuously when the user is dragging the map.

onRegionChangeComplete function #

Callback that is called once, when the user is done moving the map.

pitchEnabled bool #

When this property is set to true and a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set to false, the camera’s pitch @@ -152,9 +152,6 @@ Default value is true.

}); +var CalloutMapViewExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + }; + }, + + render() { + if (this.state.isFirstLoad) { + var onRegionChangeComplete = (region) => { + this.setState({ + isFirstLoad: false, + annotations: [{ + longitude: region.longitude, + latitude: region.latitude, + title: 'More Info...', + hasRightCallout: true, + onRightCalloutPress: () => { + alert('You Are Here'); + }, + }], + }); + }; + } + + return ( + <MapView + style={styles.map} + onRegionChangeComplete={onRegionChangeComplete} + region={this.state.mapRegion} + annotations={this.state.annotations} + /> + ); + }, + +}); + +var CustomPinColorMapViewExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + }; + }, + + render() { + if (this.state.isFirstLoad) { + var onRegionChangeComplete = (region) => { + this.setState({ + isFirstLoad: false, + annotations: [{ + longitude: region.longitude, + latitude: region.latitude, + title: 'You Are Purple', + tintColor: MapView.PinColors.PURPLE, + }], + }); + }; + } + + return ( + <MapView + style={styles.map} + onRegionChangeComplete={onRegionChangeComplete} + region={this.state.mapRegion} + annotations={this.state.annotations} + /> + ); + }, + +}); + +var CustomPinImageMapViewExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + }; + }, + + render() { + if (this.state.isFirstLoad) { + var onRegionChangeComplete = (region) => { + this.setState({ + isFirstLoad: false, + annotations: [{ + longitude: region.longitude, + latitude: region.latitude, + title: 'Thumbs Up!', + image: require('image!uie_thumb_big'), + }], + }); + }; + } + + return ( + <MapView + style={styles.map} + onRegionChangeComplete={onRegionChangeComplete} + region={this.state.mapRegion} + annotations={this.state.annotations} + /> + ); + }, + +}); + var styles = StyleSheet.create({ map: { height: 150, @@ -252,7 +357,25 @@ exports.examples render() { return <MapView style={styles.map} showsUserLocation={true} />; } - } + }, + { + title: 'Callout example', + render() { + return <CalloutMapViewExample style={styles.map} />; + } + }, + { + title: 'Custom pin color', + render() { + return <CustomPinColorMapViewExample style={styles.map} />; + } + }, + { + title: 'Custom pin image', + render() { + return <CustomPinImageMapViewExample style={styles.map} />; + } + }, ];

Next →