Merge pull request #675 from opendoor-labs/zindex_pr

[zIndex]  Add support for setting zIndex on markers

android/src/main/java/com/airbnb/android/react/maps/AirMapMarker.java

@@ -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;
@@ -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();
@@ -288,6 +297,7 @@ private MarkerOptions createMarkerOptions() {
         options.rotation(rotation);
         options.flat(flat);
         options.draggable(draggable);
+        options.zIndex(zIndex);
         options.icon(getIcon());
         return options;
     }

android/src/main/java/com/airbnb/android/react/maps/AirMapMarkerManager.java

@@ -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

example/App.js

@@ -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';
@@ -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)))

example/examples/ZIndexMarkers.js

@@ -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;

ios/AirGoogleMaps/AIRGoogleMapMarker.h

@@ -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;

ios/AirGoogleMaps/AIRGoogleMapMarker.m

@@ -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;
 }

ios/AirGoogleMaps/AIRGoogleMapMarkerManager.m

@@ -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)

ios/AirMaps/AIRMapMarker.h

@@ -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;

ios/AirMaps/AIRMapMarker.m

@@ -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
@@ -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;
     }
 }
@@ -236,4 +238,10 @@ - (void)setPinColor:(UIColor *)pinColor
     }
 }
 
+- (void)setZIndex:(NSInteger)zIndex
+{
+    _zIndex = zIndex;
+    self.layer.zPosition = _zIndex;
+}
+
 @end

ios/AirMaps/AIRMapMarkerManager.m

@@ -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)