# Display multiple shapes on a map > **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.29.0, in the [Maps SDK documentation](https://docs.mapbox.com/ios/ja/maps/guides/). ![](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-multiple-shapes.e48f89a.480.png) Download the [GeoJSON source data](pathname:///files/dc-metro.geojson), which contains a shape collection that represents subway lines, stations, and neighborhoods. **Swift** Title: `ViewController` [View on GitHub](https://github.com/mapbox/ios-sdk-examples/tree/298e050be7352eb28cee6f03e02945593140c1f3/Examples/Swift/MultipleShapesExample.swift) ```swift import Mapbox class ViewController: UIViewController, MGLMapViewDelegate { var mapView: MGLMapView! override func viewDidLoad() { super.viewDidLoad() // Configure a map view centered on Washington, D.C. mapView = MGLMapView(frame: view.bounds) mapView.styleURL = MGLStyle.lightStyleURL mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight] mapView.setCenter(CLLocationCoordinate2D(latitude: 38.897435, longitude: -77.039679), zoomLevel: 12, animated: false) mapView.delegate = self view.addSubview(mapView) } func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) { // Since we know this file exists within this project, we'll force unwrap its value. // If this data was coming from an external server, we would want to perform // proper error handling for a web request/response. let url = URL(fileURLWithPath: Bundle.main.path(forResource: "dc-metro", ofType: "geojson")!) // Create a shape source and register it with the map style. let source = MGLShapeSource(identifier: "transit", url: url, options: nil) style.addSource(source) // Add different line, point, and polygon shapes to the map style. style.addLines(from: source) style.addPoints(from: source) style.addPolygons(from: source) } } extension MGLStyle { func addLines(from source: MGLShapeSource) { /** Configure a line style layer to represent a rail line, filtering out all data from the source that is not of `Rail line` type. The `TYPE` is an attribute of the source data that can be seen by inspecting the GeoJSON source file, for example: { "type": "Feature", "properties": { "NAME": "Dupont Circle", "TYPE": "metro-station" }, "geometry": { "type": "Point", "coordinates": [ -77.043416, 38.909605 ] }, "id": "994446c244acadeb15d3f9fc18278c73" } */ let lineLayer = MGLLineStyleLayer(identifier: "rail-line", source: source) lineLayer.predicate = NSPredicate(format: "TYPE = 'Rail line'") lineLayer.lineColor = NSExpression(forConstantValue: UIColor.red) lineLayer.lineWidth = NSExpression(forConstantValue: 2) self.addLayer(lineLayer) } func addPoints(from source: MGLShapeSource) { // Configure a circle style layer to represent rail stations, filtering out all data from // the source that is not of `metro-station` type. let circleLayer = MGLCircleStyleLayer(identifier: "stations", source: source) circleLayer.predicate = NSPredicate(format: "TYPE = 'metro-station'") circleLayer.circleColor = NSExpression(forConstantValue: UIColor.red) circleLayer.circleRadius = NSExpression(forConstantValue: 6) circleLayer.circleStrokeWidth = NSExpression(forConstantValue: 2) circleLayer.circleStrokeColor = NSExpression(forConstantValue: UIColor.black) self.addLayer(circleLayer) } func addPolygons(from source: MGLShapeSource) { // Configure a fill style layer to represent polygon regions in Washington, D.C. // Source data that is not of `neighborhood-region` type will be excluded. let polygonLayer = MGLFillStyleLayer(identifier: "DC-regions", source: source) polygonLayer.predicate = NSPredicate(format: "TYPE = 'neighborhood-region'") polygonLayer.fillColor = NSExpression(forConstantValue: UIColor(red: 0.27, green: 0.41, blue: 0.97, alpha: 0.3)) polygonLayer.fillOutlineColor = NSExpression(forConstantValue: UIColor(red: 0.27, green: 0.41, blue: 0.97, alpha: 1.0)) self.addLayer(polygonLayer) } } ``` **Objective C** Title: `ViewController` [View on GitHub](https://github.com/mapbox/ios-sdk-examples/tree/298e050be7352eb28cee6f03e02945593140c1f3/Examples/ObjectiveC/MultipleShapesExample.m) ```swift #import "ViewController.h" @import Mapbox; @interface ViewController () @property (nonatomic) MGLMapView *mapView; @end @interface MGLStyle (LayerExtensions) - (void)addLinesFrom:(MGLShapeSource *)source; - (void)addPointsFrom:(MGLShapeSource *)source; - (void)addPolygonsFrom:(MGLShapeSource *)source; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Configure a map view centered on Washington, D.C. self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle lightStyleURL]]; self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(38.897435, -77.039679) zoomLevel:12 animated:NO]; self.mapView.delegate = self; [self.view addSubview:self.mapView]; } - (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style { // If this data was coming from an external server, we would want to check if NSURL was nil, // and perform proper error handling for a web request/response. NSURL *url = [NSURL fileURLWithPath:[NSBundle.mainBundle pathForResource:@"dc-metro" ofType:@"geojson"]]; // Create a shape source and register it with the map style. MGLShapeSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"dc-data-source" URL:url options:nil]; [style addSource:source]; // Add different line, point, and polygon shapes to the map style. [style addLinesFrom:source]; [style addPointsFrom:source]; [style addPolygonsFrom:source]; } @end @implementation MGLStyle (LayerExtensions) - (void)addLinesFrom:(MGLShapeSource *)source { /** Configure a line style layer to represent a rail line, filtering out all data from the source that is not of `Rail line` type. The `TYPE` is an attribute of the source data that can be seen by inspecting the GeoJSON source file, for example: { "type": "Feature", "properties": { "NAME": "Dupont Circle", "TYPE": "metro-station" }, "geometry": { "type": "Point", "coordinates": [ -77.043416, 38.909605 ] }, "id": "994446c244acadeb15d3f9fc18278c73" } */ MGLLineStyleLayer *lineLayer = [[MGLLineStyleLayer alloc] initWithIdentifier:@"rail-line" source: source]; lineLayer.predicate = [NSPredicate predicateWithFormat:@"TYPE = 'Rail line'"]; lineLayer.lineColor = [NSExpression expressionForConstantValue:[UIColor redColor]]; lineLayer.lineWidth = [NSExpression expressionForConstantValue:@2]; [self addLayer:lineLayer]; } - (void)addPointsFrom:(MGLShapeSource *)source { // Configure a circle style layer to represent rail stations, filtering out all data from // the source that is not of `metro-station` type. MGLCircleStyleLayer *circleLayer = [[MGLCircleStyleLayer alloc] initWithIdentifier:@"stations" source:source]; circleLayer.predicate = [NSPredicate predicateWithFormat:@"TYPE = 'metro-station'"]; circleLayer.circleColor = [NSExpression expressionForConstantValue:[UIColor redColor]]; circleLayer.circleRadius = [NSExpression expressionForConstantValue:@6]; circleLayer.circleStrokeWidth = [NSExpression expressionForConstantValue:@2]; circleLayer.circleStrokeColor = [NSExpression expressionForConstantValue:[UIColor blackColor]]; [self addLayer:circleLayer]; } - (void)addPolygonsFrom:(MGLShapeSource *)source { // Configure a fill style layer to represent polygon regions in Washington, D.C. // Source data that is not of `neighborhood-region` type will be excluded. MGLFillStyleLayer *polygonLayer = [[MGLFillStyleLayer alloc] initWithIdentifier:@"DC-regions" source: source]; polygonLayer.predicate = [NSPredicate predicateWithFormat:@"TYPE = 'neighborhood-region'"]; polygonLayer.fillColor = [NSExpression expressionForConstantValue:[UIColor colorWithRed:0.27f green:0.41f blue:0.97f alpha: 0.3f]]; polygonLayer.fillOutlineColor = [NSExpression expressionForConstantValue:[UIColor colorWithRed:0.27f green:0.41f blue:0.97f alpha:1]]; [self addLayer:polygonLayer]; } @end ```