Polylines

A polyline is represented by the MAPolyline class, which consists of an ordered sequence of line segments defined by a set of latitude and longitude coordinates. The iOS SDK supports drawing polylines on 3D vector maps with various styles, including arrows and textures. You can also configure the line cap and join types to meet different rendering requirements.

Draw a Polyline

Step 1: Modify the ViewController.m file. In the viewDidLoad method, construct the polyline data object (a set of coordinate points).

CLLocationCoordinate2D commonPolylineCoords[4];
    commonPolylineCoords[0].latitude = 1.283400;
    commonPolylineCoords[0].longitude = 103.880700;

    commonPolylineCoords[1].latitude = 1.303400;
    commonPolylineCoords[1].longitude = 103.900700;

    commonPolylineCoords[2].latitude = 1.3153400;
    commonPolylineCoords[2].longitude = 103.910700;

    commonPolylineCoords[3].latitude = 1.333400;
    commonPolylineCoords[3].longitude = 103.920700;

    // Construct the polyline object
    MAPolyline *commonPolyline = [MAPolyline polylineWithCoordinates:commonPolylineCoords count:4];

    // Add the polyline to the map
    [self.mapView addOverlay: commonPolyline];

Step 2: In the ViewController.m file, implement the mapView:rendererForOverlay: callback from the <MAMapViewDelegate> protocol to configure the polyline style.

- (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
{
    if ([overlay isKindOfClass:[MAPolyline class]])
    {
        MAPolylineRenderer *polylineRenderer = [[MAPolylineRenderer alloc] initWithPolyline:overlay];
        
        polylineRenderer.lineWidth    = 8.f;
        polylineRenderer.strokeColor  = [UIColor colorWithRed:0 green:1 blue:0 alpha:0.6];
        polylineRenderer.lineJoinType = kMALineJoinRound;
        polylineRenderer.lineCapType  = kMALineCapRound;
        
        return polylineRenderer;
    }
    return nil;
}

After running the app, the result appears as shown below:

Add a Texture to a Polyline

In the mapView:rendererForOverlay: callback, call the loadStrokeTextureImage method of MAPolylineRenderer to set a texture image for the polyline. This feature is supported on 3D maps only.

Texture format requirements: The texture image must be square, with both width and height being powers of two (e.g., 64x64 pixels). Otherwise, the texture is ignored. If a texture image is set, the line color, line join type, and line cap type settings are ignored.

Note: Currently, only polylines support texture images. Other overlay types do not support this feature.

The following code demonstrates how to set a texture image:

[polylineRenderer loadStrokeTextureImage:[UIImage imageNamed:@"arrowTexture"]];