MapKit + SwiftUI (Parte 3 de 4)1

Explorando MapKit en SwiftUI

2

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

3

Overlays con MapKit y SwiftUI

4

Cómo interactuar con MapFeature en SwiftUI

Overlays con MapKit y SwiftUI

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.
Ejemplo de un mapa con dos MapCircle

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.
Ejemplo de un mapa con un MapPolygon

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.
Ejemplo de un mapa con un MapPolyline

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().
Ejemplo de un mapa con un MapPolyline basado en una ruta establecida
MapKit + SwiftUI (Parte 3 de 4)1

Explorando MapKit en SwiftUI

2

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

3

Overlays con MapKit y SwiftUI

4

Cómo interactuar con MapFeature en SwiftUI

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn