How to color terrain above a given altitude with Mapbox SDK?

34 Views Asked by At

I have a topographic/outdoor Mapbox (SDK 10) map in my Swift iOS application.

I would like to color red all the terrain above 3000 meters but I can't find any resources on how to do that. So far I managed to color red the whole area within a polygon I defined, but I would need to account for elevation too.

enter image description here

This is my code so far:

import SwiftUI
import UIKit
import MapboxMaps

struct MapBoxMapView: UIViewControllerRepresentable {
    
    func makeUIViewController(context: Context) -> MapViewController {
        return MapViewController()
    }
    
    func updateUIViewController(_ uiViewController: MapViewController, context: Context) {
    }
}

internal func decodeGeoJSON(from fileName: String) throws -> FeatureCollection? {
    guard let path = Bundle.main.path(forResource: fileName, ofType: "geojson") else {
        preconditionFailure("File '\(fileName)' not found.")
    }
    let filePath = URL(fileURLWithPath: path)
    var featureCollection: FeatureCollection?
    do {
        let data = try Data(contentsOf: filePath)
        featureCollection = try JSONDecoder().decode(FeatureCollection.self, from: data)
    } catch {
        print("Error parsing data: \(error)")
    }
    return featureCollection
}


class MapViewController: UIViewController {
    internal var mapView: MapView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        guard let accessToken = Bundle.main.infoDictionary?["MBXAccessToken"] as? String else { fatalError("error")}
        let myResourceOptions = ResourceOptions(accessToken: accessToken)
        let myCameraOptions = CameraOptions(center: CLLocationCoordinate2D(latitude: 46.150324401273672, longitude: 10.555108844031345), zoom: 13)
        let initOptions = MapInitOptions(
            resourceOptions: myResourceOptions,
            cameraOptions: myCameraOptions,
            styleURI: StyleURI(rawValue: StyleURI.outdoors.rawValue)
        )
        
        mapView = MapView(frame: view.bounds, mapInitOptions: initOptions)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        
        self.view.addSubview(mapView)
        
        mapView.mapboxMap.onNext(event: .mapLoaded) { _ in
            guard let featureCollection = try? decodeGeoJSON(from: "IT-32-TN_micro-regions") else { return }
            // Specify a unique string as the source ID (SOURCE_ID)
            let geoJSONDataSourceIdentifier = "IT-32-TN-01"
            // Create a GeoJSON data source.
            var geoJSONSource = GeoJSONSource()
            
            geoJSONSource.data = .featureCollection(featureCollection)
            geoJSONSource.lineMetrics = true
            
            
            var fillLayer = FillLayer(id: "fill-layer")
            
            
            // Setting the source
            fillLayer.source = geoJSONDataSourceIdentifier
            
            // Styling the line
            fillLayer.fillColor = .constant(StyleColor(.red.withAlphaComponent(0.2)))
            
            // Add the source and style layer to the map style.
            try! self.mapView.mapboxMap.style.addSource(geoJSONSource, id: geoJSONDataSourceIdentifier)
            try! self.mapView.mapboxMap.style.addLayer(fillLayer, layerPosition: .default)
        }
        
        
    }
}

I would also like to limit the area affected by the color to a given area defined by the polygon I'm rendering.

0

There are 0 best solutions below