support for custom annotation views #421
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,283 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import { | ||
| View, | ||
| requireNativeComponent, | ||
| StyleSheet, | ||
| Platform, | ||
| NativeModules, | ||
| Animated, | ||
| findNodeHandle, | ||
| } from 'react-native'; | ||
|
|
||
| import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; | ||
|
|
||
| const viewConfig = { | ||
| uiViewClassName: 'RCTMapboxAnnotation', | ||
| validAttributes: { | ||
| coordinate: true, | ||
| }, | ||
| }; | ||
|
|
||
| const propTypes = { | ||
| ...View.propTypes, | ||
|
|
||
| // TODO(lmr): get rid of these? | ||
| identifier: PropTypes.string, | ||
| reuseIdentifier: PropTypes.string, | ||
|
|
||
| /** | ||
| * The title of the marker. This is only used if the <Marker /> component has no children that | ||
| * are an `<MapView.Callout />`, in which case the default callout behavior will be used, which | ||
| * will show both the `title` and the `description`, if provided. | ||
| */ | ||
| title: PropTypes.string, | ||
|
|
||
| /** | ||
| * The title of the marker. This is only used if the <Marker /> component has no children that | ||
| * are an `<MapView.Callout />`, in which case the default callout behavior will be used, which | ||
| * will show both the `title` and the `description`, if provided. | ||
| */ | ||
| subtitle: PropTypes.string, | ||
|
|
||
| /** | ||
| * The description of the marker. This is only used if the <Marker /> component has no children | ||
| * that are an `<MapView.Callout />`, in which case the default callout behavior will be used, | ||
| * which will show both the `title` and the `description`, if provided. | ||
| */ | ||
| description: PropTypes.string, | ||
|
|
||
| /** | ||
| * A custom image to be used as the marker's icon. Only local image resources are allowed to be | ||
| * used. | ||
| */ | ||
| image: PropTypes.any, | ||
|
|
||
| /** | ||
| * 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. | ||
| */ | ||
| pinColor: PropTypes.string, | ||
|
|
||
| /** | ||
| * The coordinate for the marker. | ||
| */ | ||
| coordinate: PropTypes.shape({ | ||
| /** | ||
| * Coordinates for the anchor point of the marker. | ||
| */ | ||
| latitude: PropTypes.number.isRequired, | ||
| longitude: PropTypes.number.isRequired, | ||
| }).isRequired, | ||
|
|
||
| /** | ||
| * The offset (in points) at which to display the view. | ||
| * | ||
| * 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. | ||
| * | ||
| * For android, see the `anchor` prop. | ||
| * | ||
| * @platform ios | ||
| */ | ||
| centerOffset: PropTypes.shape({ | ||
| /** | ||
| * Offset from the anchor point | ||
| */ | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired, | ||
| }), | ||
|
|
||
| /** | ||
| * The offset (in points) at which to place the callout bubble. | ||
| * | ||
| * 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. | ||
| * | ||
| * For android, see the `calloutAnchor` prop. | ||
| * | ||
| * @platform ios | ||
| */ | ||
| calloutOffset: PropTypes.shape({ | ||
| /** | ||
| * Offset to the callout | ||
| */ | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired, | ||
| }), | ||
|
|
||
| /** | ||
| * Sets the anchor point for the marker. | ||
| * | ||
| * The anchor specifies the point in the icon image that is anchored to the marker's position | ||
| * on the Earth's surface. | ||
| * | ||
| * 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). | ||
| * | ||
| * For ios, see the `centerOffset` prop. | ||
| * | ||
| * @platform android | ||
| */ | ||
| anchor: PropTypes.shape({ | ||
| /** | ||
| * Offset to the callout | ||
| */ | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired, | ||
| }), | ||
|
|
||
| /** | ||
| * 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 `andor` prop for more | ||
| * details. | ||
| * | ||
| * The default is the top middle of the image. | ||
| * | ||
| * For ios, see the `calloutOffset` prop. | ||
| * | ||
| * @platform android | ||
| */ | ||
| calloutAnchor: PropTypes.shape({ | ||
| /** | ||
| * Offset to the callout | ||
| */ | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired, | ||
| }), | ||
|
|
||
| /** | ||
| * Sets whether this marker should be flat against the map true or a billboard facing the | ||
| * camera false. | ||
| * | ||
| * @platform android | ||
| */ | ||
| flat: PropTypes.bool, | ||
|
|
||
| draggable: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Callback that is called when the user presses on the marker | ||
| */ | ||
| onPress: PropTypes.func, | ||
|
|
||
| /** | ||
| * Callback that is called when the user selects the marker, before the callout is shown. | ||
| * | ||
| * @platform ios | ||
| */ | ||
| onSelect: PropTypes.func, | ||
|
|
||
| /** | ||
| * Callback that is called when the marker is deselected, before the callout is hidden. | ||
| * | ||
| * @platform ios | ||
| */ | ||
| onDeselect: PropTypes.func, | ||
|
|
||
| /** | ||
| * Callback that is called when the user taps the callout view. | ||
| */ | ||
| onCalloutPress: PropTypes.func, | ||
|
|
||
| /** | ||
| * Callback that is called when the user initiates a drag on this marker (if it is draggable) | ||
| */ | ||
| onDragStart: PropTypes.func, | ||
|
|
||
| /** | ||
| * Callback called continuously as the marker is dragged | ||
| */ | ||
| onDrag: PropTypes.func, | ||
|
|
||
| /** | ||
| * 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 | ||
| */ | ||
| onDragEnd: PropTypes.func, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| onPress() {}, | ||
| }; | ||
|
|
||
| class MapboxAnnotation extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.showCallout = this.showCallout.bind(this); | ||
| this.hideCallout = this.hideCallout.bind(this); | ||
| } | ||
|
|
||
| showCallout() { | ||
| this._runCommand('showCallout', []); | ||
| } | ||
|
|
||
| hideCallout() { | ||
| this._runCommand('hideCallout', []); | ||
| } | ||
|
|
||
| _getHandle() { | ||
| return findNodeHandle(this.marker); | ||
| } | ||
|
|
||
| _runCommand(name, args) { | ||
| switch (Platform.OS) { | ||
| case 'android': | ||
| NativeModules.UIManager.dispatchViewManagerCommand( | ||
| this._getHandle(), | ||
| NativeModules.UIManager.RCTMapboxAnnotation.Commands[name], | ||
| args | ||
| ); | ||
| break; | ||
|
|
||
| case 'ios': | ||
| NativeModules.RCTMapboxAnnotationManager[name].apply( | ||
| NativeModules.RCTMapboxAnnotationManager[name], | ||
| [this._getHandle(), ...args] | ||
| ); | ||
| break; | ||
|
|
||
| default: | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| let image; | ||
| if (this.props.image) { | ||
| image = resolveAssetSource(this.props.image) || {}; | ||
| image = image.uri; | ||
|
There was a problem hiding this comment. It looks like a specified but invalid image will fail silently here. Does |
||
| } | ||
|
|
||
| return ( | ||
| <RCTMapboxAnnotation | ||
| ref={ref => { this.marker = ref; }} | ||
| {...this.props} | ||
| image={image} | ||
| style={[styles.marker, this.props.style]} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| MapboxAnnotation.propTypes = propTypes; | ||
| MapboxAnnotation.defaultProps = defaultProps; | ||
| MapboxAnnotation.viewConfig = viewConfig; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| marker: { | ||
| position: 'absolute', | ||
| backgroundColor: 'transparent', | ||
| }, | ||
| }); | ||
|
|
||
| const RCTMapboxAnnotation = requireNativeComponent('RCTMapboxAnnotation', MapboxAnnotation); | ||
| module.exports = MapboxAnnotation; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /** | ||
| * Copyright (c) 2015-present, Facebook, Inc. | ||
|
There was a problem hiding this comment. This copyright block is unneeded, right? Or is this adapted from somewhere? |
||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| */ | ||
|
|
||
| #import "RCTMapboxAnnotation.h" | ||
|
|
||
| #import <MapBox/MapBox.h> | ||
| #import <UIKit/UIKit.h> | ||
|
|
||
| #import "RCTConvert+MapKit.h" | ||
| #import "RCTComponent.h" | ||
| #import "RCTMapboxGL.h" | ||
|
|
||
| @class RCTBridge; | ||
|
|
||
| @interface RCTMapboxAnnotation : MGLAnnotationView <MGLAnnotation> | ||
|
|
||
| @property (nonatomic, weak, nullable) RCTMapboxGL *map; | ||
| @property (nonatomic, weak, nullable) RCTBridge *bridge; | ||
| /** | ||
| The center point (specified as a map coordinate) of the annotation. (required) | ||
| (read-only) | ||
| */ | ||
| @property (nonatomic) CLLocationCoordinate2D coordinate; | ||
|
|
||
| /** | ||
| The string containing the annotation’s title. | ||
|
|
||
| Although this property is optional, if you support the selection of annotations | ||
| in your map view, you are expected to provide this property. This string is | ||
| displayed in the callout for the associated annotation. | ||
| */ | ||
| @property (nonatomic, copy, nullable) NSString *title; | ||
|
|
||
| /** | ||
| The string containing the annotation’s subtitle. | ||
|
|
||
| This string is displayed in the callout for the associated annotation. | ||
| */ | ||
| @property (nonatomic, copy, nullable) NSString *subtitle; | ||
|
|
||
|
|
||
| @end | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like an unnecessary trailing
,hereThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed