Mapbox FillLayer not rendering

Question

In MapBox, I am trying to highlight an area of GeoJSON in the map, for example this 'Manhattan, NYC' GeoJSON I found as an example. Below is my ViewDidLoad() function, but the FillLayer doesn't seem to be rendering on the map, and I'm not sure why...

override public func viewDidLoad() {
    super.viewDidLoad()
    let myResourceOptions = ResourceOptions(accessToken: "my_key_here")
    let myMapInitOptions = MapInitOptions(resourceOptions: myResourceOptions, styleURI: StyleURI(url: URL(string: "mapbox://styles/custom_URL_here")!)!)
    
    mapView = MapView(frame: view.bounds, mapInitOptions: myMapInitOptions)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    let geoJSONDataSourceIdentifier = "SOURCE_ID"
    var geoJSONSource = GeoJSONSource()
    geoJSONSource.data = .url(URL(string: "https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/manhattan.geojson")!)
    try! mapView.mapboxMap.style.addSource(geoJSONSource, id: geoJSONDataSourceIdentifier)
    mapView.mapboxMap.onNext(event: .mapLoaded) { _ in
        var polygonLayer = FillLayer(id: "LAYER_ID")
        polygonLayer.source = "SOURCE_ID"
        polygonLayer.fillColor = .constant(StyleColor(.green))
        polygonLayer.fillOpacity = .constant(1)
        try! self.mapView.mapboxMap.style.addLayer(polygonLayer)
    }
    self.view.addSubview(mapView)
}

I'm getting an error: 'Failed to set data for source with id: SOURCE_ID, error: StyleError(rawValue: "Source SOURCE_ID is not in style")' but after doing research haven't found anything related to that error online.

score 0 · Answer 1 · answered Dec 17 '22 at 13:26

I tried your example using the last version of Mapbox iOS SDK 10.10.0. Indeed the FillLayer is not rendered on the map. I tested with the outdoors style.

Thing is, I didn't get your error and I could not reproduce this error (maybe you're using a custom map style?): StyleError(rawValue: "Source SOURCE_ID is not in style"), but I did manage to display the layer on the map by moving source related data inside .mapLoaded event handling:

mapView.mapboxMap.onNext(event: .mapLoaded) { _ in
    let geoJSONDataSourceIdentifier = "SOURCE_ID"
    var geoJSONSource = GeoJSONSource()
    geoJSONSource.data = .url(URL(string: "https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/manhattan.geojson")!)
    try! self.mapView.mapboxMap.style.addSource(geoJSONSource, id: geoJSONDataSourceIdentifier)
    
    var polygonLayer = FillLayer(id: "LAYER_ID")
    polygonLayer.source = "SOURCE_ID"
    polygonLayer.fillColor = .constant(StyleColor(.green))
    polygonLayer.fillOpacity = .constant(1)
    try! self.mapView.mapboxMap.style.addLayer(polygonLayer)
}

Hope it helps!

Exactly, I am using a custom map style. Do you have a solution for custom map style instead of generic? — nickcoding2, Dec 17 '22 at 14:01
But did you try the above suggested change? Because neither with `.outdoors` style the layer was not displayed on my side before moving source related code inside `.mapLoaded` event handling. The error may occur on your side due to a race condition: the content of the geojson is not added into the style source before you call `addLayer`. To test you can try adding a delay before calling `mapView.mapboxMap.style.addLayer(polygonLayer)` or you can download the geojson file and load it from local files — Vlad Preda, Dec 17 '22 at 14:39

Mapbox FillLayer not rendering

1 Answers1