### Select your user interface

There are two ways to display a map. The easiest way to get started is to use the `AmplifyMaplibreUI` library to create an instance of `AMLMapView`. This is the recommended approach for new projects or anyone who wants to use SwiftUI.

Alternatively, if you are using UIKit or have existing code using the MapLibre/MapBox SDK, you can simply call `AmplifyMapLibre.createMap(completionHandler:)` to create an instance of `MGLMapView` that is pre-wired for use with Amazon Location Service and Amplify. For more information on using `MGLMapView` directly, please see the [MapLibre Documentation](https://docs.maptiler.com/maplibre-gl-native-ios/)

<BlockSwitcher>
<Block name="SwiftUI">

```swift
import SwiftUI
import AmplifyMapLibreUI

struct ContentView: View {    
    var body: some View {
        AMLMapView()
            .edgesIgnoringSafeArea(.all)
    }
}
```

</Block>

<Block name="UIKit">

<BlockSwitcher>
<Block name="Stable Release">

```swift
import AmplifyMapLibreAdapter
import Mapbox
import Amplify

var mapView: MGLMapView?

AmplifyMapLibre.createMap { result in
    switch result {
    case .failure(let error):
        print(error)
    case .success(let map):
        mapView = map
    }
}
```

</Block>

<Block name="Developer Preview">

```swift
import AmplifyMapLibreAdapter
import Mapbox
import Amplify

var mapView: MGLMapView?
do {
    mapView = try await AmplifyMapLibre.createMap()
} catch {
    print(error)
}
```
</Block>
</BlockSwitcher>

</Block>
</BlockSwitcher>

## Customize the map and access state

The `AMLMapView` can be customized through a number of view modifiers. The map state information can be set and observed through an instance of `AMLMapViewState`, which can optionally be passed into `AMLMapView` to set initial values. The following example sets an initial zoom level and center location for the map and configures the map to show the user's location.

```swift
@StateObject private var mapState = AMLMapViewState(
    zoomLevel: 8,
    center: CLLocationCoordinate2D(latitude: 39.7392, longitude: -104.9903)
)

var body: some View {
    AMLMapView(mapState: mapState)
        .showUserLocation(true)
        .edgesIgnoringSafeArea(.all)
}
```

## Inject custom behavior

The `AMLMapView` also allows for custom behavior triggered by user interaction to be injected. The following example sets a custom feature image and defines the maps behavior when that feature is tapped - zooming in two levels above the current level.

```swift
var body: some View {
    AMLMapView()
        .featureImage { MyCustomImage() }
        .featureTapped { mapView, pointFeature in
            mapView.setCenter(
                pointFeature.coordinate,
                zoomLevel: mapView.zoomLevel + 2,
                direction: mapView.camera.heading,
                animated: true
            )
        }
        .edgesIgnoringSafeArea(.all)
}
```

## AMLMapCompositeView

The `AMLMapCompositeView` combines `AMLMapView`, `AMLSearchBar`, `AMLMapControlView`, and `AMLPlaceCellView` to create a full user experience. This includes accessible map control buttons, a search bar that automatically searches for points of interest based on user input, and a list representation of points.
In its simplest form, which still leverages all of the above mentioned functionality, the `AMLMapCompositeView` can be instantiated without any arguments. All of the view modifiers and state tracking capabilities of `AMLMapView` are also available on `AMLMapCompositeView`.

```swift
var body: some View {
    AMLMapCompositeView()
}
```
<Callout>

For full details on `AMLMapView` usage and customization, see the [AmplifyMapLibre documentation](https://aws-amplify.github.io/amplify-ios-maplibre/docs/).

</Callout>