> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ios/ja/maps/llms.txt)

# Interpolate colors between zoom level

![Use an interpolate expression to style the background layer color depending on zoom level.](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-color-expression.ff28551.480.png)

This example demonstrates the smooth transition of colors on the map based on zoom levels by using a color [expression](https://docs.mapbox.com/help/glossary/expression/) in an application build with the **Mapbox Maps SDK for iOS**. The code initializes a [`MapView`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/map-view/) centered over the United States and waits for the map style to load before adding data. The JSON expression `["interpolate", ["linear"], ["zoom"], 0, "hsl(0, 79%, 53%)", 14, "hsl(233, 80%, 47%)"]` is transformed into a Swift representation to interpolate colors based on zoom levels. Two color stops at zoom levels 0 and 14 are defined using `UIColor`.

The interpolation expression is constructed using `Exp` instances and then encoded into JSON format. Finally, the color interpolation expression is applied to the `land` layer's background color property on the map.

> **Note: iOS Examples App Available**
> 
> This example code is part of the **Maps SDK for iOS Examples App**, a working iOS project [available on Github](https://github.com/mapbox/mapbox-maps-ios/tree/11.31.0/Sources/Examples). 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](https://docs.mapbox.com/help/tutorials/maps-sdk-ios-examples-app/) tutorial for step-by-step instructions.

**Swift**

Title: `ColorExpressionExample.swift`

[View on GitHub](https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/Examples/All%20Examples/ColorExpressionExample.swift)

```swift
import UIKit
import MapboxMaps

final class ViewController: UIViewController {
    private var mapView: MapView!
    private var cancelables = Set<AnyCancelable>()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Center the map over the United States.
        let centerCoordinate = CLLocationCoordinate2D(latitude: 40.58058466412761,
                                                      longitude: -97.734375)
        let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 3), styleURI: .streets)

        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)

        // Allows the view controller to receive information about map events.
        mapView.mapboxMap.onMapLoaded.observeNext { [weak self] _ in
            self?.setupExample()
        }.store(in: &cancelables)

    }

    // Wait for the style to load before adding data to it.
    func setupExample() {
        /**
         This JSON expression is transformed to swift below:
         [
           "interpolate",
           ["linear"],
           ["zoom"],
           0,
           "hsl(0, 79%, 53%)",
           14,
           "hsl(233, 80%, 47%)"
         ]
         */

        let stops: [Double: UIColor] = [
            0: .red,
            14: .blue
        ]

        let exp = Exp(.interpolate) {
            Exp(.linear)
            Exp(.zoom)
            stops
        }

        if let data = try? JSONEncoder().encode(exp.self),
           let jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) {
            try! mapView.mapboxMap.setLayerProperty(for: "land",
                                                          property: "background-color",
                                                          value: jsonObject)
        }

        
        
    }
}
```