Integración de Mapas en iOS con Coordenadas de Usuario

Clase 41 de 52Curso de Desarrollo de Apps para iOS

Contenido del curso

Tu primera app en iOS

Proyecto: PlatziTweets

Resumen

Adjuntar coordenadas a cada publicación y visualizarlas en un mapa nativo es una de las funcionalidades más atractivas que puedes integrar en una app de iOS. Aquí se explica paso a paso cómo tomar la latitud y longitud del usuario, enviarlas junto con el post y configurar MapKit para renderizar el mapa dentro de la aplicación.

¿Cómo adjuntar las coordenadas del usuario al post?

Antes de enviar la ubicación, es necesario validar el contenido que el usuario quiere publicar. En el método addPostAction del AddPostViewController se agregan tres validaciones [01:12]:

  • Si currentVideoURL es diferente de nil, se sube el video a Firebase.
  • Si la vista preview contiene una imagen, se llama a uploadPhotoToFirebase.
  • Si ninguna de las dos condiciones se cumple, se guarda el post sin imagen ni video mediante savePost.

Esta separación garantiza un comportamiento más natural, evitando que la app intente subir archivos que no existen.

¿Qué es PostRequestLocation y cómo se construye?

Dentro del método savePost, el último parámetro que faltaba por completar era location. Para resolverlo se crea una instancia de PostRequestLocation [02:30], un modelo definido en clases anteriores dentro del API de PlatziTweets que recibe dos valores: latitud y longitud.

swift var postLocation: PostRequestLocation?

if let userLocation = userLocation { postLocation = PostRequestLocation( latitude: userLocation.coordinate.latitude, longitude: userLocation.coordinate.longitude ) }

Se declara postLocation como opcional porque el usuario podría no haber concedido permisos de ubicación. Si la variable userLocation existe, se construye el objeto con las coordenadas; de lo contrario, permanece como nil. Finalmente, postLocation se pasa como argumento al request del post [03:38].

¿Cómo verificar que la ubicación se envía correctamente?

Al compilar y ejecutar en el simulador, se inicia sesión y se crea un post de prueba. Colocando un breakpoint justo antes del envío, se puede inspeccionar que postLocation contiene la latitud y longitud exactas del simulador [04:30]. Eso confirma que el post ya viaja con la ubicación adjunta.

¿Cómo crear la pantalla del mapa con MapKit?

Con la ubicación ya viajando en cada post, el siguiente paso es construir una pantalla donde se visualicen esas coordenadas sobre un mapa.

En el storyboard de Home se agrega un nuevo ViewController y un bar button item en la barra de navegación con el título "Ver Mapa" [05:20]. Este botón conecta mediante un segue de tipo Show hacia la nueva pantalla.

Dentro de esa pantalla se coloca una vista en blanco con constraints a los cuatro lados para que sea adaptativa a cualquier tamaño de pantalla. Esta vista funcionará como contenedor del mapa.

¿Cómo configurar el MapViewController?

Se crea un archivo MapViewController.swift y se asigna en el storyboard como controlador de la nueva pantalla [06:10]. Luego se definen las propiedades principales:

swift import MapKit

class MapViewController: UIViewController { @IBOutlet weak var mapContainer: UIView!

var posts: [Post] = [] var map: MKMapView?

}

  • mapContainer: referencia a la vista en blanco del storyboard.
  • posts: arreglo donde llegarán las publicaciones con sus coordenadas.
  • MKMapView: la clase nativa de MapKit que representa el mapa de Apple [07:05].

¿Cómo instanciar y mostrar el mapa dentro del contenedor?

En viewDidLoad se invoca un método privado llamado setupMap [07:25]:

swift private func setupMap() { map = MKMapView(frame: mapContainer.bounds) mapContainer.addSubview(map ?? UIView()) }

El frame del mapa toma las dimensiones del contenedor a través de bounds, asegurando que ocupe todo el espacio disponible. Como map es opcional, se proporciona un UIView() vacío como valor por defecto al agregarlo como subview; esto evita force unwraps y mantiene el código limpio [08:00].

Al ejecutar la app, el mapa de Apple se muestra correctamente. Usando la tecla Option en el simulador se puede hacer pinch para acercar o alejar el zoom [08:45].

¿Por qué preferir elementos nativos de iOS?

MapKit forma parte del SDK de Apple, lo que significa mejor rendimiento y compatibilidad garantizada con cada versión del sistema operativo. Aunque existen alternativas como Google Maps, usar los componentes nativos simplifica la integración y reduce dependencias externas [09:15].

El siguiente paso será colocar marcadores sobre el mapa usando la latitud y longitud de cada post. Si ya llegaste hasta aquí, comparte qué otras funcionalidades te gustaría agregar al mapa.