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 ?

- (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]];
            }
        }
    }
}

Answer 1

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];

Answer 2

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.

Answer 3

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)
}

Answer 4

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)

Answer 5

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.