Skip to main content

Display multiple images in a symbol layer

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.

import Mapbox

class MultipleImagesExample: UIViewController, MGLMapViewDelegate {

override func 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

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)

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