Add raster imagery
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.9.0, in the Maps SDK documentation.
import Mapbox
class ViewController: UIViewController, MGLMapViewDelegate {
var mapView: MGLMapView!
var rasterLayer: MGLRasterStyleLayer?
override func viewDidLoad() {
super.viewDidLoad()
mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(CLLocationCoordinate2D(latitude: 45.5188, longitude: -122.6748), zoomLevel: 13, animated: false)
mapView.delegate = self
view.addSubview(mapView)
// Add a UISlider that will control the raster layer’s opacity.
addSlider()
}
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
// Add a new raster source and layer.
let source = MGLRasterTileSource(identifier: "stamen-watercolor", tileURLTemplates: ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"], options: [ .tileSize: 256 ])
let rasterLayer = MGLRasterStyleLayer(identifier: "stamen-watercolor", source: source)
style.addSource(source)
style.addLayer(rasterLayer)
self.rasterLayer = rasterLayer
}
@objc func updateLayerOpacity(_ sender: UISlider) {
rasterLayer?.rasterOpacity = NSExpression(forConstantValue: sender.value as NSNumber)
}
func addSlider() {
let padding: CGFloat = 10
let slider = UISlider(frame: CGRect(x: padding, y: self.view.frame.size.height - 44 - 30, width: self.view.frame.size.width - padding * 2, height: 44))
slider.minimumValue = 0
slider.maximumValue = 1
slider.value = 1
slider.isContinuous = false
slider.addTarget(self, action: #selector(updateLayerOpacity), for: .valueChanged)
view.insertSubview(slider, aboveSubview: mapView)
if #available(iOS 11.0, *) {
let safeArea = view.safeAreaLayoutGuide
slider.translatesAutoresizingMaskIntoConstraints = false
let constraints = [
slider.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor, constant: -mapView.logoView.bounds.height - 10),
slider.widthAnchor.constraint(equalToConstant: self.view.frame.size.width - padding * 2),
slider.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor)
]
NSLayoutConstraint.activate(constraints)
} else {
slider.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin]
}
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@property (nonatomic) MGLRasterStyleLayer *rasterLayer;
@property (nonatomic) MGLMapView *mapView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];
self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(45.5188, -122.6748)
zoomLevel:13
animated:NO];
self.mapView.delegate = self;
[self.view addSubview:self.mapView];
// Add a UISlider that will control the raster layer’s opacity.
[self addSlider];
}
- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
// Add a new raster source and layer.
MGLRasterTileSource *source = [[MGLRasterTileSource alloc] initWithIdentifier:@"stamen-watercolor"
tileURLTemplates:@[@"https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"]
options:@{ MGLTileSourceOptionTileSize: @256}];
MGLRasterStyleLayer *rasterLayer = [[MGLRasterStyleLayer alloc] initWithIdentifier:@"stamen-watercolor" source:source];
[mapView.style addSource:source];
[mapView.style addLayer:rasterLayer];
self.rasterLayer = rasterLayer;
}
- (void)updateLayerOpacity:(UISlider *)sender {
[self.rasterLayer setRasterOpacity:[NSExpression expressionForConstantValue:@(sender.value)]];
}
- (void)addSlider {
CGFloat padding = 10.0;
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(padding, self.view.frame.size.height - 44 - 30, self.view.frame.size.width - padding * 2, 44)];
slider.minimumValue = 0;
slider.maximumValue = 1;
slider.value = 1;
slider.continuous = false;
[slider addTarget:self action:@selector(updateLayerOpacity:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:slider];
if (@available(iOS 11, *)) {
UILayoutGuide *safeArea = self.view.safeAreaLayoutGuide;
slider.translatesAutoresizingMaskIntoConstraints = NO;
NSArray *constraints = @[
[slider.bottomAnchor constraintEqualToAnchor: safeArea.bottomAnchor constant:-self.mapView.logoView.bounds.size.height - 10],
[slider.widthAnchor constraintEqualToConstant:self.view.frame.size.width - padding * 2],
[slider.centerXAnchor constraintEqualToAnchor:safeArea.centerXAnchor]
];
[NSLayoutConstraint activateConstraints:constraints];
} else {
slider.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
}
}
@end