# Data-driven circles

> **Note (legacy): A newer version of the Maps SDK is available**
> 
> This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.31.0, in the [Maps SDK documentation](https://docs.mapbox.com/ios/maps/guides/).

![](https://docs.mapbox.com/ios/assets/ideal-img/maps-examples-dds-circle-layer.f7ef518.480.png)

Source data originates from a GeoJSON file uploaded to create a [tileset](https://docs.mapbox.com/console-tools/data-workbench/#what-is-a-tileset) in Mapbox Studio. Refer to the [Working with GeoJSON data](https://docs.mapbox.com/ios/maps/api/6.4.1/working-with-geojson-data.html) guide for more information about working with GeoJSON source data.

Learn more about creating data visualizations in our [Predicates and expressions](https://docs.mapbox.com/ios/maps/api/6.4.1/predicates-and-expressions.html) guide.

**Swift**

Title: `ViewController`

[View on GitHub](https://github.com/mapbox/ios-sdk-examples/tree/298e050be7352eb28cee6f03e02945593140c1f3/Examples/Swift/DDSCircleLayerExample.swift)

```swift
import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {

    var mapView: MGLMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create a new map view using the Mapbox Light style.
        mapView = MGLMapView(frame: view.bounds)
        mapView.styleURL = MGLStyle.lightStyleURL
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.tintColor = .darkGray

        // Set the map’s center coordinate and zoom level.
        mapView.setCenter(CLLocationCoordinate2D(latitude: 38.897, longitude: -77.039), animated: false)
        mapView.zoomLevel = 10.5

        mapView.delegate = self
        view.addSubview(mapView)
    }

    // Wait until the style is loaded before modifying the map style.
    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

        // "mapbox://examples.2uf7qges" is a map ID referencing a tileset. For more
        // more information, see mapbox.com/help/define-map-id/
        let source = MGLVectorTileSource(identifier: "trees", configurationURL: URL(string: "mapbox://examples.2uf7qges")!)

        style.addSource(source)

        let layer = MGLCircleStyleLayer(identifier: "tree-style", source: source)

        // The source name from the source's TileJSON metadata: mapbox.com/api-documentation/maps/#retrieve-tilejson-metadata
        layer.sourceLayerIdentifier = "yoshino-trees-a0puw5"

        // Stops based on age of tree in years.
        let stops = [
            0: UIColor(red: 1.00, green: 0.72, blue: 0.85, alpha: 1.0),
            2: UIColor(red: 0.69, green: 0.48, blue: 0.73, alpha: 1.0),
            4: UIColor(red: 0.61, green: 0.31, blue: 0.47, alpha: 1.0),
            7: UIColor(red: 0.43, green: 0.20, blue: 0.38, alpha: 1.0),
           16: UIColor(red: 0.33, green: 0.17, blue: 0.25, alpha: 1.0)
        ]

        // Style the circle layer color based on the above stops dictionary.
        layer.circleColor = NSExpression(format: "mgl_step:from:stops:(AGE, %@, %@)", UIColor(red: 1.0, green: 0.72, blue: 0.85, alpha: 1.0), stops)

        layer.circleRadius = NSExpression(forConstantValue: 3)

        style.addLayer(layer)
    }
}
```

**Objective C**

Title: `ViewController`

[View on GitHub](https://github.com/mapbox/ios-sdk-examples/tree/298e050be7352eb28cee6f03e02945593140c1f3/Examples/ObjectiveC/DDSCircleLayerExample.m)

```swift
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>

@property (nonatomic) MGLMapView *mapView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Create a new map view using the Mapbox Light style.
    self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
        styleURL:[MGLStyle lightStyleURL]];
    
    self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.mapView.tintColor = [UIColor darkGrayColor];
    
    // Set the map’s center coordinate and zoom level.
    self.mapView.centerCoordinate = CLLocationCoordinate2DMake(38.897,-77.039);
    self.mapView.zoomLevel = 10.5;
    
    self.mapView.delegate = self;
    [self.view addSubview: self.mapView];
}

// Wait until the style is loaded before modifying the map style.
- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
    
    // "mapbox://examples.2uf7qges" is a map ID referencing a tileset. For more
    // more information, see mapbox.com/help/define-map-id/
    MGLSource *source = [[MGLVectorTileSource alloc] initWithIdentifier:@"trees" configurationURL:[NSURL URLWithString:@"mapbox://examples.2uf7qges"]];
    
    [self.mapView.style addSource:source];
    
    MGLCircleStyleLayer *layer = [[MGLCircleStyleLayer alloc] initWithIdentifier: @"tree-style" source:source];
    
    // The source name from the source's TileJSON metadata: mapbox.com/api-documentation/maps/#retrieve-tilejson-metadata
    layer.sourceLayerIdentifier = @"yoshino-trees-a0puw5";
    
    // Stops based on age of tree in years.
    NSDictionary *stops = @{
        @0: [UIColor colorWithRed:1.00f green:0.72f blue:0.85f alpha:1.0f],
        @2: [UIColor colorWithRed:0.69f green:0.48f blue:0.73f alpha:1.0f],
        @4: [UIColor colorWithRed:0.61f green:0.31f blue:0.47f alpha:1.0f],
        @7: [UIColor colorWithRed:0.43f green:0.20f blue:0.38f alpha:1.0f],
        @16: [UIColor colorWithRed:0.33f green:0.17f blue:0.25f alpha:1.0f]
    };
    
    // Style the circle layer color based on the above stops dictionary.
    layer.circleColor = [NSExpression expressionWithFormat:@"mgl_step:from:stops:(AGE, %@, %@)", [UIColor colorWithRed:1.0f green:0.72f blue:0.85f alpha:1], stops];
 
    layer.circleRadius = [NSExpression expressionForConstantValue:@3];
    
    [self.mapView.style addLayer:layer];
}

@end
```