Skip to main content

Set a color theme on a map style using a Lookup Table (LUT)

Additional Developer Resources
No color theme
Shows map with no color theme applied
Monochrome color theme
Show map with monochrome color theme applied

This example shows how to set a custom color theme in a map style using setStyleColorTheme. Color themes use Lookup Tables (LUTs) to change the existing colors on a map in a predictable way.

To learn how to create a custom LUT, see the Create a Custom Color Theme tutorial.

iOS Examples App Available

This example code is part of the Maps SDK for iOS Examples App, a working iOS project available on Github. iOS developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.

See our Run the Maps SDK for iOS Examples App tutorial for step-by-step instructions.

ColorThemeMapExample.swift
github View on GitHub
import UIKit
@_spi(Experimental) import MapboxMaps

final class ViewController: UIViewController {
    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 { [weak self] _ in
            guard let self else { return }

            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") { [weak self] _, _ in
            guard let self else { return true }

            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))))
        }
    }

    
}
Additional Developer Resources
Was this example helpful?