Como integrar MapKit en SwiftUI

El framework MapKit ofrece a los desarrolladores una gama de API para incorporar funcionalidades relacionadas con mapas en sus aplicaciones. Estas funcionalidades incluyen la visualización de mapas, la navegación por ellos, la adición de anotaciones para ubicaciones específicas y la incorporación de superposiciones en mapas existentes. Con este framework, puedes integrar fácilmente una interfaz de mapas completamente funcional en tu aplicación sin necesidad de un código extenso.

Para SwiftUI, proporciona una vista de mapa nativa que permite a los desarrolladores integrar una interfaz de mapa sin problemas. Además, puedes mostrar anotaciones mediante vistas de anotaciones integradas como MapMarker.

Primero, permítanme presentarles brevemente la vista de mapa en SwiftUI. Consultando la documentación de Map (https://developer.apple.com/documentation/mapkit/map), deberías encontrar el siguiente método init de la estructura:

init(coordinateRegion: Binding, interactionModes: MapInteractionModes = .all, showsUserLocation: Bool = false, userTrackingMode: Binding? = nil) where Content == _DefaultMapContent

Para trabajar con Map, debes proporcionar un enlace de MKCoordinateRegion que registre la región que se mostrará en el mapa. La estructura MKCoordinateRegion permite especificar una región geográfica rectangular centrada en una latitud y una longitud.

Aqui puedes ver un ejemplo:

MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708), span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05))

Las coordenadas del ejemplo anterior corresponden a las coordenadas GPS de Times Square en Nueva York. El valor de span se utiliza para definir el nivel de zoom deseado para el mapa. Cuanto menor sea el valor, mayor será el nivel de zoom.

En general, para incrustar un mapa en SwiftUI, primero debe importar el framework MapKit:

import MapKit

Luego, para crear un mapa, simplemente cree una vista de mapa como esta:

var body: some View {
    Map()
}

Esto crea un mapa a pantalla completa con una ubicación predeterminada. Sin embargo, en lugar de mostrar una ubicación predeterminada, la vista de mapa proporciona un método de inicialización adicional que permite personalizar la posición inicial del mapa:

init(
    initialPosition: MapCameraPosition,
    bounds: MapCameraBounds? = nil,
    interactionModes: MapInteractionModes = .all,
    scope: Namespace.ID? = nil
) where Content == MapContentView<Never, EmptyMapContent>

Puedes crear una instancia de MapCameraPosition como posición inicial del mapa. MapCameraPosition contiene varias propiedades que puedes usar para controlar qué lugar o región se muestra, incluyendo:

automatic
item(MKMapItem): para mostrar un elemento específico del mapa.
region(MKCoordinateRegion): para mostrar una región específica.
rect(MKMapRect): para mostrar los límites específicos del mapa.
camera (MapCamera): para mostrar la posición de una cámara existente.
userLocation(): para mostrar la ubicación del usuario.

Por ejemplo, puedes indicarle al mapa que muestre una región específica usando .region(MKCoordinateRegion):

Map(initialPosition: 
      .region(MKCoordinateRegion(
                center: CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708), 
                span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
      )))

Las coordenadas del ejemplo anterior corresponden a las coordenadas GPS de Times Square en Nueva York. El valor de span se utiliza para definir el nivel de zoom deseado del mapa. Cuanto menor sea el valor, mayor será el nivel de zoom.

Ejemplo usando MapKit

En nuestro ejemplo vamos a ver como integrar MapKit en SwiftUI. Lo primero que tenemos que hacer es importar el framework MapKit con la siguiente línea de código:

import MapKit

En archivo ContentView.swift en Xcode vamos a escribir el siguiente código:

struct ContentView: View {
   
    @State private var region: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.510357, longitude: -0.116773), span: MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0))

    var body: some View {
        Map(initialPosition: .region(region))
    }
}

De forma predeterminada, la variable de estado de la región se establece en las coordenadas de Londres. En la vista previa de Xcode, debería mostrar un mapa de Londres.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram.