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

# Draw multiple geometries

![Draw multiple shapes on a map.](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-draw-multiple-geometries.02d24c3.480.png)

This example demonstrates how to display multiple geometries on a map using the **Mapbox Maps SDK for iOS**. The `MultipleGeometriesExample` class sets up a [`MapView`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/map-view/) with a specified center coordinate and zoom level. Next, it loads a string of [`GeoJSON`](https://docs.mapbox.com/help/glossary/geojson/) data, decodes it into a [`FeatureCollection`](https://docs.mapbox.com/ios/maps/api/11.7.0/documentation/turf/featurecollection/), and uses [`addSource`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/stylemanager/addsource(_:dataid:)/) to add a data source to the map.

Next, it uses three different[`addLayer`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/stylemanager/addlayer(_:layerposition:)/) methods to add three different layers to the map. The first layer is a [`CircleLayer`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circlelayer/) that displays a circle at each `Point` feature in the `FeatureCollection`. The second is a [`LineLayer`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/linelayer/) to visualize the `LineString` features. The third layer is a [`FillLayer`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/filllayer/) representing the `Polygon` features.

[`filter` expressions](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/filllayer/) are used to limit the features displayed in each layer based on the geometry type of the feature.

> **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.29.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: `MultipleGeometriesExample.swift`

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

```swift
import UIKit
import MapboxMaps

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

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the center coordinate and zoom level.
        let centerCoordinate = CLLocationCoordinate2D(latitude: 38.93490939383946, longitude: -77.03619251024163)
        let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 11))

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

        // Allow the view controller to receive information about map events.
        mapView.mapboxMap.onMapLoaded.observeNext { [weak self] _ in
            guard let self = self else { return }
            self.addGeoJSONSource()
            self.addPolygonLayer()
            self.addLineStringLayer()
            self.addPointLayer()

            
            
        }.store(in: &cancelables)
    }

    // Load GeoJSON file from local bundle and decode into a `FeatureCollection`.
    private func decodeGeoJSON(from fileName: String) throws -> FeatureCollection? {
        guard let path = Bundle.main.path(forResource: fileName, ofType: "geojson") else {
            preconditionFailure("File '\(fileName)' not found.")
        }

        let filePath = URL(fileURLWithPath: path)

        var featureCollection: FeatureCollection?

        do {
            let data = try Data(contentsOf: filePath)
            featureCollection = try JSONDecoder().decode(FeatureCollection.self, from: data)
        } catch {
            print("Error parsing data: \(error)")
        }

        return featureCollection
    }

    private func addGeoJSONSource() {
        // Attempt to decode GeoJSON from file bundled with application.
        guard let featureCollection = try? decodeGeoJSON(from: "GeoJSONSourceExample") else { return }

        // Create a GeoJSON data source.
        var geoJSONSource = GeoJSONSource(id: Constants.geoJSONDataSourceIdentifier)
        geoJSONSource.data = .featureCollection(featureCollection)
        try! mapView.mapboxMap.addSource(geoJSONSource)
    }

    /// Create and style a FillLayer that uses the Polygon Feature's coordinates in the GeoJSON data
    private func addPolygonLayer() {
        var polygonLayer = FillLayer(id: "fill-layer", source: Constants.geoJSONDataSourceIdentifier)
        polygonLayer.filter = Exp(.eq) {
            "$type"
            "Polygon"
        }
        polygonLayer.fillColor = .constant(StyleColor(red: 68, green: 105, blue: 247, alpha: 1)!)
        polygonLayer.fillOpacity = .constant(0.3)
        try! mapView.mapboxMap.addLayer(polygonLayer)
    }

    private func addLineStringLayer() {
        // Create and style a LineLayer that uses the Line String Feature's coordinates in the GeoJSON data
        var lineLayer = LineLayer(id: "line-layer", source: Constants.geoJSONDataSourceIdentifier)
        lineLayer.filter = Exp(.eq) {
            "$type"
            "LineString"
        }
        lineLayer.lineColor = .constant(StyleColor(.red))
        lineLayer.lineWidth = .constant(2)
        try! mapView.mapboxMap.addLayer(lineLayer)
    }

    private func addPointLayer() {
        // Create a circle layer associated with the GeoJSON data source,
        // filter it so that only the point data is shown,
        // and apply basic styling to it.
        var circleLayer = CircleLayer(id: "circle-layer", source: Constants.geoJSONDataSourceIdentifier)
        circleLayer.filter = Exp(.eq) {
            "$type"
            "Point"
        }
        circleLayer.circleColor = .constant(StyleColor(.red))
        circleLayer.circleRadius = .constant(6.0)
        circleLayer.circleStrokeWidth = .constant(2.0)
        circleLayer.circleStrokeColor = .constant(StyleColor(.black))
        try! mapView.mapboxMap.addLayer(circleLayer)
    }
}

extension ViewController {
    private enum Constants {
        static let geoJSONDataSourceIdentifier = "geoJSON-data-source"
    }
}
```