Back to examples
beginner

Show and hide a layer

Add a source and a toggleable layer.

      

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    var mapView: MGLMapView!
    var contoursLayer: MGLStyleLayer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        mapView.setCenter(CLLocationCoordinate2D(latitude: 37.745395, longitude: -119.594421), zoomLevel: 11, animated: false)
        view.addSubview(mapView)
        
        addToggleButton()
        
        mapView.delegate = self
    }
    
    // Wait until the style is loaded before modifying the map style
    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
        addLayer(to: style)
    }
    
    func addLayer(to style: MGLStyle) {
        let source = MGLVectorTileSource(identifier: "contours", configurationURL: NSURL(string: "mapbox://mapbox.mapbox-terrain-v2")! as URL)
        
        let layer = MGLLineStyleLayer(identifier: "contours", source: source)
        layer.sourceLayerIdentifier = "contour"
        layer.lineJoin = NSExpression(forConstantValue: "round")
        layer.lineCap = NSExpression(forConstantValue: "round")
        layer.lineColor = NSExpression(forConstantValue: UIColor.brown)
        layer.lineWidth = NSExpression(forConstantValue: 1.0)
        
        style.addSource(source)
        if let water = style.layer(withIdentifier: "water") {
            // You can insert a layer below an existing style layer
            style.insertLayer(layer, below: water)
        } else {
            // or you can simply add it above all layers
            style.addLayer(layer)
        }
        
        self.contoursLayer = layer
        
        showContours()
    }
    
    @objc func toggleLayer(sender: UIButton) {
        sender.isSelected = !sender.isSelected
        if sender.isSelected {
            showContours()
        } else {
            hideContours()
        }
    }
    
    func showContours() {
        self.contoursLayer?.isVisible = true
    }
    
    func hideContours() {
        self.contoursLayer?.isVisible = false
    }
    
    func addToggleButton() {
        let button = UIButton(type: .system)
        button.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin]
        button.setTitle("Toggle Contours", for: .normal)
        button.isSelected = true
        button.sizeToFit()
        button.center.x = self.view.center.x
        button.frame = CGRect(origin: CGPoint(x: button.frame.origin.x, y: self.view.frame.size.height - button.frame.size.height - 5), size: button.frame.size)
        button.addTarget(self, action: #selector(toggleLayer(sender:)), for: .touchUpInside)
        self.view.addSubview(button)
    }
}




      
      


#import "ViewController.h"
@import Mapbox;

@interface ViewController () <MGLMapViewDelegate>
@property (nonatomic) MGLMapView *mapView;
@property (nonatomic) MGLStyleLayer *contoursLayer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];
    self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    // Set the map's center coordinate
    [self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(37.745395, -119.594421)
			    zoomLevel:11
			     animated:NO];

    [self.view addSubview:self.mapView];

    [self addToggleButton];

    // Set the delegate property of our map view to self after instantiating it
    self.mapView.delegate = self;
}

// Wait until the style is loaded before modifying the map style
- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
    [self addLayer];
}

- (void)addLayer {
    MGLSource *source = [[MGLVectorTileSource alloc] initWithIdentifier:@"contours" configurationURL:[NSURL URLWithString:@"mapbox://mapbox.mapbox-terrain-v2"]];

    MGLLineStyleLayer *layer = [[MGLLineStyleLayer alloc] initWithIdentifier:@"contours" source:source];
    layer.sourceLayerIdentifier = @"contour";
    layer.lineJoin = [NSExpression expressionForConstantValue:[NSValue valueWithMGLLineJoin:MGLLineJoinRound]];
    layer.lineCap = [NSExpression expressionForConstantValue:[NSValue valueWithMGLLineCap:MGLLineCapRound]];
    layer.lineColor = [NSExpression expressionForConstantValue:[UIColor brownColor]];
    layer.lineWidth = [NSExpression expressionForConstantValue:@1];

    [self.mapView.style addSource:source];

    MGLStyleLayer *waterLayer = [self.mapView.style layerWithIdentifier:@"water"];
    if (waterLayer != nil) {
	// You can insert a layer below an existing style layer
	[self.mapView.style insertLayer:layer belowLayer:waterLayer];
    } else {
	// or you can simply add it above all layers
	[self.mapView.style addLayer:layer];
    }

    self.contoursLayer = layer;

    [self showContours];
}

- (void)toggleLayer:(UIButton *)sender {
    sender.selected = !sender.selected;
    if (sender.selected) {
	[self showContours];
    } else {
	[self hideContours];
    }
}

- (void)showContours {
    [self.contoursLayer setVisible:YES];
}

- (void)hideContours {
    [self.contoursLayer setVisible:NO];
}

- (void)addToggleButton {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    [button setTitle:@"Toggle Contours" forState:UIControlStateNormal];
    [button setSelected:YES];
    [button sizeToFit];
    button.center = CGPointMake(self.view.center.x, 0);
    button.frame = CGRectMake(button.frame.origin.x, self.view.frame.size.height - button.frame.size.height - 5, button.frame.size.width, button.frame.size.height);
    [button addTarget:self action:@selector(toggleLayer:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

@end