Search code examples
iosgoogle-mapsgoogle-maps-sdk-ios

Outline of polyline in Google Maps sdk for iOS


The requirement that I have is to have a green polyline to be showed on the map. But when the map is switched to satellite view, the green polyline becomes unclear.

I can't get the color of the polyline changed. So to distinguish the polyline from the background(Satellite view of the map), I need to draw white outline to the polyline.

I went through the documentation of GMSPolyline class and could not find anything using which I can outline the polyline with very thin two white lines.

Can anyone please give me suggestions as to how can I achieve this? (Without drawing/overlapping the main polyline with two boundary polylines)


Solution

  • The easiest way I've found is to draw a fatter line underneath your main polyline, thereby adding a stroke to either side.

    When you define your main polyline(s), add a zIndex:

    polyline.strokeColor = [UIColor whiteColor];
    polyline.strokeWidth = 2;
    polyline.zIndex = 10;
    polyline.map = mapView;
    

    Then add another polyline with the same path, modifying your original's strokeWidth and zIndex:

    GMSPolyline *stroke = [GMSPolyline polylineWithPath:samePathAsYourMainPolyline];
    stroke.strokeColor = [UIColor blackColor];
    stroke.strokeWidth = polyline.strokeWidth + 1;
    stroke.zIndex = polyline.zIndex - 1;
    stroke.map = mapView;