Add raster imagery | 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.9.0, in the Maps SDK documentation.

Swift

Objective C

ViewController

github View on GitHub

Swift

Objective C


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]
        }
    }
}

ViewController

github View on GitHub

Swift

Objective C


#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

追加の開発者リソース