Skip to content

Commit

Permalink
Merge pull request react-native-maps#675 from opendoor-labs/zindex_pr
Browse files Browse the repository at this point in the history
[zIndex]  Add support for setting zIndex on markers
  • Loading branch information
Spike Brehm authored Oct 13, 2016
2 parents 15c5875 + cd2f6d9 commit f45e755
Show file tree
Hide file tree
Showing 10 changed files with 138 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ public class AirMapMarker extends AirMapFeature {
private float rotation = 0.0f;
private boolean flat = false;
private boolean draggable = false;
private int zIndex = 0;

private float calloutAnchorX;
private float calloutAnchorY;
Expand Down Expand Up @@ -173,6 +174,14 @@ public void setDraggable(boolean draggable) {
update();
}

public void setZIndex(int zIndex) {
this.zIndex = zIndex;
if (marker != null) {
marker.setZIndex(zIndex);
}
update();
}

public void setMarkerHue(float markerHue) {
this.markerHue = markerHue;
update();
Expand Down Expand Up @@ -288,6 +297,7 @@ private MarkerOptions createMarkerOptions() {
options.rotation(rotation);
options.flat(flat);
options.draggable(draggable);
options.zIndex(zIndex);
options.icon(getIcon());
return options;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,14 @@ public void setDraggable(AirMapMarker view, boolean draggable) {
view.setDraggable(draggable);
}

@Override
@ReactProp(name = "zIndex", defaultFloat = 0.0f)
public void setZIndex(AirMapMarker view, float zIndex) {
super.setZIndex(view, zIndex);
int integerZIndex = Math.round(zIndex);
view.setZIndex(integerZIndex);
}

@Override
public void addView(AirMapMarker parent, View child, int index) {
// if an <Callout /> component is a child, then it is a callout view, NOT part of the
Expand Down
2 changes: 2 additions & 0 deletions example/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import FitToSuppliedMarkers from './examples/FitToSuppliedMarkers';
import FitToCoordinates from './examples/FitToCoordinates';
import LiteMapView from './examples/LiteMapView';
import CustomTiles from './examples/CustomTiles';
import ZIndexMarkers from './examples/ZIndexMarkers';
import StaticMap from './examples/StaticMap';

const IOS = Platform.OS === 'ios';
Expand Down Expand Up @@ -138,6 +139,7 @@ class App extends React.Component {
[FitToCoordinates, 'Fit Map To Coordinates'],
[LiteMapView, 'Android Lite MapView'],
[CustomTiles, 'Custom Tiles'],
[ZIndexMarkers, 'Position Markers with Z-index', true],
]
// Filter out examples that are not yet supported for Google Maps on iOS.
.filter(example => ANDROID || (IOS && (example[2] || !this.state.useGoogleMaps)))
Expand Down
100 changes: 100 additions & 0 deletions example/examples/ZIndexMarkers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from 'react';
import {
Dimensions,
StyleSheet,
Text,
View,
} from 'react-native';

import MapView from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.733858;
const LONGITUDE = -122.446549;
const MARKERS_LATITUDE_DELTA = 0.03;
const MARKERS_LONGITUDE_DELTA = MARKERS_LATITUDE_DELTA * ASPECT_RATIO;
const MAP_LATITUDE_DELTA = 0.3;
const MAP_LONGITUDE_DELTA = MAP_LATITUDE_DELTA * ASPECT_RATIO;
const NUM_MARKERS = 100;
const PERCENT_SPECIAL_MARKERS = 0.1;

class ZIndexMarkers extends React.Component {
constructor(props) {
super(props);

const markerInfo = [];
for (let i = 1; i < NUM_MARKERS; i++) {
markerInfo.push({
latitude: (((Math.random() * 2) - 1) * MARKERS_LATITUDE_DELTA) + LATITUDE,
longitude: (((Math.random() * 2) - 1) * MARKERS_LONGITUDE_DELTA) + LONGITUDE,
isSpecial: Math.random() < PERCENT_SPECIAL_MARKERS,
id: i,
});
}

this.state = {
markerInfo,
};
}

render() {
const markers = this.state.markerInfo.map((markerInfo) =>
<MapView.Marker
coordinate={markerInfo}
key={markerInfo.id}
pinColor={markerInfo.isSpecial ? '#c5a620' : null}
style={markerInfo.isSpecial ? styles.specialMarker : null}
/>
);

return (
<View style={styles.container}>
<MapView
provider={this.props.provider}
ref={ref => { this.map = ref; }}
style={styles.map}
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: MAP_LATITUDE_DELTA,
longitudeDelta: MAP_LONGITUDE_DELTA,
}}
>
{markers}
</MapView>
<View style={styles.textContainer}>
<Text>The yellow markers have a higher zIndex and appear above other markers.</Text>
</View>
</View>
);
}
}

ZIndexMarkers.propTypes = {
provider: MapView.ProviderPropType,
};

const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
textContainer: {
backgroundColor: 'white',
borderRadius: 4,
marginHorizontal: 40,
marginVertical: 20,
padding: 10,
},
specialMarker: {
zIndex: 1,
},
});

module.exports = ZIndexMarkers;
1 change: 1 addition & 0 deletions ios/AirGoogleMaps/AIRGoogleMapMarker.h
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *subtitle;
@property (nonatomic, strong) UIColor *pinColor;
@property (nonatomic, assign) NSInteger zIndex;
@property (nonatomic, assign) BOOL draggable;

- (void)showCalloutView;
Expand Down
6 changes: 6 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapMarker.m
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,12 @@ - (void)setPinColor:(UIColor *)pinColor {
_realMarker.icon = [GMSMarker markerImageWithColor:pinColor];
}

- (void)setZIndex:(NSInteger)zIndex
{
_zIndex = zIndex;
_realMarker.zIndex = (int)zIndex;
}

- (void)setDraggable:(BOOL)draggable {
_realMarker.draggable = draggable;
}
Expand Down
1 change: 1 addition & 0 deletions ios/AirGoogleMaps/AIRGoogleMapMarkerManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ - (UIView *)view
RCT_EXPORT_VIEW_PROPERTY(title, NSString)
RCT_REMAP_VIEW_PROPERTY(description, subtitle, NSString)
RCT_EXPORT_VIEW_PROPERTY(pinColor, UIColor)
RCT_EXPORT_VIEW_PROPERTY(zIndex, NSInteger)
RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onDragStart, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onDrag, RCTDirectEventBlock)
Expand Down
1 change: 1 addition & 0 deletions ios/AirMaps/AIRMapMarker.h
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
@property (nonatomic, copy) NSString *subtitle;
@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
@property (nonatomic, strong) UIColor *pinColor;
@property (nonatomic, assign) NSInteger zIndex;

@property (nonatomic, copy) RCTBubblingEventBlock onPress;
@property (nonatomic, copy) RCTDirectEventBlock onSelect;
Expand Down
8 changes: 8 additions & 0 deletions ios/AirMaps/AIRMapMarker.m
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ - (MKAnnotationView *)getAnnotationView
}

_pinView.draggable = self.draggable;
_pinView.layer.zPosition = self.zIndex;

// TODO(lmr): Looks like this API was introduces in iOS 8. We may want to handle differently for earlier
// versions. Right now it's just leaving it with the default color. People needing the colors are free to
Expand All @@ -89,6 +90,7 @@ - (MKAnnotationView *)getAnnotationView
// if it has a non-null image, it means we want to render a custom marker with the image.
// In either case, we want to return the AIRMapMarker since it is both an MKAnnotation and an
// MKAnnotationView all at the same time.
self.layer.zPosition = self.zIndex;
return self;
}
}
Expand Down Expand Up @@ -236,4 +238,10 @@ - (void)setPinColor:(UIColor *)pinColor
}
}

- (void)setZIndex:(NSInteger)zIndex
{
_zIndex = zIndex;
self.layer.zPosition = _zIndex;
}

@end
1 change: 1 addition & 0 deletions ios/AirMaps/AIRMapMarkerManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ - (UIView *)view
RCT_REMAP_VIEW_PROPERTY(image, imageSrc, NSString)
RCT_EXPORT_VIEW_PROPERTY(pinColor, UIColor)
RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
RCT_EXPORT_VIEW_PROPERTY(zIndex, NSInteger)

RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onSelect, RCTDirectEventBlock)
Expand Down

0 comments on commit f45e755

Please sign in to comment.