Overlays con MapKit y SwiftUI

Misael Cuevas

10 enero, 20244min de lectura

Además de agregar contenido con marcadores, MapKit ofrece la posibilidad de agregar overlays a un mapa. Estos overlays son MapCircle, MapPolygon y MapPolyline, los cuales puedes utilizar para resaltar contenidos en el mapa, como límites de zonas, rutas de transporte o puntos de interés.

Para demostrar las capacidades de los overlays, utiliza las siguientes variables que indican coordenadas en un mapa:

let location1 = CLLocationCoordinate2D(latitude: 40.413652, longitude: -3.681793)
let location2 = CLLocationCoordinate2D(latitude: 40.414951, longitude: -3.681856)
let location3 = CLLocationCoordinate2D(latitude: 40.416257, longitude: -3.680661)

let location4 = [
  CLLocationCoordinate2D(latitude: 40.418197, longitude: -3.685186),
  CLLocationCoordinate2D(latitude: 40.418528, longitude: -3.683695),
  CLLocationCoordinate2D(latitude: 40.416122, longitude: -3.682697),
  CLLocationCoordinate2D(latitude: 40.415787, longitude: -3.684226),
]

MapCircle

Agrega un círculo en el mapa en la coordenada y el radio que le especifiques. Además, puedes aplicar los siguientes modificadores:

• foregroundStyle: Especifica el estilo a utilizar en el contenido del círculo.
• mapOverlayLevel: Especifica la posición del círculo con respecto al contenido del mapa. Los valores aceptados son aboveRoads para posicionarse encima del camino pero por debajo de las etiquetas, y aboveLabels para posicionarse encima del camino y las etiquetas.

Ejemplo:

Map {
  // 1
  MapCircle(center: location1, radius: CLLocationDistance(50))
    .foregroundStyle(.red.opacity(0.6))
    .mapOverlayLevel(level: .aboveRoads)

  // 2
  MapCircle(center: location2, radius: CLLocationDistance(50))
    .foregroundStyle(.mint.opacity(0.6))
    .mapOverlayLevel(level: .aboveLabels)
}

1. Un círculo con un radio de 50 de color rojo superpuesto al camino del mapa pero por debajo de las etiquetas.
2. Un círculo con un radio de 50 de color menta superpuesto al camino y las etiquetas del mapa.

MapPolygon

Crea un polígono en el mapa en las coordenadas que especifiques. Al igual que en MapCircle, puedes utilizar los modificadores foregroundStyle y mapOverlayLevel para darle un toque especial a tu MapPolygon.

Ejemplo:

Map {
  // 1
  MapPolygon(coordinates: location4)
    .foregroundStyle(.purple.opacity(0.6))
    .mapOverlayLevel(level: .aboveRoads)
}

1. Un polígono de color púrpura superpuesto al camino del mapa pero por debajo de las etiquetas.

MapPolyline

Crea una secuencia de líneas conectadas entre sí.

Ejemplo:

Map {
  // 1
  MapPolyline(coordinates: [location1, location3])
    .stroke(.brown, lineWidth: 5)
}

1. Crea una polilínea de color marrón y 5 de ancho gracias al modificador stroke entre las coordenadas location1 y location3.

Donde MapPolyline destaca es cuando se combina con MKDirections para crear rutas desde un punto de partida hasta uno de destino. MKDirections permite obtener a través de los servidores de Apple direcciones y el tiempo estimado de viaje entre dos ubicaciones.

Por ejemplo, en tu vista de SwiftUI, agrega la siguiente variable:

@State private var route: MKRoute?

route definirá la ruta desde location1 hasta location3.

Agrega la siguiente función:

func calculateDirections() async {
  // 1
  let request = MKDirections.Request()
  request.source = MKMapItem(placemark: MKPlacemark(coordinate: location1))
  request.destination = MKMapItem(placemark: MKPlacemark(coordinate: location3))
  request.transportType = .walking

  // 2
  let response = try? await MKDirections(request: request).calculate()
  route = response?.routes.first
}

1. Se crea una variable request de tipo MKDirections.Request para solicitar las rutas desde el punto de partida location1 hasta el punto de destino location3 caminando como medio de transporte.
2. Se procede a calcular las posibles rutas de las direcciones especificadas en request y asignar la primera a la variable route.

Una vez hecho todo lo anterior, en tu vista de SwiftUI agrega:

Map {
  // 1
  if let route {
    // 2
    MapPolyline(route)
      .stroke(.brown, lineWidth: 5)
  }
}
.task {
  // 3
  await calculateDirections()
}

1. Valida que route no sea nil antes de crear el MapPolyline.
2. Crea una polilínea de color marrón y 5 de ancho gracias al modificador stroke con la ruta contenida en route.
3. Llama a la función calculateDirections().