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.
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.
