Display multiple images in a symbol layer | Maps SDK v6 | iOS

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.3.0, in the Maps SDK documentation.

ViewController

github View on GitHub

Swift

Objective-C

import Mapbox

class MultipleImagesExample: UIViewController, MGLMapViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create and add a map view.
        let mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.outdoorsStyleURL)

        // Center the map on Yosemite National Park, United States.
        mapView.setCenter(CLLocationCoordinate2D(latitude: 37.761, longitude: -119.624), zoomLevel: 10, animated: false)
        mapView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        mapView.delegate = self
        view.addSubview(mapView)
    }

    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
        // Add icons from the U.S. National Parks Service to the map's style.
        style.setImage(UIImage(named: "nps-restrooms")!, forName: "restrooms")
        style.setImage(UIImage(named: "nps-trailhead")!, forName: "trailhead")
        style.setImage(UIImage(named: "nps-picnic-area")!, forName: "picnic-area")

        // Access a vector tileset that contains places of interest at Yosemite National Park. This tileset was created by uploading NPS shapefiles to Mapbox Studio.
        let url = URL(string: "mapbox://examples.ciuz0vpc")!

        // Add the vector tileset to the map's style.
        let source = MGLVectorTileSource(identifier: "yosemite-pois", configurationURL: url)
        style.addSource(source)

        // Create a symbol style layer and access the layer containin
        let layer = MGLSymbolStyleLayer(identifier: "yosemite-pois", source: source)

        // Access the layer that contains the POI data. The source layer identifier is a unique identifier for a layer within a vector tile source.
        layer.sourceLayerIdentifier = "Yosemite_POI-38jhes"

        // Create a stops dictionary with keys that are possible values for 'POITYPE', paired with icon images that will represent those features.
        let poiIcons = ["Picnic Area": "picnic-area", "Restroom": "restrooms", "Trailhead": "trailhead"]

        // Use the stops dictionary to assign an icon based on the "POITYPE" for each feature.
        layer.iconImageName = NSExpression(format: "FUNCTION(%@, 'valueForKeyPath:', POITYPE)", poiIcons)

        style.addLayer(layer)

    }
}