ios Google SDK Map cannot create dotted polylines

Question

I have called the below method to draw the dotted polylines between the markers. When it comes to the execution, it shows that only solid lines are drawn. Would you please tell me how to draw dotted lines on to Google Map ?

enter image description here

- (void) createDashedLine:(CLLocationCoordinate2D )thisPoint:(CLLocationCoordinate2D )nextPoint:
(UIColor *)colour
{
    NSLog(@"next pt latitude %ff" , nextPoint.latitude);
    NSLog(@"next pt longitude %ff" , nextPoint.longitude);
    NSLog(@"this pt laatitude %ff" , thisPoint.latitude);
    NSLog(@"this pt longitude %ff" , thisPoint.longitude);

    double difLat = nextPoint.latitude - thisPoint.latitude;
    double difLng = nextPoint.longitude - thisPoint.longitude;
    double scale = camera.zoom * 2;
    double divLat = difLat / scale;
    double divLng = difLng / scale;
    CLLocationCoordinate2D tmpOrig= thisPoint;
    GMSMutablePath *singleLinePath = [GMSMutablePath path];

    for(int i = 0 ; i < scale ; i ++){
        CLLocationCoordinate2D tmpOri = tmpOrig;
        if(i > 0){
            tmpOri = CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 0.25f), tmpOrig.longitude + (divLng * 0.25f));
        }
        [singleLinePath addCoordinate:tmpOri];
        [singleLinePath addCoordinate:
         CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 1.0f),
                                    tmpOrig.longitude + (divLng * 1.0f))];
        tmpOri = CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 1.0f), tmpOrig.longitude + (divLng * 1.0f));
    }

    GMSPolyline *polyline ;
    polyline = [GMSPolyline polylineWithPath:singleLinePath];
    polyline.geodesic = NO;
    polyline.strokeWidth = 5.f;
    polyline.strokeColor = colour;
    polyline.map = mapView_;

    //Setup line style and draw
    _lengths = @[@([singleLinePath lengthOfKind:kGMSLengthGeodesic] / 50)];
    _polys = @[polyline];
    [self setupStyleWithColour:colour];
    [self tick];
}

- (void)tick {
    //Create steps for polyline(dotted polylines)
    for (GMSPolyline *poly in _polys) {
        poly.spans =
        GMSStyleSpans(poly.path, _styles, _lengths, kGMSLengthGeodesic, _pos);
    }
    _pos -= _step;
}

-(void)setupStyleWithColour:(UIColor *)color{

    GMSStrokeStyle *gradColor = [GMSStrokeStyle gradientFromColor:color toColor:color];

    _styles = @[gradColor,[GMSStrokeStyle solidColor:[UIColor colorWithWhite:0 alpha:0]],];
    _step = 50000;
}

- (void)addMarkers
{
    // NSMutableArray *polys = [NSMutableArray array];
    if([CarArray count] > 0){


        GMSMutablePath *path = [GMSMutablePath path];
        GMSMutablePath *currentPath = [GMSMutablePath path];
        GMSPolyline *polyline ;
        GMSPolyline *polylineC ;
        GMSMarker *marker;
        for (int i = 0; i < [CarArray count]; i++) {

            CheckPoints *cp = [CarArray objectAtIndex:i];
            CLLocationCoordinate2D position = CLLocationCoordinate2DMake(cp.getLatitude , cp.getLongitude);

            marker = [GMSMarker markerWithPosition:position];
            //  GMSMarker *marker = [[GMSMarker alloc] init];
            marker.position = position;
            NSLog( @"%d", cp.getState );
            NSLog( @"%f", cp.getLatitude);
            NSLog( @"%f", cp.getLongitude );
            NSLog( @"%@", cp.getDesp );
            marker.title = cp.getDesp;

            marker.zIndex = 1;
            NSString *tmpLat = [[NSString alloc] initWithFormat:@"%f", position.latitude];
            NSString *tmpLong = [[NSString alloc] initWithFormat:@"%f", position.longitude];
            marker.snippet = [NSString stringWithFormat:@"%@ %@", tmpLat,tmpLong];
            UIColor *color;
            if (cp.getState ==0) {
                color = [UIColor greenColor];
            } else {
                color = [UIColor redColor];
            }

            if([CarArray count] > 2){
                [path addLatitude:cp.getLatitude longitude:cp.getLongitude];
                if(i > [CarArray indexOfObject:CarArray.lastObject] -2){
                    [currentPath addLatitude:cp.getLatitude longitude:cp.getLongitude];
                }
            }else{
                [currentPath addLatitude:cp.getLatitude longitude:cp.getLongitude];
            }
            marker.icon = [GMSMarker markerImageWithColor:color];

            marker.map = mapView_;
            //  mapView_.selectedMarker = marker;
        }

        if([CarArray count] > 2) {

            polyline = [GMSPolyline polylineWithPath:currentPath];
            polyline.geodesic = YES;
            polyline.strokeWidth = 5.f;
            polyline.strokeColor = [UIColor greenColor];
            polyline.map = mapView_;



            _lengths = @[@([currentPath lengthOfKind:kGMSLengthGeodesic] / 50)];
            _polys = @[polyline];

            [self setupStyleWithColour:[UIColor greenColor]];
            [self tick];


            for(int i = 0 ; i < [currentPath count] -1 ; i++){
                CLLocationCoordinate2D thisPoint = [currentPath coordinateAtIndex:i];
                CLLocationCoordinate2D nextPoint = [currentPath coordinateAtIndex:i+1];


                NSLog(@"next pt s latitude %ff" , nextPoint.latitude);
                NSLog(@"next pt s longitude %ff" , nextPoint.longitude);
                NSLog(@"this pt s latitude %ff" , thisPoint.latitude);
                NSLog(@"this pt s longitude %ff" , thisPoint.longitude);

                [self drawArrowLines:mapView_ :thisPoint :nextPoint :[UIColor greenColor]:i+1: false];
                [self createDashedLine: thisPoint :nextPoint :[UIColor greenColor]];
            }

            GMSMutablePath *path2 = [GMSMutablePath path];
            GMSMutablePath *path3 = [GMSMutablePath path];
            path2 = path.mutableCopy;

            [path2 removeLastCoordinate];
            path3 = path2;
            polylineC = [GMSPolyline polylineWithPath:path3];
            polylineC.geodesic = YES;
            polylineC.strokeWidth = 5.f;
            polylineC.map = mapView_;



            _lengths = @[@([currentPath lengthOfKind:kGMSLengthGeodesic] / 50)];
            _polys = @[polylineC];

            [self setupStyleWithColour:[UIColor greenColor]];
            [self tick];


       //     polylineC.strokeColor = [UIColor redColor];

            for(int i = 0 ; i < [path count] -1 ; i++){
                CLLocationCoordinate2D thisPoint = [path coordinateAtIndex:i];
                CLLocationCoordinate2D nextPoint = [path coordinateAtIndex:i+1];

                NSLog(@"next pt s latitude %ff" , nextPoint.latitude);
                NSLog(@"next pt s longitude %ff" , nextPoint.longitude);
                NSLog(@"this pt s latitude %ff" , thisPoint.latitude);
                NSLog(@"this pt s longitude %ff" , thisPoint.longitude);

                [self drawArrowLines:mapView_ :thisPoint :nextPoint :[UIColor redColor]: i+1 : true];
                [self createDashedLine: thisPoint :nextPoint :[UIColor redColor]];
            }
        }else{
            polyline = [GMSPolyline polylineWithPath:currentPath];
            polyline.geodesic = NO;
            polyline.strokeWidth = 5.f;
            polyline.strokeColor = [UIColor greenColor];
            polyline.map = mapView_;


            _lengths = @[@([currentPath lengthOfKind:kGMSLengthGeodesic] / 50)];
            _polys = @[polyline];

            [self setupStyleWithColour:[UIColor greenColor]];
            [self tick];

            for(int i = 0 ; i < [currentPath count] -1 ; i++){
                CLLocationCoordinate2D thisPoint = [currentPath coordinateAtIndex:i];
                CLLocationCoordinate2D nextPoint = [currentPath coordinateAtIndex:i+1];


                NSLog(@"next pt s latitude %ff" , nextPoint.latitude);
                NSLog(@"next pt s longitude %ff" , nextPoint.longitude);
                NSLog(@"this pt s latitude %ff" , thisPoint.latitude);
                NSLog(@"this pt s longitude %ff" , thisPoint.longitude);

                [self drawArrowLines:mapView_ :thisPoint :nextPoint :[UIColor greenColor] : i+1 : false];
                [self createDashedLine: thisPoint :nextPoint :[UIColor greenColor]];
            }
        }
    }
}

score 33 · Answer 1 · answered Mar 30 '15 at 13:48

Creating a dashed line in google maps is as simple as this. This defines a polyline with a green and transparent alternating pattern.

GMSMutablePath *path = [GMSMutablePath path];

for (...) {
    // add coordinate to your path
    [path addCoordinate:CLLocationCoordinate2DMake(latitude, longitude)];
}

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = self.mapView;
polyline.strokeWidth = 3.0;

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor greenColor]],
                    [GMSStrokeStyle solidColor:[UIColor clearColor]]];

NSArray *lengths = @[@25, @20];

polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);

If you want a dotted line then you can adjust the length to

NSArray *lengths = @[@10, @10];

This works perfectly! If for someone this seems not to work (like it was happening to me) just make the lenghts bigger, like 10000. In my case the maximum zoom I was using was so low that I could not see the separation between lines and it looked like it was not working. — Ruben X, Nov 18 '15 at 15:15

score 20 · Answer 2 · edited May 23 '17 at 12:34

Everyone who needs line segments lengths to be independent of map zoom level, here's my solution in swift. I create polyline same way as in this answer, then right after that and in func mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) I call this method:

func updateLine() {
    let styles = [
        GMSStrokeStyle.solidColor(UIColor.blackColor()),
        GMSStrokeStyle.solidColor(UIColor.clearColor())
    ]
    let scale = 1.0 / mapView.projection.pointsForMeters(1, atCoordinate: mapView.camera.target)
    line.spans = GMSStyleSpans(line.path!, styles, [15.0 * scale, 10.0 * scale], kGMSLengthRhumb)
}

15.0 and 10.0 are segments lengths in points.

For me the best and simplest answer. – Marcin Kapusta Dec 01 '16 at 09:52 — Marcin Kapusta, Dec 01 '16 at 09:52

score 5 · Answer 3 · answered Sep 25 '18 at 08:29

Swift 4.0+ of Mikhail Vasilyev answer.

func updateLine() {
    let styles: [GMSStrokeStyle] = [.solidColor(.red), .solidColor(.clear)]
    let scale = 1.0 / mapView.projection.points(forMeters: 1, at: mapView.camera.target)
    let solidLine = NSNumber(value: 15.0 * Float(scale))
    let gap = NSNumber(value: 10.0 * Float(scale))
    line.spans = GMSStyleSpans(line.path!, styles, [solidLine, gap], GMSLengthKind.rhumb)
}

score 3 · Answer 4 · answered May 10 '17 at 13:35

Here is the Swift 3.0 translation

//Returns a GMSPath parsed from gpx file
        path = GpxProcessor(fileNames: "test.gpx").getPolygons()
        redPolyline = GMSPolyline(path: path)
        redPolyline.geodesic = true

        redPolyline.map = mapView

        let styles = [GMSStrokeStyle.solidColor(.clear),
                      GMSStrokeStyle.solidColor(.red)]
        let lengths: [NSNumber] = [10, 10]

        redPolyline.spans = GMSStyleSpans(redPolyline.path!, styles, lengths,GMSLengthKind.rhumb)

score 2 · Accepted Answer · answered Jun 24 '14 at 11:03

Yes it does, for dashed line you need to configure few things.

First define few variables

NSArray *_styles;
NSArray *_lengths;
NSArray *_polys;
double _pos, _step;

The define in the function, outside the for..loop not inside as you are doing

- (void) createDashedLine:(CLLocationCoordinate2D )thisPoint:(CLLocationCoordinate2D )nextPoint:
(UIColor *)colour
{

    double difLat = nextPoint.latitude - thisPoint.latitude;
    double difLng = nextPoint.longitude - thisPoint.longitude;
    double scale = camera.zoom * 2;
    double divLat = difLat / scale;
    double divLng = difLng / scale;
    CLLocationCoordinate2D tmpOrig= thisPoint;

    GMSMutablePath *singleLinePath = [GMSMutablePath path];

    for(int i = 0 ; i < scale ; i ++){
        CLLocationCoordinate2D tmpOri = tmpOrig;
        if(i > 0){
            tmpOri = CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 0.25f),
                                                tmpOrig.longitude + (divLng * 0.25f));
        }
        [singleLinePath addCoordinate:tmpOri];
        [singleLinePath addCoordinate:
         CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 1.0f),
                                        tmpOrig.longitude + (divLng * 1.0f))];


        tmpOri = CLLocationCoordinate2DMake(tmpOrig.latitude + (divLat * 1.0f),
                                            tmpOrig.longitude + (divLng * 1.0f));

    }

     GMSPolyline *polyline ;
     polyline = [GMSPolyline polylineWithPath:singleLinePath];
     polyline.geodesic = NO;
     polyline.strokeWidth = 5.f;
     polyline.strokeColor = colour;
     polyline.map = mapView_;

    //Setup line style and draw
    _lengths = @[@([singleLinePath lengthOfKind:kGMSLengthGeodesic] / 100)];
    _polys = @[polyline];
    [self setupStyleWithColour:colour];
    [self tick];
}

- (void)tick {
    //Create steps for polyline(dotted polylines)
    for (GMSPolyline *poly in _polys) {
        poly.spans =
        GMSStyleSpans(poly.path, _styles, _lengths, kGMSLengthGeodesic, _pos);
    }
    _pos -= _step;
}

-(void)setupStyleWithColour:(UIColor *)color{

    GMSStrokeStyle *gradColor = [GMSStrokeStyle gradientFromColor:color toColor:color];

    _styles = @[
                gradColor,
                [GMSStrokeStyle solidColor:[UIColor colorWithWhite:0 alpha:0]],
                ];
    _step = 50000;
}

Hope it helps. Cheers.

what if I have the polyline being drawn before that? Do we have to clear the map first ? — Jeff Bootsholz, Jun 25 '14 at 03:50
Before that as in ? I didn't get, you will draw the lines only once, and if you want to drawn again yes you have to clear the map using `[map clear];` — iphonic, Jun 25 '14 at 04:07
I have found that only a small portion of the line is drawn and the spacing is not wide enough. WOuld you please tell me how to modify such that all lines are dotted lines? — Jeff Bootsholz, Jul 10 '14 at 03:03
I would suggest to try changes values for `_step` increase to a large number in my case its `50000` and change the value to be divided for line `_lengths = @[@([path lengthOfKind:kGMSLengthGeodesic] / 100)];` to something lower may be 50.. These parameters will give you desired result. — iphonic, Jul 10 '14 at 05:52
I have changed but the previous red lines becomes blue lines — Jeff Bootsholz, Jul 10 '14 at 06:11
I think there is somewhere, you are doing something wrong, it works very fine for me..see https://db.tt/iPxzZXbn — iphonic, Jul 10 '14 at 06:26
it works but have to see if i can change all previous lines as red ....please see my updated workings if you wish., — Jeff Bootsholz, Jul 10 '14 at 06:38

ios Google SDK Map cannot create dotted polylines

5 Answers5

Linked