1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import Mapbox
@objc(ClusteringExample_Swift)
class ClusteringExample_Swift: UIViewController, MGLMapViewDelegate {
var mapView: MGLMapView!
var icon: UIImage!
var popup: UILabel?
override func viewDidLoad() {
super.viewDidLoad()
mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.lightStyleURL(withVersion: 9))
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.tintColor = .darkGray
mapView.delegate = self
view.addSubview(mapView)
icon = UIImage(named: "port")
}
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let url = URL(fileURLWithPath: Bundle.main.path(forResource: "ports", ofType: "geojson")!)
let source = MGLShapeSource(identifier: "clusteredPorts",
url: url,
options: [.clustered: true, .clusterRadius: icon.size.width])
style.addSource(source)
// Use a template image so that we can tint it with the `iconColor` runtime styling property.
style.setImage(icon.withRenderingMode(.alwaysTemplate), forName: "icon")
// Show unclustered features as icons. The `cluster` attribute is built into clustering-enabled source features.
let ports = MGLSymbolStyleLayer(identifier: "ports", source: source)
ports.iconImageName = MGLStyleValue(rawValue: "icon")
ports.iconColor = MGLStyleValue(rawValue: UIColor.darkGray.withAlphaComponent(0.9))
ports.predicate = NSPredicate(format: "%K != YES", "cluster")
style.addLayer(ports)
// Color clustered features based on clustered point counts.
let stops = [
20: MGLStyleValue(rawValue: UIColor.lightGray),
50: MGLStyleValue(rawValue: UIColor.orange),
100: MGLStyleValue(rawValue: UIColor.red),
200: MGLStyleValue(rawValue: UIColor.purple)
]
// Show clustered features as circles. The `point_count` attribute is built into clustering-enabled source features.
let circlesLayer = MGLCircleStyleLayer(identifier: "clusteredPorts", source: source)
circlesLayer.circleRadius = MGLStyleValue(rawValue: NSNumber(value: Double(icon.size.width) / 2))
circlesLayer.circleOpacity = MGLStyleValue(rawValue: 0.75)
circlesLayer.circleStrokeColor = MGLStyleValue(rawValue: UIColor.white.withAlphaComponent(0.75))
circlesLayer.circleStrokeWidth = MGLStyleValue(rawValue: 2)
circlesLayer.circleColor = MGLSourceStyleFunction(interpolationMode: .interval,
stops: stops,
attributeName: "point_count",
options: nil)
circlesLayer.predicate = NSPredicate(format: "%K == YES", "cluster")
style.addLayer(circlesLayer)
// Label cluster circles with a layer of text indicating feature count. Per text token convention, wrap the attribute in {}.
let numbersLayer = MGLSymbolStyleLayer(identifier: "clusteredPortsNumbers", source: source)
numbersLayer.textColor = MGLStyleValue(rawValue: UIColor.white)
numbersLayer.textFontSize = MGLStyleValue(rawValue: NSNumber(value: Double(icon.size.width) / 2))
numbersLayer.iconAllowsOverlap = MGLStyleValue(rawValue: true)
numbersLayer.text = MGLStyleValue(rawValue: "{point_count}")
numbersLayer.predicate = NSPredicate(format: "%K == YES", "cluster")
style.addLayer(numbersLayer)
// Add a tap gesture for zooming in to clusters or showing popups on individual features.
view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap(_:))))
}
func mapViewRegionIsChanging(_ mapView: MGLMapView) {
showPopup(false, animated: false)
}
func handleTap(_ tap: UITapGestureRecognizer) {
if tap.state == .ended {
let point = tap.location(in: tap.view)
let width = icon.size.width
let rect = CGRect(x: point.x - width / 2, y: point.y - width / 2, width: width, height: width)
let clusters = mapView.visibleFeatures(in: rect, styleLayerIdentifiers: ["clusteredPorts"])
let ports = mapView.visibleFeatures(in: rect, styleLayerIdentifiers: ["ports"])
if clusters.count > 0 {
showPopup(false, animated: true)
let cluster = clusters.first!
mapView.setCenter(cluster.coordinate, zoomLevel: (mapView.zoomLevel + 1), animated: true)
} else if ports.count > 0 {
let port = ports.first!
if popup == nil {
popup = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 40))
popup!.backgroundColor = UIColor.white.withAlphaComponent(0.9)
popup!.layer.cornerRadius = 4
popup!.layer.masksToBounds = true
popup!.textAlignment = .center
popup!.lineBreakMode = .byTruncatingTail
popup!.font = UIFont.systemFont(ofSize: 16)
popup!.textColor = UIColor.black
popup!.alpha = 0
view.addSubview(popup!)
}
popup!.text = (port.attribute(forKey: "name")! as! String)
let size = (popup!.text! as NSString).size(attributes: [NSFontAttributeName: popup!.font])
popup!.bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height).insetBy(dx: -10, dy: -10)
let point = mapView.convert(port.coordinate, toPointTo: mapView)
popup!.center = CGPoint(x: point.x, y: point.y - 50)
if popup!.alpha < 1 {
showPopup(true, animated: true)
}
} else {
showPopup(false, animated: true)
}
}
}
func showPopup(_ shouldShow: Bool, animated: Bool) {
let alpha: CGFloat = (shouldShow ? 1 : 0)
if animated {
UIView.animate(withDuration: 0.25) { [unowned self] in
self.popup?.alpha = alpha
}
} else {
popup?.alpha = alpha
}
}
}
|
