Add a marker symbol

A newer version of the Maps SDK is available

This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.13.1, in the Maps SDK documentation.

This example uses an image to mark a point on the map. Download the image here and add it to your Xcode project.

To learn about more ways to add points to a map, see the Markers and annotations guide.

Swift

Objective C

ViewController

github View on GitHub

Swift

Objective C

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self

        // Set the map’s center coordinate and zoom level.
        mapView.setCenter(CLLocationCoordinate2D(latitude: 41.8864, longitude: -87.7135), zoomLevel: 13, animated: false)
        view.addSubview(mapView)
    }

    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

        // Create point to represent where the symbol should be placed
        let point = MGLPointAnnotation()
        point.coordinate = mapView.centerCoordinate

        // Create a data source to hold the point data
        let shapeSource = MGLShapeSource(identifier: "marker-source", shape: point, options: nil)

        // Create a style layer for the symbol
        let shapeLayer = MGLSymbolStyleLayer(identifier: "marker-style", source: shapeSource)

        // Add the image to the style's sprite
        if let image = UIImage(named: "house-icon") {
            style.setImage(image, forName: "home-symbol")
        }

        // Tell the layer to use the image in the sprite
        shapeLayer.iconImageName = NSExpression(forConstantValue: "home-symbol")

        // Add the source and style layer to the map
        style.addSource(shapeSource)
        style.addLayer(shapeLayer)
    }
}

ViewController

github View on GitHub

Swift

Objective C

#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@end

@implementation ViewController 

- (void)viewDidLoad {
    [super viewDidLoad];

    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];

    mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    mapView.delegate = self;

    // Set the map’s center coordinate and zoom level.
    [mapView setCenterCoordinate:CLLocationCoordinate2DMake(41.8864, -87.7135)
                       zoomLevel:13
                        animated:NO];

    [self.view addSubview:mapView];
}

- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {

    // Create point to represent where the symbol should be placed
    MGLPointAnnotation *point = [[MGLPointAnnotation alloc] init];
    point.coordinate = mapView.centerCoordinate;

    // Create a data source to hold the point data
    MGLShapeSource *shapeSource = [[MGLShapeSource alloc] initWithIdentifier:@"marker-source" shape:point options:nil];

    // Create a style layer for the symbol
    MGLSymbolStyleLayer *shapeLayer = [[MGLSymbolStyleLayer alloc] initWithIdentifier:@"marker-style" source:shapeSource];

    // Add the image to the style's sprite
    [style setImage:[UIImage imageNamed:@"house-icon"] forName:@"home-symbol"];

    // Tell the layer to use the image in the sprite
    shapeLayer.iconImageName = [NSExpression expressionForConstantValue:@"home-symbol"];

    // Add the source and style layer to the map
    [style addSource:shapeSource];
    [style addLayer:shapeLayer];
}

@end