[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

6 files changed, 56 insertions, 3 deletions

diff --git a/platform/ios/Mapbox.playground/Contents.swift b/platform/ios/Mapbox.playground/Contents.swift
index 514cb10160..ed48116da9 100644
--- a/platform/ios/Mapbox.playground/Contents.swift
+++ b/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)
diff --git a/platform/ios/app/MBXViewController.m b/platform/ios/app/MBXViewController.m
index 64d8c63d47..02090eba3e 100644
--- a/platform/ios/app/MBXViewController.m
+++ b/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];
diff --git a/platform/ios/src/MGLAnnotationView.h b/platform/ios/src/MGLAnnotationView.h
index 4d267636d1..0762286b02 100644
--- a/platform/ios/src/MGLAnnotationView.h
+++ b/platform/ios/src/MGLAnnotationView.h
@@ -36,6 +36,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 
 /**
+ 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.
 
  The default implementation of this method does nothing. You can override it in your custom annotation views and use it to put the view 
diff --git a/platform/ios/src/MGLAnnotationView.m b/platform/ios/src/MGLAnnotationView.m
index e0775194eb..5fcfe2651d 100644
--- a/platform/ios/src/MGLAnnotationView.m
+++ b/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
@@ -35,9 +35,25 @@
 
 - (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
diff --git a/platform/ios/src/MGLAnnotationView_Private.h b/platform/ios/src/MGLAnnotationView_Private.h
index c9a887b6cc..c5a65487a2 100644
--- a/platform/ios/src/MGLAnnotationView_Private.h
+++ b/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
diff --git a/platform/ios/src/MGLMapView.mm b/platform/ios/src/MGLMapView.mm
index 7afe72bf63..5bd2983649 100644
--- a/platform/ios/src/MGLMapView.mm
+++ b/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];
         }
     }
 }