MAPSIOS-1670: *-use-theme adoption (#2432)

Author: aleksproger

CHANGELOG.md

@@ -5,6 +5,7 @@ Mapbox welcomes participation and contributions from everyone.
 ## main
 
 * Add support for the `maxOverscaleFactorForParentTiles` property in `CustomRasterSource` and `CustomGeometrySource`, allowing greater control over tile overscaling behavior when rendering custom raster tiles.
+* Add support for experimental *-use-theme propert that allow to override the color theme set on the Map. This is experimental and have several limitations - currently expressions are not supported. Color properties in Lights, Rain, Snow are not supported. *-use-theme for layer applied only after zoom level change.
 
 ## 11.10.0-beta.1 - 20 January, 2025
 

Examples.xcodeproj/project.pbxproj

@@ -0,0 +1,79 @@
+import UIKit
+@_spi(Experimental) import MapboxMaps
+
+final class ColorThemeMapExample: UIViewController, ExampleProtocol {
+    private var mapView: MapView!
+    private var mapUseTheme = true
+    private var circleUseTheme = true
+    private var cancellables = Set<AnyCancelable>()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        let mapInitOptions = MapInitOptions(styleURI: .streets)
+        mapView = MapView(frame: view.bounds, mapInitOptions: mapInitOptions)
+
+        view.addSubview(mapView)
+        view.backgroundColor = .skyBlue
+        mapView.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            mapView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+            mapView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            mapView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+            mapView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+        ])
+
+        try! mapView.mapboxMap.setColorTheme(ColorTheme(uiimage: UIImage(named: "monochrome_lut")!))
+        addTestLayer()
+
+        mapView.gestures.onMapTap.observe { _ in
+            self.mapUseTheme.toggle()
+            if self.mapUseTheme {
+                try! self.mapView.mapboxMap.setColorTheme(ColorTheme(uiimage: UIImage(named: "monochrome_lut")!))
+            } else {
+                try! self.mapView.mapboxMap.removeColorTheme()
+            }
+        }
+        .store(in: &cancellables)
+
+        mapView.gestures.onLayerTap("blue-layer") { _, _ in
+            self.circleUseTheme.toggle()
+            self.addTestLayer(useTheme: self.circleUseTheme)
+            return true
+        }
+        .store(in: &cancellables)
+    }
+
+    private func addTestLayer(
+        id: String = "blue-layer",
+        radius: LocationDistance = 2,
+        color: UIColor = .blue,
+        coordinate: CLLocationCoordinate2D = .init(latitude: 40, longitude: -104),
+        useTheme: Bool = true
+    ) {
+        let sourceId = "\(id)-source"
+        try? mapView.mapboxMap.removeLayer(withId: id)
+        try? mapView.mapboxMap.removeLayer(withId: "\(id)-border")
+        try? mapView.mapboxMap.removeSource(withId: sourceId)
+
+        mapView.mapboxMap.setMapStyleContent {
+            FillLayer(id: id, source: sourceId)
+                .fillColorUseTheme(useTheme ? .default : .none)
+                .fillColor(color)
+                .fillOpacity(0.4)
+            LineLayer(id: "\(id)-border", source: sourceId)
+                .lineColor(color.darker)
+                .lineColorUseTheme(useTheme ? .default : .none)
+                .lineOpacity(0.4)
+                .lineWidth(2)
+            GeoJSONSource(id: sourceId)
+                .data(.geometry(.polygon(Polygon(center: coordinate, radius: radius * 1000000, vertices: 60))))
+        }
+    }
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        // The below line is used for internal testing purposes only.
+        finish()
+    }
+}

Sources/Examples/All Examples/Lab/ColorThemeMapExample.swift

@@ -141,6 +141,9 @@ struct Examples {
         Example(title: "Combine",
                 description: "Shows how to use map events with Combine framework.",
                 type: CombineExample.self)
+        Example(title: "Color Theme Example",
+                description: "Shows how to use color theme",
+                type: ColorThemeMapExample.self)
         Example(title: "Combine location",
                 description: "Shows how to use Combine framework to drive the location puck.",
                 type: CombineLocationExample.self)

Sources/Examples/Models/Examples.swift

@@ -10,9 +10,11 @@ struct ColorThemeExample: View {
 
     @State private var theme: Theme = .red
     @State private var panelHeight: CGFloat = 0
+    @State private var atmosphereUseTheme = true
+    @State private var circleUseTheme = true
 
     var body: some View {
-        Map(initialViewport: .camera(center: .init(latitude: 40.72, longitude: -73.99), zoom: 11, pitch: 45)) {
+        Map(initialViewport: .camera(center: .init(latitude: 40.72, longitude: -73.99), zoom: 2, pitch: 45)) {
             switch theme {
             case .default:
                 EmptyMapContent()
@@ -22,8 +24,12 @@ struct ColorThemeExample: View {
                 ColorTheme(uiimage: monochromeTheme)
             }
 
-            /// Defines a custom layer and source to draw the border line.
-            NYNJBorder()
+            Atmosphere()
+                .color(.green)
+                .colorUseTheme(atmosphereUseTheme ? .default : .none)
+
+            TestLayer(id: "blue-layer", radius: 2, color: .blue, coordinate: .init(latitude: 40, longitude: -104), useTheme: circleUseTheme)
+
         }
         .mapStyle(.streets) /// In standard style it's possible to provide custom theme using `.standard(themeData: "base64String")`
         .additionalSafeAreaInsets(.bottom, panelHeight)
@@ -36,6 +42,9 @@ struct ColorThemeExample: View {
                         ColorButton(color: .red, isOn: Binding(get: { theme == .red }, set: { _, _ in theme = .red }))
                         ColorButton(color: .secondaryLabel, isOn: Binding(get: { theme == .monochrome }, set: { _, _ in theme = .monochrome }))
                     }
+
+                    Toggle("Atmosphere Use Theme", isOn: $atmosphereUseTheme)
+                    Toggle("Circle Use Theme", isOn: $circleUseTheme)
                 }
                 .floating()
             }
@@ -82,33 +91,33 @@ private struct ColorButton: View {
     }
 }
 
-private struct NYNJBorder: MapContent {
-    var body: some MapContent {
-        GeoJSONSource(id: "border")
-            .data(.geometry(.lineString(LineString([
-                CLLocationCoordinate2D(latitude: 40.913503418907936, longitude: -73.91912400100642),
-                CLLocationCoordinate2D(latitude: 40.82943110786286, longitude: -73.9615887363045),
-                CLLocationCoordinate2D(latitude: 40.75461056309348, longitude: -74.01409059085539),
-                CLLocationCoordinate2D(latitude: 40.69522028220487, longitude: -74.02798814058939),
-                CLLocationCoordinate2D(latitude: 40.65188756398558, longitude: -74.05655532615407),
-                CLLocationCoordinate2D(latitude: 40.64339339389301, longitude: -74.13916853846217),
-            ]))))
+private struct TestLayer: MapStyleContent {
+    var id: String
+    var radius: LocationDistance
+    var color: UIColor
+    var coordinate: CLLocationCoordinate2D
+    var useTheme: Bool
 
-        LineLayer(id: "border", source: "border")
-            .lineColor(.orange)
-            .lineWidth(8)
-            .slot(.bottom)
+    var body: some MapStyleContent {
+        let sourceId = "\(id)-source"
+        FillLayer(id: id, source: sourceId)
+            .fillColorUseTheme(useTheme ? .default : .none)
+            .fillColor(color)
+            .fillOpacity(0.4)
+        LineLayer(id: "\(id)-border", source: sourceId)
+            .lineColor(color.darker)
+            .lineColorUseTheme(useTheme ? .default : .none)
+            .lineOpacity(0.4)
+            .lineWidth(2)
+        GeoJSONSource(id: sourceId)
+            .data(.geometry(.polygon(Polygon(center: coordinate, radius: radius * 1000000, vertices: 60))))
     }
 }
 
 private let styleURL = Bundle.main.url(forResource: "fragment-realestate-NY", withExtension: "json")!
 private let monochromeTheme = UIImage(named: "monochrome_lut")!
 private let redTheme = "iVBORw0KGgoAAAANSUhEUgAABAAAAAAgCAYAAACM/gqmAAAAAXNSR0IArs4c6QAABSFJREFUeF7t3cFO40AQAFHnBv//wSAEEgmJPeUDsid5h9VqtcMiZsfdPdXVzmVZlo+3ZVm+fr3//L7257Lm778x+prL1ff0/b//H+z/4/M4OkuP/n70Nc7f+nnb+yzb//sY6vxt5xXPn+dP/aH+GsXJekb25izxR/ypZ6ucUefv9g4z2jPP3/HPHwAAgABAABgACIACkAAsAL1SD4yKWQAUAHUBdAG8buKNYoYL8PEX4FcHQAAAAAAAAAAAAAAAAAAAAAAA8LAeGF1mABAABAABQACQbZP7+hk5AwACAAAAAAAAAAAAAAAAAAAAAAAA4EE9AICMx4QBAAAAAAAANgvJsxGQV1dA/PxmMEtxU9YoABQACoC5CgDxX/wvsb2sEf/Ff/Ff/N96l5n73+/5YAB4CeBqx2VvMqXgUfD2npkzBCAXEBeQcrkoa5x/FxAXEBcQF5A2Wy3/t32qNYr8I//Mln+MABgBMAJgBMAIgBEAIwBGAIwAGAEwAmAE4K4eAGCNQIw+qQ0AmQ+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/6gEABAB5RgACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN/UAAPKcAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgEFNODICRtDkDO/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOhvlPUWem+h9xKQ+V4CUt9wO6KZnn/Pv+ff8z/bW5DFP59CUnJbWSP+iX/iX78znqED/urxnwHAAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADoNMcHUAdQAQcAUfAe8xEwH0O86t3IPz8OvClu17WqD/UH+oP9cf1Gdia01d/LQsDgAHAAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABkCnSQwABgACj8Aj8D1mItAMAB1wHfDS3S5r5F/5V/6Vf3XAW12h/mIArHY89iZTAAQA2XtmBKAWqOslyf4rgBXACmAFcIur8k/bJ/mnQTr5V/6Vf+fKv0YAjAAYATACYATACIARACMARgCMABgBMAJgBMAIgBEAIwCdZuiA64AjwAgwAtxjpg6cDlztLlLA7/Pr1gueyr56/jx/5ZzUNeof9Y/6R/0zk4HGAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADgAHQaQ4DgAGAgCPgCHiPmTqQOpC1u8gAYACMjAf5V/6Vf+XfmTrQ8l97v8Z/5X8GAAOAAcAAYAAwABgADAAGAAOAAcAAYAAwABgADIBO0xgADAAdCB0IHYgeMxkADAAdkGM7IPbf/pfuWlmj/lH/qH/UPzMZGAwABgADgAHAAGAAMAAYAAwABgADgAHAAGAAMAAYAJ3mMAAYAAg4Ao6A95jJAGAA6EDrQJfuclkj/8q/8q/8O1MHWv47Nv8xABgADAAGAAOAAcAAYAAwABgADAAGAAOAAcAAYAB0msYAYADoQOhA6ED0mMkAYADogBzbAbH/9r/YFWWN+kf9o/5R/8xkYDAAGAAMAAYAA4ABwABgADAAGAAMAAYAA4ABwABgAHSawwBgACDgCDgC3mMmA4ABoAOtA126y2WN/Cv/yr/y70wdaPnv2PzHAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADgAHQaRoDgAGgA6EDoQPRYyYDgAGgA3JsB8T+2/9iV5Q16h/1j/pH/TOTgcEAYAAwABgADAAGAAOAAcAAYAAwABgADAAGAAPgyQ2AT4NBIB3ew5dkAAAAAElFTkSuQmCC"
 
-private extension StandardTheme {
-    static let red = StandardTheme(rawValue: "red")
-}
-
 struct ColorThemeExample_Previews: PreviewProvider {
     static var previews: some View {
         StandardStyleImportExample()

Sources/Examples/SwiftUI Examples/ColorThemeExample.swift

@@ -29,6 +29,7 @@
 - ``Rain``
 - ``Snow``
 - ``ColorTheme``
+- ``ColorUseTheme``
 
 ### Declarative Map Styling