Mostrar datos de un lugar con Place Card

Misael Cuevas

20 noviembre, 20246min de lectura

Place Card es un conjunto de vistas que provee MapKit para mostrar al usuario información de un lugar sin que tengas que crear tu propia interfaz personalizada. Algunos de los datos que se pueden mostrar incluyen horarios, teléfono, sitio web, entre otros.

Para usar Place Card en SwiftUI, debes aplicar los modificadores de vista (view modifiers) que se describen a continuación.

Código de demostración

Comienza con el siguiente ejemplo de código para mostrar la información de un lugar:

import SwiftUI
import MapKit

struct MyMapView: View {
    @State private var mapItem: MKMapItem?
    @State private var selectedMapItem: MKMapItem?

    var body: some View {
        Map(selection: $selectedMapItem) {
            if let mapItem {
                Marker(item: mapItem)
                    .tag(mapItem)
            }
        }
        .task {
            try? await requestMapItem(identifier: "IBA929D56735A3139")
        }
    }

    private func requestMapItem(identifier: String) async throws {
        guard let identifier = MKMapItem.Identifier(rawValue: identifier) else {
            return
        }

        let request = MKMapItemRequest(mapItemIdentifier: identifier)
        mapItem = try? await request.mapItem
    }
}

Este código crea una vista que muestra un mapa con un marcador obtenido asíncronamente a partir de un Place ID específico. La vista es interactiva, permitiendo la selección del marcador y manejando el estado internamente para gestionar tanto el marcador seleccionado como el solicitado.

Cómo mostrar Place Card en un mapa

Para mostrar la información del lugar en una vista, usa el modificador mapItemDetailSelectionAccessory en el marcador. Añádelo debajo del modificador tag de esta manera:

.mapItemDetailSelectionAccessory()

Como puedes ver, al presionar el marcador en el mapa, se muestra un sheet con los datos del lugar. Además, puedes realizar acciones como llamar, visitar el sitio web, abrir Apple Maps o ver la ruta para llegar al lugar.

Estilos de Place Card

mapItemDetailSelectionAccessory ofrece varios estilos que puedes aplicar según tu preferencia:

Sheet

Muestra los datos del lugar en un sheet. Este es el estilo mostrado en la imagen anterior. Puedes especificarlo así:

.mapItemDetailSelectionAccessory(.sheet)

Caption

Muestra un botón que, al presionarlo, abre Apple Maps con el lugar seleccionado:

.mapItemDetailSelectionAccessory(.caption)

Callout

Muestra un popover con la información del lugar. Este estilo tiene tres subestilos:

• compact: Visualiza un callout compacto.

.mapItemDetailSelectionAccessory(.callout(.compact))

• full: Muestra un popover más grande con más información.

.mapItemDetailSelectionAccessory(.callout(.full))

• automatic: Esta es la opción predeterminada, dejando que el framework determine el estilo de callout más apropiado. Puedes usarlo de forma implicita .mapItemDetailSelectionAccessory(.callout) ó explicita .mapItemDetailSelectionAccessory(.callout(.automatic)).

Automatic

Delega al framework la selección del mejor estilo basado en el espacio disponible. Usa este estilo de forma implicita .mapItemDetailSelectionAccessory() ó explicita .mapItemDetailSelectionAccessory(.automatic).

Mostrar Place Card en un MapFeature

Además de mostrar la información de un lugar, puedes mostrar información de un MapFeature utilizando el modificador mapFeatureSelectionAccessory. Añade este modificador al Map. Modifica el código de ejemplo así:

• Cambia la declaración de la propiedad selectedMapItem:

@State private var selectedMapItem: MapSelection<MKMapItem>?

Esto permite la selección de marcadores y features en el mapa.

• Añade el modificador encima de task:

.mapFeatureSelectionAccessory()

Tu vista de SwiftUI debe verse así:

import SwiftUI
import MapKit

struct MyMapView: View {
    @State private var mapItem: MKMapItem?
    @State private var selectedMapItem: MapSelection<MKMapItem>?

    var body: some View {
        Map(selection: $selectedMapItem) {
            if let mapItem {
                Marker(item: mapItem)
                    .tag(mapItem)
                    .mapItemDetailSelectionAccessory()
            }
        }
        .mapFeatureSelectionAccessory()
        .task {
            try? await requestMapItem(identifier: "IBA929D56735A3139")
        }
    }

    private func requestMapItem(identifier: String) async throws {
        ...
    }
}

Al igual que con mapItemDetailSelectionAccessory, puedes aplicar los mismos estilos a mapFeatureSelectionAccessory. Ejemplo:

.mapItemDetailSelectionAccessory(.caption)

Dependiendo del lugar o feature seleccionado, la información mostrada puede variar. Por ejemplo, si muestras un place card de una Apple Store, se mostrará una foto del lugar, pero otros lugares podrían no tener foto debido a que Apple aún no tiene esa información.

Mostrar un Placer Card en cualquier vista

Puedes usar los modificadores mapItemDetailSheet y mapItemDetailPopover para mostrar la información de un lugar en una sheet o popover. A continuación, se muestra un ejemplo:

import SwiftUI
import MapKit

struct MyPlacesView: View {
    @State private var mapItem: MKMapItem?

    var body: some View {
        Button("Display Place Card") {
            mapItem = createMapItem(
                name: "Prado Museum",
                latitude: 40.4139,
                longitude: -3.6923
            )
        }
    }

    private func createMapItem(name: String, latitude: Double, longitude: Double) -> MKMapItem {
        let coordinate = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
        let placemark = MKPlacemark(coordinate: coordinate)
        let mapItem = MKMapItem(placemark: placemark)
        mapItem.name = name

        return mapItem
    }
}

Este código crea una vista en la que un botón genera un MKMapItem al presionarse, utilizando la función createMapItem para definir su nombre y coordenadas geográficas.

Sheet

Para mostrar un sheet con la información del lugar al presionar el botón, añade el siguiente modificador al Button del ejemplo:

.mapItemDetailSheet(item: $mapItem)

Este sheet incluye un pequeño mapa con un marcador en el lugar seleccionado. Al presionar el mapa, se abre Apple Maps con el lugar indicado.

mapItemDetailSheet tiene otros parámetros que puedes utilizar a tu favor:

• isPresented: Es un binding de tipo boolean para determinar cuando el sheet se está visualizando o no.
• displaysMap: Es un boolean para indicar si deseas mostrar el mapa en el sheet o no. Su valor por defecto es true.

Popover

Para mostrar un popover, elimina el modificador mapItemDetailSheet y añade:

.mapItemDetailPopover(item: $mapItem)

mapItemDetailPopover tiene los parámetros de mapItemDetailSheet más los siguientes:

• attachmentAnchor: Define el ancla de fijación de un popover.
• arrowEdge: Define hacia que lado se debe mostrar la flecha del popover.

Compatibilidad

• iOS 18.0+
• iPadOS 18.0+
• Mac Catalyst 18.0+
• macOS 15.0+
• visionOS 2.0+