Dotted line on map view
Asked Answered
T

2

16

I can create a line between two points fairly easy with the below code (part of it anyways) How could I make the line dotted instead of solid? Also would it be possible to change the opacity the longer the line is?

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id < MKOverlay >)overlay
{
    MKPolylineRenderer *renderer =[[MKPolylineRenderer alloc] initWithPolyline:overlay];
    renderer.strokeColor = [UIColor orangeColor];
    renderer.lineWidth = 3.0;

    return renderer;
}
Trehala answered 13/12, 2013 at 17:40 Comment(0)
D
51

You can use the lineDashPattern property to create the pattern you want for the line.

MKPolylineRenderer is a subclass of MKOverlayPathRenderer which has that property and a few others (see the link to the documentation).

For example, this sets the pattern to a line 2 points long followed by a 5 point gap. The pattern is repeated for the entire length of the polyline.

renderer.lineDashPattern = @[@2, @5];


For the opacity, you can either apply an alpha to the strokeColor:

renderer.strokeColor = [[UIColor orangeColor] colorWithAlphaComponent:0.5];

or set the alpha property:

renderer.alpha = 0.5;

Not sure what you mean by "the longer the line is" part of the question.

Dever answered 13/12, 2013 at 18:10 Comment(4)
Anna, thanks for the help. That makes sense. In regards to the "longer line" I was wondering if its possible to change the alpha value from 1 to .1 within the line itself. for example the starting point would be an alpha value of 1 and the end point maybe .1Trehala
Varying the alpha along the line would be a gradient and unfortunately that ability isn't built into the standard renderers. You'll have to create a custom overlay renderer and do the drawing manually. This and this can help you get started if you want to pursue that path.Dever
@Anna great answer..but what if i need the first dash to be small and second dash to be longer and line repeating this pattern ?Musette
i found it polylineRenderer.lineDashPattern = [5,10,2,10]Musette
G
9

Answer in Swift

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    guard let polyline = overlay as? MKPolyline else {
        fatalError("Not a MKPolyline")
    }

    let renderer = MKPolylineRenderer(polyline: polyline)

    renderer.strokeColor = #colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)
    renderer.lineWidth = 8
    renderer.lineDashPattern = [0, 10]

    return renderer
} 

enter image description here

Geneticist answered 5/4, 2018 at 11:7 Comment(1)
Honestly ... should this be an answer? This is just a single line and I don't think anybody will ask to convert it in swift.Dimitris

© 2022 - 2024 — McMap. All rights reserved.