[ios] Allow annotation views to be flattened (#5067)

* [ios] wip flatten annotation view

* [ios] wip flatten annotation view

* [ios] naming conventions

* [ios] removed unused property

platform/ios/Mapbox.playground/Contents.swift

@@ -5,17 +5,30 @@ import Mapbox
 let width: CGFloat = 700
 let height: CGFloat = 800
 
+class Responder: NSObject {
+    var mapView: MGLMapView?
+    func togglePitch(sender: UISwitch)  {
+        let camera = mapView!.camera
+        camera.pitch = sender.on ? 60 : 0
+        mapView!.setCamera(camera, animated: false)
+    }
+}
+
 //: A control panel
 let panelWidth: CGFloat = 200
 let panel = UIView(frame: CGRect(x: width - panelWidth, y: 0, width: 200, height: 100))
 panel.alpha = 0.8
 panel.backgroundColor = UIColor.whiteColor()
+
+// Delete markers
 let deleteSwitchLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 30))
 deleteSwitchLabel.adjustsFontSizeToFitWidth = true
 deleteSwitchLabel.text = "Delete Markers"
 let deleteMarkerSwitchView = UISwitch(frame: CGRect(x: panelWidth - panelWidth / 2.0, y:0, width: 100, height: 50))
 panel.addSubview(deleteSwitchLabel)
 panel.addSubview(deleteMarkerSwitchView)
+
+// Hide markers
 let hideSwitchLabel = UILabel(frame: CGRect(x: 0, y: 30, width: 100, height: 30))
 hideSwitchLabel.adjustsFontSizeToFitWidth = true
 hideSwitchLabel.text = "Hide Markers"
@@ -23,6 +36,15 @@ let hideMarkerSwitchView = UISwitch(frame: CGRect(x: panelWidth - panelWidth / 2
 panel.addSubview(hideSwitchLabel)
 panel.addSubview(hideMarkerSwitchView)
 
+// Pitch map
+let pitchLabel = UILabel(frame: CGRect(x: 0, y: 60, width: 100, height: 30))
+pitchLabel.text = "Pitch"
+let pitchSwitch = UISwitch(frame: CGRect(x: panelWidth-panelWidth / 2.0, y: 60, width: 100, height: 50))
+let responder = Responder()
+pitchSwitch.addTarget(responder, action: #selector(responder.togglePitch(_:)), forControlEvents: .ValueChanged)
+panel.addSubview(pitchLabel)
+panel.addSubview(pitchSwitch)
+
 //: # Mapbox Maps
 
 /*:
@@ -53,6 +75,7 @@ class MapDelegate: NSObject, MGLMapViewDelegate {
             let av = PlaygroundAnnotationView(reuseIdentifier: "annotation")
             av.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
             av.centerOffset = CGVector(dx: -15, dy: -15)
+            av.flat = true
             let centerView = UIView(frame: CGRectInset(av.bounds, 3, 3))
             centerView.backgroundColor = UIColor.whiteColor()
             av.addSubview(centerView)
@@ -121,6 +144,7 @@ XCPlaygroundPage.currentPage.liveView = mapView
 
 let mapDelegate = MapDelegate()
 mapView.delegate = mapDelegate
+responder.mapView = mapView
 
 let tapGesture = UILongPressGestureRecognizer(target: mapDelegate, action: #selector(mapDelegate.handleTap))
 mapView.addGestureRecognizer(tapGesture)

platform/ios/app/MBXViewController.m

@@ -619,6 +619,7 @@ static NSString * const MBXViewControllerAnnotationViewReuseIdentifer = @"MBXVie
         annotationView = [[MBXAnnotationView alloc] initWithReuseIdentifier:MBXViewControllerAnnotationViewReuseIdentifer];
         annotationView.frame = CGRectMake(0, 0, 40, 40);
         annotationView.centerColor = [UIColor whiteColor];
+        annotationView.flat = YES;
     } else {
         // orange indicates that the annotation view was reused
         annotationView.centerColor = [UIColor orangeColor];

platform/ios/src/MGLAnnotationView.h

@@ -35,6 +35,12 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) CGVector centerOffset;
 
 
+/**
+ Setting this property to YES will force the annotation view to tilt according to the associated map view.
+ */
+@property (nonatomic, assign, getter=isFlat) BOOL flat;
+
+
 /**
  Called when the view is removed from the reuse queue.
 

platform/ios/src/MGLAnnotationView.m

@@ -1,11 +1,11 @@
 #import "MGLAnnotationView.h"
 #import "MGLAnnotationView_Private.h"
+#import "MGLMapView.h"
 
 @interface MGLAnnotationView ()
 
 @property (nonatomic) id<MGLAnnotation> annotation;
 @property (nonatomic, readwrite, nullable) NSString *reuseIdentifier;
-
 @end
 
 @implementation MGLAnnotationView
@@ -34,10 +34,26 @@
 }
 
 - (void)setCenter:(CGPoint)center
+{
+    [self setCenter:center pitch:0];
+}
+
+- (void)setCenter:(CGPoint)center pitch:(CGFloat)pitch
 {
     center.x += _centerOffset.dx;
     center.y += _centerOffset.dy;
+    
     [super setCenter:center];
+    
+    if (_flat) {
+        [self updatePitch:pitch];
+    }
+}
+
+- (void)updatePitch:(CGFloat)pitch
+{
+    CATransform3D t = CATransform3DRotate(CATransform3DIdentity, MGLRadiansFromDegrees(pitch), 1.0, 0, 0);
+    self.layer.transform = t;
 }
 
 - (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event

platform/ios/src/MGLAnnotationView_Private.h

@@ -8,6 +8,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) id<MGLAnnotation> annotation;
 @property (nonatomic, readwrite, nullable) NSString *reuseIdentifier;
 
+- (void)setCenter:(CGPoint)center pitch:(CGFloat)pitch;
+
 @end
 
 NS_ASSUME_NONNULL_END

platform/ios/src/MGLMapView.mm

@@ -4381,7 +4381,10 @@ mbgl::Duration MGLDurationInSeconds(NSTimeInterval duration)
                 {
                     [self.glView addSubview:annotationView];
                 }
-                annotationView.center = [self convertCoordinate:annotationContext.annotation.coordinate toPointToView:self];
+                
+                CGPoint center = [self convertCoordinate:annotationContext.annotation.coordinate toPointToView:self];
+                [annotationView setCenter:center pitch:self.camera.pitch];
+                
                 annotationContext.annotationView = annotationView;
             }
         }
@@ -4393,7 +4396,8 @@ mbgl::Duration MGLDurationInSeconds(NSTimeInterval duration)
         }
         else
         {
-            annotationView.center = [self convertCoordinate:annotationContext.annotation.coordinate toPointToView:self];;
+            CGPoint center = [self convertCoordinate:annotationContext.annotation.coordinate toPointToView:self];
+            [annotationView setCenter:center pitch:self.camera.pitch];
         }
     }
 }