React NativeMapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, tintColor: string, image: Image.propTypes.source, 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.
-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 overlaid
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.
overlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: string, fillColor: string, id: string}] #
Map overlays
pitchEnabled bool #
When this property is set to true and a valid camera is associated
+
MapView
Edit on GitHubProps #
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
angle is ignored and the map is always displayed as if the user
@@ -14,16 +13,19 @@ Default value is false.
NOTE: You need to ad Info.plist to enable geolocation, otherwise it is going to fail silently!
style View#style #
Used to style and layout the MapView. See StyleSheet.js and
ViewStylePropTypes.js for more info.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
-Default value is true.
androidactive bool #
iosshowsCompass bool #
If false compass won't be displayed on the map.
+Default value is true.
androidactive bool #
iosannotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: string, number, image: Image.propTypes.source, view: element, id: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function}] #
Map annotations with title/subtitle.
ioslegalLabelInsets {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.
iosmapType 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 overlaid
iosmaxDelta number #
Maximum size of area that can be displayed.
iosminDelta number #
Minimum size of area that can be displayed.
iosoverlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: string, number, fillColor: string, number, id: string}] #
Map overlays
iosshowsCompass bool #
If false compass won't be displayed on the map.
Default value is true.
iosshowsPointsOfInterest bool #
If false points of interest won't be displayed on the map.
Default value is true.
Edit on GitHubExamples #
'use strict';
var React = require('react-native');
var {
+ Image,
MapView,
StyleSheet,
Text,
TextInput,
+ TouchableOpacity,
View,
} = React;
@@ -242,14 +244,14 @@ type MapViewExampleState = });
-type CalloutMapViewExampleState = {
+type AnnotationExampleState = {
isFirstLoad: boolean,
annotations?: Annotations,
mapRegion?: MapRegion,
};
-var CalloutMapViewExample = React.createClass({
+var AnnotationExample = React.createClass({
- getInitialState(): CalloutMapViewExampleState {
+ getInitialState(): AnnotationExampleState {
return {
isFirstLoad: true,
};
@@ -263,11 +265,7 @@ type CalloutMapViewExampleState = : [{
longitude: region.longitude,
latitude: region.latitude,
- title: 'More Info...',
- hasRightCallout: true,
- onRightCalloutPress: () => {
- alert('You Are Here');
- },
+ ...this.props.annotation,
}],
});
};
@@ -285,141 +283,6 @@ type CalloutMapViewExampleState = });
-type CustomPinColorMapViewExampleState = {
- isFirstLoad: boolean,
- annotations?: Annotations,
- mapRegion?: MapRegion,
-};
-var CustomPinColorMapViewExample = React.createClass({
-
- getInitialState(): CustomPinColorMapViewExampleState {
- 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}
- />
- );
- },
-
-});
-
-type CustomPinImageMapViewExampleState = {
- isFirstLoad: boolean,
- annotations?: Annotations,
- mapRegion?: MapRegion,
-};
-var CustomPinImageMapViewExample = React.createClass({
-
- getInitialState(): CustomPinImageMapViewExampleState {
- 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}
- />
- );
- },
-
-});
-
-type Overlays = Array<{
- coordinates?: Array<{
- latitude: number,
- longitude: number,
- }>,
- lineWidth?: number,
- strokeColor?: string,
- fillColor?: string,
- id?: string,
-}>;
-type CustomOverlayMapViewExampleState = {
- isFirstLoad: boolean,
- overlays?: Overlays,
- annotations?: Annotations,
- mapRegion?: MapRegion,
-};
-var CustomOverlayMapViewExample = React.createClass({
-
- getInitialState(): CustomOverlayMapViewExampleState {
- return {
- isFirstLoad: true,
- };
- },
-
- render() {
- if (this.state.isFirstLoad) {
- var onRegionChangeComplete = (region) => {
- this.setState({
- isFirstLoad: false,
- overlays: [{
- coordinates:[
- {latitude: 32.47, longitude: -107.85},
- {latitude: 45.13, longitude: -94.48},
- {latitude: 39.27, longitude: -83.25},
- {latitude: 32.47, longitude: -107.85},
- ],
- strokeColor: '#f007',
- lineWidth: 3,
- }],
- });
- };
- }
-
- return (
- <MapView
- style={styles.map}
- onRegionChangeComplete={onRegionChangeComplete}
- region={this.state.mapRegion}
- overlays={this.state.overlays}
- />
- );
- },
-
-});
-
var styles = StyleSheet.create({
map: {
height: 150,
@@ -454,36 +317,92 @@ exports.description .examples = [
{
title: 'Map',
- render(): ReactElement { return <MapViewExample />; }
+ render() {
+ return <MapViewExample />;
+ }
},
{
title: 'Map shows user location',
render() {
- return <MapView style={styles.map} showsUserLocation={true} />;
+ return <MapView style={styles.map} showsUserLocation={true} />;
}
},
{
title: 'Callout example',
render() {
- return <CalloutMapViewExample style={styles.map} />;
+ return <AnnotationExample style={styles.map} annotation={{
+ title: 'More Info...',
+ rightCalloutView: (
+ <TouchableOpacity
+ onPress={() => {
+ alert('You Are Here');
+ }}>
+ <Image
+ style={{width:30, height:30}}
+ source={require('image!uie_thumb_selected')}
+ />
+ </TouchableOpacity>
+ ),
+ }}/>;
}
},
{
title: 'Custom pin color',
render() {
- return <CustomPinColorMapViewExample style={styles.map} />;
+ return <AnnotationExample style={styles.map} annotation={{
+ title: 'You Are Purple',
+ tintColor: MapView.PinColors.PURPLE,
+ }}/>;
}
},
{
title: 'Custom pin image',
render() {
- return <CustomPinImageMapViewExample style={styles.map} />;
+ return <AnnotationExample style={styles.map} annotation={{
+ title: 'Thumbs Up!',
+ image: require('image!uie_thumb_big'),
+ }}/>;
+ }
+ },
+ {
+ title: 'Custom pin view',
+ render() {
+ return <AnnotationExample style={styles.map} annotation={{
+ title: 'Thumbs Up!',
+ view: <View style={{
+ alignItems: 'center',
+ }}>
+ <Text style={{fontWeight: 'bold', color: '#f007'}}>
+ Thumbs Up!
+ </Text>
+ <Image
+ style={{width: 90, height: 65, resizeMode: 'cover'}}
+ source={require('image!uie_thumb_big')}
+ />
+ </View>,
+ }}/>;
}
},
{
title: 'Custom overlay',
render() {
- return <CustomOverlayMapViewExample style={styles.map} />;
+ return <MapView
+ style={styles.map}
+ region={{
+ latitude: 39.06,
+ longitude: -95.22,
+ }}
+ overlays={[{
+ coordinates:[
+ {latitude: 32.47, longitude: -107.85},
+ {latitude: 45.13, longitude: -94.48},
+ {latitude: 39.27, longitude: -83.25},
+ {latitude: 32.47, longitude: -107.85},
+ ],
+ strokeColor: '#f007',
+ lineWidth: 3,
+ }]}
+ />;
}
},
];