Explorando MapKit en SwiftUI

Misael Cuevas

06 diciembre, 20235min de lectura

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()
  }
}

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))

2. 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))

3. 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))

4. 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))

Imagery

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

Ejemplo de un mapa con imágenes satelitales:

Map()
  .mapStyle(.imagery)

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)

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()
}

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.

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)

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)

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.

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