MapKit + SwiftUI (Parte 1 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

Explorando MapKit en SwiftUI

MapKit es un framework que permite mostrar mapas en las plataformas de Apple utilizando SwiftUI. Puedes utilizar MapKit para:

  • Crear marcadores de interés en el mapa y agregar información más detallada al presionar un marcador en específico.
  • Agregar overlays para indicar rutas.
  • Mostrar áreas en el mapa en vista satélite o de manera más realista.
  • Indicar la ubicación de un usuario en el mapa.

En este artículo aprenderás cómo integrar mapas en tus aplicaciones SwiftUI y explorar las diversas configuraciones que ofrece este framework.

Agregar un mapa

Para incorporar un mapa en tu vista SwiftUI, debes importar MapKit y utilizar la vista Map() en tu vista principal. Por ejemplo:

import SwiftUI
import MapKit
struct ContentView: View {
var body: some View {
Map()
}
}
Ejemplo de la vista Map en SwiftUI

Configurar estilo

MapKit ofrece el modificador mapStyle(_:) para personalizar la apariencia de un mapa, con estilos como standard, imagery y hybrid.

Standard

Este es el estilo predeterminado de Map() y el que ya viste en el ejemplo anterior. Puedes especificarlo de manera explícita así:

Map()
.mapStyle(.standard)

Los parámetros que puedes establecer en este estilo son:

  1. elevation: Especifica un valor entre automatic, flat o realistic. Los valores automatic (valor por defecto) y flat renderizan el mapa en 2D, mientras que realistic lo renderiza en 3D.

Ejemplo de un mapa con estilo estándar y elevación realista:

Map()
.mapStyle(.standard(elevation: .realistic))
Ejemplo de un mapa con estilo estándar y elevación realista
  1. emphasis: Define la importancia de las imágenes que se muestran en el mapa especificando un valor entre automatic (valor por defecto) y muted para reducir la importancia.

Ejemplo de un mapa con estilo estándar y énfasis silenciado:

Map()
.mapStyle(.standard(emphasis: .muted))
Ejemplo de un mapa con estilo estándar y énfasis silenciado
  1. pointsOfInterest: Define un arreglo de puntos de interés a mostrar en el mapa. Puedes elegir entre all (valor por defecto) para mostrar todos, excludingAll para excluir todos, o including/excluding para incluir/excluir algunos pertenecientes a una categoría específica.

Ejemplo de un mapa con estilo estándar y todos los puntos de interés excluidos:

Map()
.mapStyle(.standard(pointsOfInterest: .excludingAll))
Ejemplo de un mapa con estilo estándar y todos los puntos de interés excluidos
  1. showsTraffic: Especifica un valor booleano para indicar si el mapa mostrará el tráfico o no. Por defecto, su valor es false.

Ejemplo de un mapa con estilo estándar y rutas con tráfico:

Map()
.mapStyle(.standard(showsTraffic: true))
Ejemplo de un mapa con estilo estándar y rutas con tráfico

Imagery

Aplica un estilo más realista al mapa utilizando imágenes satelitales.

Ejemplo de un mapa con imágenes satelitales:

Map()
.mapStyle(.imagery)
Ejemplo de un mapa con imágenes satelitales

Al igual que el estilo standard, puedes configurar la elevación con el parámetro elevation.

Hybrid

Aplica un estilo híbrido al mapa combinando imágenes satelitales del estilo imagery con las características del estilo standard.

Ejemplo de un mapa híbrido:

Map()
.mapStyle(.hybrid)
Ejemplo de un mapa con estilo hibrido

Al igual que el estilo standard, puedes configurar la elevación, puntos de interés y si deseas mostrar el tráfico con los parámetros elevation, pointsOfInterest y showsTraffic, respectivamente.

Agregar marcadores

Los marcadores son una manera sencilla de mostrar contenido en un punto específico de un mapa, para esto cuentas con las vistas UserAnnotation, Marker y Annotation.

UserAnnotation

Es un marcador que se utiliza para mostrar la ubicación del usuario en el mapa. Se utiliza de la siguiente manera:

Map {
UserAnnotation()
}
Ejemplo de un mapa con un marcador de usuario

Es necesario otorgar permisos de localización al usuario en la app; de lo contrario, no se indicará el marcador.

Marker

Se muestra en forma de globo rojo y un símbolo. Esta vista se agrega dentro de la vista Map, donde se especifica un título y una coordenada utilizando la estructura CLLocationCoordinate2D, como se muestra a continuación:

import SwiftUI
import MapKit
struct ContentView: View {
// 1
let coordinate = CLLocationCoordinate2D(latitude: 40.4152647, longitude: -3.6870744)
var body: some View {
Map {
// 2
Marker("My Marker", coordinate: coordinate)
}
}
}
  1. Se definen la latitud y longitud donde se va a mostrar el Marker.
  2. Se agrega la vista Marker dentro de Map con el título y coordenada.
Ejemplo de la vista Map con un Marker

Para cambiar el símbolo dentro del globo, utiliza el parámetro systemImage para imágenes del sistema o image para una personalizada:

Marker("My Marker", systemImage: "building.columns", coordinate: coordinate)
Marker con un símbolo personalizado

Además, puedes cambiar el color del globo con el modificador tint(_:) y definir la visualización del título con el modificador annotationTitles(_:):

Marker("My Marker", systemImage: "building.columns", coordinate: coordinate)
.tint(.purple)
.annotationTitles(.hidden)
Marker con un símbolo personalizado, color púrpura y título oculto

Annotation

En lugar de mostrar un globo como Marker, muestra una vista personalizada. Por ejemplo:

import SwiftUI
import MapKit
struct ContentView: View {
// 1
let coordinate = CLLocationCoordinate2D(latitude: 40.4152647, longitude: -3.6870744)
var body: some View {
Map {
// 2
Annotation("My annotation", coordinate: coordinate) {
// 3
Text("👀")
.padding(4)
.background(.yellow)
}
}
}
}
  1. Se define la latitud y longitud donde se va a mostrar la Annotation.
  2. Se agrega la vista Annotation dentro de Map con el título, coordenada y vista personalizada.
  3. Un Text con un emoji en fondo de color amarrillo.
Ejemplo de la vista Map con un Annotation

Al igual que con Marker, con Annotation puedes utilizar los modificadores tint(_:) y annotationTitles(_:).

MapKit + SwiftUI (Parte 1 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