Explorando lugares con LookAroundPreview

Misael Cuevas

13 marzo, 20243min de lectura

LookAroundPreview es una vista de SwiftUI que muestra una imagen real o vista de calle de un lugar geográfico. Es increíblemente fácil de usar, ya que solo necesitas especificar un MKLookAroundScene, que básicamente es una escena que contiene la información necesaria para mostrar imágenes realistas de un lugar. Por ejemplo:

import SwiftUI
// 1
import MapKit

struct ContentView: View {
  // 2
  @State private var lookAroundScene: MKLookAroundScene?

  var body: some View {
    // 3
    LookAroundPreview(initialScene: lookAroundScene)
  }
}

1. Se importa el framework de MapKit.
2. Se crea una variable de estado lookAroundScene necesaria para la vista LookAroundPreview.
3. Se define la vista LookAroundPreview, especificando que la escena inicial a mostrar es lookAroundScene.

Cuando ejecutas el código, es posible que no veas ninguna imagen porque lookAroundScene es nil:

Para obtener una escena, necesitas las coordenadas del lugar que deseas mostrar y solicitar la escena utilizando MKLookAroundSceneRequest. Para lograr esto, agrega la siguiente función dentro de ContentView:

func requestLookAroundScene() async {
  // 1
  let location = CLLocationCoordinate2D(latitude: 40.419328, longitude: -3.693096)
  // 2
  let request = MKLookAroundSceneRequest(coordinate: location)
  // 3
  lookAroundScene = try? await request.scene
}

1. Se define las coordenadas del lugar a mostrar.
2. Se define la solicitud de la escena a solicitar.
3. Se solicita la escena y se le asigna a a la variable lookAroundScene.

Una vez hecho esto, modifica el contenido del body de ContentView de la siguiente manera:

LookAroundPreview(initialScene: lookAroundScene)
  .task {
    await requestLookAroundScene()
  }

Se añade el modificador task para solicitar y asignar la escena cuando la vista aparezca. Al ejecutar el código, verás la imagen del lugar:

Como se muestra en el GIF, al presionar en la imagen o el icono de "Look Around" ubicado en la parte superior derecha se abre una vista donde podrás interactuar con la escena, como desplazarte, ver los nombres de los puntos de interés, manipular la brújula, entre otros.

LookAroundPreview, además del parámetro initialScene, posee los siguientes parámetros que te permiten personalizar la vista según tus preferencias:

• allowsNavigation: un booleano que indica si se permite la navegación.
• showsRoadLabels: un booleano que indica si se muestran los nombres de las calles o caminos.
• pointsOfInterest: define los puntos de interés a mostrar.
• badgePosition: indica la posición del icono "Look Around".

Por último, puedes utilizar el modificador .lookAroundViewer en una vista para mostrar la escena de un lugar en casos donde quieras mostrar el visualizador directamente luego de una acción:

import SwiftUI
// 1
import MapKit

struct ContentView2: View {
  // 2
  @State private var lookAroundScene: MKLookAroundScene?
  // 3
  @State private var isLookingAround: Bool = false

  var body: some View {
    // 4
    Button("Press me") {
      isLookingAround = true
    }
    // 5
    .lookAroundViewer(isPresented: $isLookingAround, initialScene: lookAroundScene)
    .task {
      await requestLookAroundScene()
    }
  }

  func requestLookAroundScene() async {
    let location = CLLocationCoordinate2D(latitude: 40.419328, longitude: -3.693096)
    let request = MKLookAroundSceneRequest(coordinate: location)
    lookAroundScene = try? await request.scene
  }
}

1. Se importa el framework de MapKit.
2. Se crea una variable de estado lookAroundScene necesaria para el modificador lookAroundViewer.
3. Se define la variable de estado isLookingAround para indicar cuando se muestra la escena.
4. Un botón que al ser presionado modifica el valor de isLookingAround a true.
5. Se agrega el modificador lookAroundViewer al botón, especificando que isLookingAround determina cuándo se presentará y lookAroundScene como escena inicial.

El modificador lookAroundViewer también acepta los mismos parámetros de personalización que la vista LookAroundPreview mencionados anteriormente.