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.7.0, in the Maps SDK documentation.
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)
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Create and add a map view.
MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle outdoorsStyleURL]];
// Center the map on Yosemite National Park, United States.
[mapView setCenterCoordinate:CLLocationCoordinate2DMake(37.761, -119.624) zoomLevel:10 animated:NO];
mapView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
mapView.delegate = self;
[self.view addSubview:mapView];
}
- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
// Add icons from the U.S. National Parks Service to the map's style.
[style setImage:[UIImage imageNamed:@"nps-restrooms"] forName:@"restrooms"];
[style setImage:[UIImage imageNamed:@"nps-trailhead"] forName:@"trailhead"];
[style setImage:[UIImage imageNamed:@"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.
NSURL *url = [[NSURL alloc] initWithString:@"mapbox://examples.ciuz0vpc"];
MGLVectorTileSource *source = [[MGLVectorTileSource alloc] initWithIdentifier:@"yosemite-pois" configurationURL:url];
[style addSource:source];
MGLSymbolStyleLayer *layer = [[MGLSymbolStyleLayer alloc] initWithIdentifier:@"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.
NSDictionary *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 expressionWithFormat:@"FUNCTION(%@, 'valueForKeyPath:', POITYPE)", poiIcons];
[style addLayer:layer];
}
@end