Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insert route below text on reroute #91

Merged
merged 5 commits into from
Mar 27, 2017
+72 −79
Merged

Insert route below text on reroute #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac9f0a7
Insert route below text on reroute
Mar 24, 2017
82323ad
just update the source
Mar 25, 2017
b5d2bf4
remove
Mar 25, 2017
f1b8e0f
Abstract identifiers
Mar 26, 2017
0f688b0
Update
Mar 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 67 additions & 65 deletions MapboxNavigationUI/MGLMapView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import MapboxNavigation
let sourceIdentifier = "routeSource"
let routeLayerIdentifier = "routeLayer"
let routeLayerCasingIdentifier = "routeLayerCasing"
let arrowSourceIdentifier = "arrowSource"
let arrowSourceStrokeIdentifier = "arrowSourceStroke"
let arrowLayerIdentifier = "arrowLayer"

extension MGLMapView {

public func annotate(_ routes: [Route], clearMap: Bool) {
guard let route = routes.first, var coordinates = route.coordinates else {
public func annotate(_ route: Route) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this method originally took an array in anticipation of alternative route support, but the next line brushed that idea away anyways. 😄

guard var coordinates = route.coordinates else {
return
}

Expand All @@ -31,30 +34,35 @@ extension MGLMapView {
}

let polyline = MGLPolylineFeature(coordinates: &coordinates, count: route.coordinateCount)
let geoJSONSource = MGLShapeSource(identifier: sourceIdentifier, shape: polyline, options: nil)
let line = MGLLineStyleLayer(identifier: routeLayerIdentifier, source: geoJSONSource)
let lineCasing = MGLLineStyleLayer(identifier: routeLayerCasingIdentifier, source: geoJSONSource)

line.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintStrokeColor.withAlphaComponent(0.6))
line.lineWidth = MGLStyleValue(rawValue: 5)
lineCasing.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintStrokeColor)
lineCasing.lineWidth = MGLStyleValue(rawValue: 9)

let cap = NSValue(mglLineCap: .round)
let join = NSValue(mglLineJoin: .round)

line.lineCap = MGLStyleValue(rawValue: cap)
line.lineJoin = MGLStyleValue(rawValue: join)
lineCasing.lineCap = MGLStyleValue(rawValue: cap)
lineCasing.lineJoin = MGLStyleValue(rawValue: join)

style.addSource(geoJSONSource)

for layer in style.layers.reversed() {
if let layer = layer as? MGLStyleLayer, !(layer is MGLSymbolStyleLayer) {
style.insertLayer(line, above: layer)
style.insertLayer(lineCasing, below: line)
return
if let source = style.source(withIdentifier: sourceIdentifier) as? MGLShapeSource {
source.shape = polyline
} else {
let geoJSONSource = MGLShapeSource(identifier: sourceIdentifier, shape: polyline, options: nil)
let line = MGLLineStyleLayer(identifier: routeLayerIdentifier, source: geoJSONSource)
let lineCasing = MGLLineStyleLayer(identifier: routeLayerCasingIdentifier, source: geoJSONSource)

line.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintStrokeColor.withAlphaComponent(0.6))
line.lineWidth = MGLStyleValue(rawValue: 5)
lineCasing.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintStrokeColor)
lineCasing.lineWidth = MGLStyleValue(rawValue: 9)

let cap = NSValue(mglLineCap: .round)
let join = NSValue(mglLineJoin: .round)

line.lineCap = MGLStyleValue(rawValue: cap)
line.lineJoin = MGLStyleValue(rawValue: join)
lineCasing.lineCap = MGLStyleValue(rawValue: cap)
lineCasing.lineJoin = MGLStyleValue(rawValue: join)

style.addSource(geoJSONSource)
for layer in style.layers.reversed() {
if let layer = layer as? MGLStyleLayer, !(layer is MGLSymbolStyleLayer) &&
layer.identifier != arrowLayerIdentifier && layer.identifier != arrowSourceIdentifier {
style.insertLayer(line, above: layer)
style.insertLayer(lineCasing, below: line)
return
}
}
}
}
Expand Down Expand Up @@ -89,6 +97,10 @@ extension MGLMapView {
let maneuverCoordinate = routeProgress.currentLegProgress.upComingStep?.maneuverLocation
let polylineCoordinates = routeProgress.route.coordinates

guard let style = style else {
return
}

let shaftLength = max(min(50 * metersPerPoint(atLatitude: maneuverCoordinate!.latitude), 50), 10)
let shaftCoordinates = polyline(along: polylineCoordinates!, within: -shaftLength / 2, of: maneuverCoordinate!)
+ polyline(along: polylineCoordinates!, within: shaftLength, of: maneuverCoordinate!)
Expand Down Expand Up @@ -124,52 +136,42 @@ extension MGLMapView {

maneuverArrowPolylines.append(headStrokePolyline)

let arrowSource = MGLShapeSource(identifier: "arrowSource", shape: MGLShapeCollection(shapes: maneuverArrowPolylines), options: nil)
let arrow = MGLLineStyleLayer(identifier: "arrow", source: arrowSource)

arrow.lineWidth = MGLStyleValue(rawValue: 6)
arrow.lineColor = MGLStyleValue(rawValue: .white)

// Arrow stroke
let arrowSourceStroke = MGLShapeSource(identifier: "arrowSourceStroke", shape: MGLShapeCollection(shapes: maneuverArrowStrokePolylines), options: nil)
let arrowStroke = MGLLineStyleLayer(identifier: "arrowStroke", source: arrowSourceStroke)
let arrowShape = MGLShapeCollection(shapes: maneuverArrowPolylines)
let arrowStrokeShape = MGLShapeCollection(shapes: maneuverArrowStrokePolylines)

let cap = NSValue(mglLineCap: .round)
let join = NSValue(mglLineJoin: .round)

arrowStroke.lineCap = MGLStyleValue(rawValue: cap)
arrowStroke.lineJoin = MGLStyleValue(rawValue: join)
arrow.lineCap = MGLStyleValue(rawValue: cap)
arrow.lineJoin = MGLStyleValue(rawValue: join)
let arrowSourceStroke = MGLShapeSource(identifier: arrowSourceStrokeIdentifier, shape: arrowStrokeShape, options: nil)
let arrowStroke = MGLLineStyleLayer(identifier: arrowSourceIdentifier, source: arrowSourceStroke)
let arrowSource = MGLShapeSource(identifier: arrowSourceIdentifier, shape: arrowShape, options: nil)
let arrow = MGLLineStyleLayer(identifier: arrowLayerIdentifier, source: arrowSource)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

arrow and arrowStroke should ideally be declared down in the else block instead of up here, since they aren't used in the if let block.


arrowStroke.lineWidth = MGLStyleValue(rawValue: 8)
arrowStroke.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintColor)

style?.addSource(arrowSourceStroke)
style?.addSource(arrowSource)
if let source = style.source(withIdentifier: arrowSourceIdentifier) as? MGLShapeSource {
source.shape = arrowShape
} else {

arrow.lineCap = MGLStyleValue(rawValue: cap)
arrow.lineJoin = MGLStyleValue(rawValue: join)
arrow.lineWidth = MGLStyleValue(rawValue: 6)
arrow.lineColor = MGLStyleValue(rawValue: .white)

style.addSource(arrowSource)
style.addLayer(arrow)
}

style?.addLayer(arrow)
style?.insertLayer(arrowStroke, below: arrow)
}
}

func removeArrow() {
guard let style = style else { return }

if let arrow = style.layer(withIdentifier: "arrow") {
style.removeLayer(arrow)
}

if let arrow = style.layer(withIdentifier: "arrowStroke") {
style.removeLayer(arrow)
}

if let arrowStrokeSourceCheck = style.source(withIdentifier: "arrowSourceStroke") {
style.removeSource(arrowStrokeSourceCheck)
}

if let arrowSourceCheck = style.source(withIdentifier: "arrowSource") {
style.removeSource(arrowSourceCheck)
if let source = style.source(withIdentifier: arrowSourceStrokeIdentifier) as? MGLShapeSource {
source.shape = arrowStrokeShape
} else {

arrowStroke.lineCap = MGLStyleValue(rawValue: cap)
arrowStroke.lineJoin = MGLStyleValue(rawValue: join)
arrowStroke.lineWidth = MGLStyleValue(rawValue: 8)
arrowStroke.lineColor = MGLStyleValue(rawValue: NavigationUI.shared.tintColor)

style.addSource(arrowSourceStroke)
style.insertLayer(arrowStroke, below: arrow)
}
}
}
}
Expand Down
19 changes: 5 additions & 14 deletions MapboxNavigationUI/RouteMapViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class RouteMapViewController: UIViewController, PulleyPrimaryContentControllerDe
let webImageManager = SDWebImageManager.shared()
var shieldAPIDataTask: URLSessionDataTask?
var shieldImageDownloadToken: SDWebImageDownloadToken?
var arrowCurrentStep: RouteStep?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(sigh) If we were using annotations instead of runtime styling, we could just make RouteStep conform to MGLAnnotation and ask the map which step is being annotated…

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using runtime styling

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Someday.


override func viewDidLoad() {
super.viewDidLoad()
Expand Down Expand Up @@ -122,15 +123,14 @@ class RouteMapViewController: UIViewController, PulleyPrimaryContentControllerDe

func notifyDidReroute(route: Route) {
routePageViewController.notifyDidReRoute()
mapView.annotate([route], clearMap: true)
mapView.addArrow(routeController.routeProgress)
mapView.annotate(route)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s fix annotate(_:) the same way you’ve fixed addArrow(_:): instead of blowing away the source and layers and adding them back in, just change the source’s shape. That’ll fix any flashing that occurs during rerouting and also reduce the amount of work MGLMapView has to do every time the route changes.

mapView.userTrackingMode = .followWithCourse
}

func notifyAlertLevelDidChange(routeProgress: RouteProgress) {
if routeProgress.currentLegProgress.followOnStep != nil {
updateArrowAnnotations(routeProgress)
} else {
mapView.removeArrow()
mapView.addArrow(routeProgress)
}
}

Expand Down Expand Up @@ -208,15 +208,6 @@ class RouteMapViewController: UIViewController, PulleyPrimaryContentControllerDe
}
}
}

func updateArrowAnnotations(_ routeProgress: RouteProgress) {
guard routeProgress.currentLegProgress.upComingStep != nil else {
return
}

mapView.removeArrow()
mapView.addArrow(routeProgress)
}
}

// MARK: NavigationMapViewDelegate
Expand Down Expand Up @@ -288,7 +279,7 @@ extension RouteMapViewController: MGLMapViewDelegate {
}

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
mapView.annotate([route], clearMap: false)
mapView.annotate(route)
}

func mapView(_ mapView: MGLMapView, didSelect annotation: MGLAnnotation) {
Expand Down