Data-driven circles
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.9.0, in the Maps SDK documentation.
Source data originates from a GeoJSON file uploaded to create a tileset in Mapbox Studio. Refer to the Working with GeoJSON data guide for more information about working with GeoJSON source data.
Learn more about creating data visualizations in our Predicates and expressions guide.
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)
}
}
#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