1

Per the example at https://docs.mapbox.com/ios/maps/examples/runtime-toggle-layer/ I'm able to easily add a layer from one of Mapbox's pre-defined map styles (code included in first func to show exactly what worked for me). However, when I try to add a layer from one of my own styles, it seems to be added but doesn't appear. I'm wondering what I'm missing or if this is even possible. In the same test app, I've used the URL for my second style to create the MapView temporarily so I could check the layer to ensure I'm using the proper sourceIdentifier and sourceLayerIdentifier, e.g.

<MGLLineStyleLayer: 0x282e54080; identifier = layer-friendly-name; sourceIdentifier = mapbox://myco.abc123; sourceLayerIdentifier = layer_src_name; predicate = (null); visible = YES>


func addMapboxExampleLayer(){ // works fine

    let url = "mapbox://mapbox.mapbox-terrain-v2"
    
    // Add a new vector source and layer.
    guard let srcURL = URL(string: url) else { return }
    
    guard let mapStyle = mapView.style else { return }
    
    let source = MGLVectorTileSource(identifier: "contours", configurationURL: NSURL(string: "mapbox://mapbox.mapbox-terrain-v2")! as URL)
    mapStyle.addSource(source)
    
    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.red)
    layer.lineWidth = NSExpression(forConstantValue: 4.0)
    
    
    let layerBelowIdentifier = "county-label"
    
    if let layerBelowInsert = mapStyle.layer(withIdentifier: layerBelowIdentifier) {
        
        mapStyle.insertLayer(layer, above: layerBelowInsert)
    }
}

This does not work:

func addParcelLayer(){

    let url = "mapbox://styles/stonetip/<my-unique-style-id>"
    
    // Add a new vector source and layer.
    guard let srcURL = URL(string: url) else { return }
    
    guard let mapStyle = mapView.style else { return }
    
    let source = MGLVectorTileSource(identifier: "mapbox://myco.abc123", configurationURL: srcURL)
    mapStyle.addSource(source)
    
    let layer = MGLLineStyleLayer(identifier: "layer-friendly-name", source: source)
    layer.sourceLayerIdentifier = "layer_src_name"

    layer.lineJoin = NSExpression(forConstantValue: "round")
    layer.lineCap = NSExpression(forConstantValue: "round")
    layer.lineColor = NSExpression(forConstantValue: UIColor.red)
    layer.lineWidth = NSExpression(forConstantValue: 4.0)

    let layerBelowIdentifier = "county-label"
    
    if let layerBelowInsert = mapStyle.layer(withIdentifier: layerBelowIdentifier) {
        
        mapStyle.insertLayer(layer, above: layerBelowInsert)
    }
}

1 Answer 1

1

The URL was wrong. It has to point to the tileset ID (e.g. mapbox://myco.abc123).

  • You can get a tileset ID by navigating to studio.mapbox.com > Tilesets > your tileset.
  • Under that tileset > Layer Details you can get the sourceIdentifier for a layer, e.g. "layer_src_name". It's important to have this exactly right.

This (crude) function works:

func addParcelLayer(){

    let url = "mapbox://myco.abc123"
    
    // Add a new vector source and layer.
    guard let srcURL = URL(string: url) else { return }
    
    guard let mapStyle = mapView.style else { return }
    
    let tileSource = MGLVectorTileSource(identifier: "porcels", configurationURL: srcURL)
    mapStyle.addSource(tileSource)
    
    let layer = MGLLineStyleLayer(identifier: "layer-friendly-name", source: source)
layer.sourceLayerIdentifier = "layer_src_name"

    layer.lineJoin = NSExpression(forConstantValue: "round")
    layer.lineCap = NSExpression(forConstantValue: "round")
    layer.lineColor = NSExpression(forConstantValue: UIColor.green)
    layer.lineWidth = NSExpression(forConstantValue: 4.0)

    let layerBelowIdentifier = "county-label"
    
    if let layerBelowInsert = mapStyle.layer(withIdentifier: layerBelowIdentifier) {
        
        mapStyle.insertLayer(layer, above: layerBelowInsert)
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.