Custom Puck View

1
import UIKit
2
import Nbmap
3
class CustomPuckViewController: UIViewController {
4
    var nbMapView: NGLMapView! {
5
        didSet {
6
            oldValue?.removeFromSuperview()
7
            if let mapView = nbMapView {
8
                view.insertSubview(mapView, at: 0)
9
            }
10
        }
11
    }
12
    override func viewDidLoad() {
13
        super.viewDidLoad()
14
        nbMapView = NGLMapView(frame:self.view.bounds)
15
        nbMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
16
        nbMapView.delegate = self
17
        nbMapView.userTrackingMode = .follow
18
    }
19
}
20

21
// MARK: - NGLMapViewDelegate
22
extension CustomPuckViewController: NGLMapViewDelegate {
23
 
24
    /**
25
     Asks the user styling options for each default user location annotation view.
26
     
27
     This method is called many times during gesturing, so you should avoid performing
28
     complex or performance-intensive tasks in your implementation.
29
     
30
     @param mapView The map view that is tracking the user's location.
31
     */
32
    func mapView(styleForDefaultUserLocationAnnotationView mapView: NGLMapView) -> NGLUserLocationAnnotationViewStyle {
33
        let locationStyle =  NGLUserLocationAnnotationViewStyle()
34
        /**
35
         The fill color for the puck view.
36
         */
37
        locationStyle.puckFillColor = UIColor.blue
38
        /**
39
         The shadow color for the puck view.
40
         */
41
        locationStyle.puckShadowColor = UIColor.red
42
        /**
43
         The shadow opacity for the puck view.
44
         Set any value between 0.0 and 1.0.
45
         The default value of this property is equal to `0.25`
46
         */
47
        locationStyle.puckShadowOpacity = 0.25
48
        /**
49
         The fill color for the arrow puck.
50
         */
51
        locationStyle.puckArrowFillColor = UIColor.black
52
        /**
53
         The fill color for the puck view.
54
         */
55
        locationStyle.haloFillColor = UIColor.white
56
       
57
        if #available(iOS 14, *) {
58
            /**
59
             The halo fill color for the approximate view.
60
             */
61
            locationStyle.approximateHaloFillColor = UIColor.white
62
            /**
63
             The halo border color for the approximate view.
64
             */
65
            locationStyle.approximateHaloBorderColor = UIColor.white
66
            /**
67
             The halo border width for the approximate view.
68
             The default value of this property is equal to `2.0`
69
             */
70
            locationStyle.approximateHaloBorderWidth = 2.0
71
            /**
72
             The halo opacity for the approximate view.
73
             Set any value between 0.0 and 1.0
74
             The default value of this property is equal to `0.15`
75
             */
76
            locationStyle.approximateHaloOpacity = 0.15
77
        }
78
      
79
        return locationStyle
80
    }
81
    
82
    /**
83
     Returns a view object to mark the given point annotation object on the map.
84
     Implement this method to mark a point annotation with a view object. If you
85
     want to mark a particular point annotation with a static image instead, omit
86
     this method or have it return `nil` for that annotation, then implement
87
     `-mapView:imageForAnnotation:` instead.
88
     Annotation views are compatible with UIKit, Core Animation, and other Cocoa
89
     Touch frameworks. On the other hand, static annotation images use less memory
90
     and draw more quickly than annotation views.
91
     The user location annotation view can also be customized via this method. When
92
     `annotation` is an instance of `NGLUserLocation` (or equal to the map view's
93
     `userLocation` property), return an instance of `NGLUserLocationAnnotationView`
94
     (or a subclass thereof).
95
     @param mapView The map view that requested the annotation view.
96
     @param annotation The object representing the annotation that is about to be
97
        displayed.
98
     @return The view object to display for the given annotation or `nil` if you
99
        want to display an annotation image instead.
100
     */
101
    func mapView(_ mapView: NGLMapView, viewFor annotation: NGLAnnotation) -> NGLAnnotationView?  {
102
        let annotationView = CustomUserLocationAnnotationView(frame: CGRect.zero)
103
        annotationView.frame = CGRectMake(0, 0, annotationView.intrinsicContentSize.width, annotationView.intrinsicContentSize.height);
104
        return annotationView
105
    }
106
  
107
}

1
import UIKit
2
import Nbmap
3
let CustomUserLocationDotSize: CGFloat = 10
4
class CustomUserLocationAnnotationView: NGLUserLocationAnnotationView {
5
    
6
    override init(frame: CGRect) {
7
        super.init(frame: frame)
8
        self.backgroundColor = .clear
9
    }
10
    
11
    required init?(coder aDecoder: NSCoder) {
12
        fatalError("init(coder:) has not been implemented")
13
    }
14
    
15
    override func update() {
16
        updateFrame(with: intrinsicContentSize)
17
        setNeedsDisplay()
18
    }
19
    
20
    override var intrinsicContentSize: CGSize {
21
        let carSize = CGSize(width: 30, height: 60)
22
        return (mapView?.userTrackingMode == .followWithCourse) ? carSize : dotSize()
23
    }
24
    
25
    func dotSize() -> CGSize {
26
        let minDotSize: CGFloat = 30
27
        let dotSize = max(minDotSize, accuracyInPoints())
28
        return CGSize(width: dotSize, height: dotSize)
29
    }
30
    
31
    func updateFrame(with size: CGSize) {
32
        if frame.size.equalTo(size) {
33
            return
34
        }
35
        
36
        // Update frame size, keeping the existing center point.
37
        var newFrame = frame
38
        let oldCenter = center
39
        newFrame.size = size
40
        frame = newFrame
41
        center = oldCenter
42
    }
43
    
44
    func accuracyInPoints() -> CGFloat {
45
        guard let mapView = mapView, let userLocation = userLocation else {
46
            return 0
47
        }
48
        let metersPerPoint = mapView.metersPerPoint(atLatitude: userLocation.coordinate.latitude)
49
        return CGFloat((userLocation.location?.horizontalAccuracy ?? 0) / metersPerPoint)
50
    }
51
    
52
    override func draw(_ rect: CGRect) {
53
        if mapView?.userTrackingMode == .followWithCourse {
54
            drawCar()
55
        } else {
56
            drawDot()
57
        }
58
    }
59
    
60
    func drawDot() {
61
        // Accuracy
62
        let accuracy = accuracyInPoints()
63
        let center = bounds.size.width / 2.0 - accuracy / 2.0
64
        let accuracyPath = UIBezierPath(ovalIn: CGRect(x: center, y: center, width: accuracy, height: accuracy))
65
        let accuracyColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.4)
66
        accuracyColor.setFill()
67
        accuracyPath.fill()
68
        
69
        // Dot
70
        let dotCenter = bounds.size.width / 2.0 - CustomUserLocationDotSize / 2.0
71
        let dotPath = UIBezierPath(ovalIn: CGRect(x: dotCenter, y: dotCenter, width: CustomUserLocationDotSize, height: CustomUserLocationDotSize))
72
        UIColor.green.setFill()
73
        dotPath.fill()
74
        
75
        UIColor.black.setStroke()
76
        dotPath.lineWidth = 1
77
        dotPath.stroke()
78
        
79
        // Accuracy text
80
        let font = UIFont.systemFont(ofSize: 11)
81
        let attributes: [NSAttributedString.Key: Any] = [
82
            .font: font,
83
            .backgroundColor: UIColor(white: 0, alpha: 0.5),
84
            .foregroundColor: UIColor.white
85
        ]
86
        let accuracyText = NSString(format: "%.0f", accuracy)
87
        accuracyText.draw(at: CGPoint.zero, withAttributes: attributes)
88
    }
89
    
90
    func drawCar() {
91
        let fillColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
92
        let strokeColor = UIColor(red: 0.592, green: 0.592, blue: 0.592, alpha: 1)
93
        let fillColor2 = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
94
        
95
        let bezier2Path = UIBezierPath()
96
        bezier2Path.move(to: CGPoint(x: 30, y: 7.86))
97
        bezier2Path.addLine(to: CGPoint(x: 30, y: 52.66))
98
        bezier2Path.addCurve(to: CGPoint(x: 0, y: 52.66), controlPoint1: CGPoint(x: 30, y: 62.05), controlPoint2: CGPoint(x: 0, y: 62.84))
99
        bezier2Path.addCurve(to: CGPoint(x: 0, y: 7.86), controlPoint1: CGPoint(x: 0, y: 42.48), controlPoint2: CGPoint(x: 0, y: 17.89))
100
        bezier2Path.addCurve(to: CGPoint(x: 30, y: 7.86), controlPoint1: CGPoint(x: -0, y: -2.17), controlPoint2: CGPoint(x: 30, y: -3.05))
101
        bezier2Path.close()
102
        bezier2Path.usesEvenOddFillRule = true
103
        
104
        fillColor.setFill()
105
        bezier2Path.fill()
106
        
107
        let bezier3Path = UIBezierPath()
108
        bezier3Path.move(to: CGPoint(x: 30, y: 7.86))
109
        bezier3Path.addLine(to: CGPoint(x: 30, y: 52.66))
110
        bezier3Path.addCurve(to: CGPoint(x: 0, y: 52.66), controlPoint1: CGPoint(x: 30, y: 62.05), controlPoint2: CGPoint(x: 0, y: 62.84))
111
        bezier3Path.addCurve(to: CGPoint(x: 0, y: 7.86), controlPoint1: CGPoint(x: 0, y: 42.48), controlPoint2: CGPoint(x: 0, y: 17.89))
112
        bezier3Path.addCurve(to: CGPoint(x: 30, y: 7.86), controlPoint1: CGPoint(x: 0, y: -2.17), controlPoint2: CGPoint(x: 30, y: -3.05))
113
        bezier3Path.close()
114
        strokeColor.setStroke()
115
        bezier3Path.lineWidth = 1
116
        bezier3Path.stroke()
117
        
118
        let bezier4Path = UIBezierPath()
119
        bezier4Path.move(to: CGPoint(x: 15.56, y: 4.26))
120
        bezier4Path.addCurve(to: CGPoint(x: 26, y: 6), controlPoint1: CGPoint(x: 21, y: 4.26), controlPoint2: CGPoint(x: 26, y: 6))
121
        bezier4Path.addCurve(to: CGPoint(x: 23, y: 21), controlPoint1: CGPoint(x: 26, y: 6), controlPoint2: CGPoint(x: 29, y: 17))
122
        bezier4Path.addCurve(to: CGPoint(x: 16, y: 21), controlPoint1: CGPoint(x: 20.03, y: 22.98), controlPoint2: CGPoint(x: 16, y: 21))
123
        bezier4Path.addCurve(to: CGPoint(x: 7, y: 21), controlPoint1: CGPoint(x: 16, y: 21), controlPoint2: CGPoint(x: 9.02, y: 23.53))
124
        bezier4Path.addCurve(to: CGPoint(x: 4, y: 6), controlPoint1: CGPoint(x: 3, y: 16), controlPoint2: CGPoint(x: 4, y: 6))
125
        bezier4Path.addCurve(to: CGPoint(x: 15.56, y: 4.26), controlPoint1: CGPoint(x: 4, y: 6), controlPoint2: CGPoint(x: 10.12, y: 4.26))
126
        bezier4Path.close()
127
        bezier4Path.usesEvenOddFillRule = true
128
        
129
        fillColor2.setFill()
130
        bezier4Path.fill()
131
        
132
        let rectanglePath = UIBezierPath()
133
        rectanglePath.move(to: CGPoint(x: 25, y: 46))
134
        rectanglePath.addCurve(to: CGPoint(x: 21, y: 55), controlPoint1: CGPoint(x: 31, y: 46), controlPoint2: CGPoint(x: 28.5, y: 55))
135
        rectanglePath.addCurve(to: CGPoint(x: 9, y: 55), controlPoint1: CGPoint(x: 13.5, y: 55), controlPoint2: CGPoint(x: 14, y: 55))
136
        rectanglePath.addCurve(to: CGPoint(x: 5, y: 46), controlPoint1: CGPoint(x: 4, y: 55), controlPoint2: CGPoint(x: 0, y: 46))
137
        rectanglePath.addCurve(to: CGPoint(x: 25, y: 46), controlPoint1: CGPoint(x: 10, y: 46), controlPoint2: CGPoint(x: 19, y: 46))
138
        rectanglePath.close()
139
        UIColor.white.setFill()
140
        rectanglePath.fill()
141
        
142
        let bezierPath = UIBezierPath()
143
        UIColor.white.setFill()
144
        bezierPath.fill()
145
        
146
        let rectangle2Path = UIBezierPath()
147
        rectangle2Path.move(to: CGPoint(x: 2, y: 35))
148
        rectangle2Path.addCurve(to: CGPoint(x: 4.36, y: 35), controlPoint1: CGPoint(x: 2, y: 39), controlPoint2: CGPoint(x: 4.36, y: 35))
149
        rectangle2Path.addCurve(to: CGPoint(x: 4.36, y: 22), controlPoint1: CGPoint(x: 4.36, y: 35), controlPoint2: CGPoint(x: 5.55, y: 26))
150
        rectangle2Path.addCurve(to: CGPoint(x: 2, y: 22), controlPoint1: CGPoint(x: 3.18, y: 18), controlPoint2: CGPoint(x: 2, y: 22))
151
        rectangle2Path.addCurve(to: CGPoint(x: 2, y: 35), controlPoint1: CGPoint(x: 2, y: 22), controlPoint2: CGPoint(x: 2, y: 31))
152
        rectangle2Path.close()
153
        UIColor.white.setFill()
154
        rectangle2Path.fill()
155
        
156
        let rectangle3Path = UIBezierPath()
157
        rectangle3Path.move(to: CGPoint(x: 28, y: 35))
158
        rectangle3Path.addCurve(to: CGPoint(x: 25.64, y: 35), controlPoint1: CGPoint(x: 28, y: 39), controlPoint2: CGPoint(x: 25.64, y: 35))
159
        rectangle3Path.addCurve(to: CGPoint(x: 25.64, y: 22), controlPoint1: CGPoint(x: 25.64, y: 35), controlPoint2: CGPoint(x: 24.45, y:26))
160
        rectangle3Path.addCurve(to: CGPoint(x: 28, y: 22), controlPoint1: CGPoint(x: 25.82, y: 18), controlPoint2: CGPoint(x: 28, y:22))
161
        rectangle3Path.addCurve(to: CGPoint(x: 28, y: 35), controlPoint1: CGPoint(x: 28, y: 22), controlPoint2: CGPoint(x: 28, y:31))
162
        rectangle3Path.close()
163
        UIColor.white.setFill()
164
        rectangle3Path.fill()
165
    }
166
}