Creación de mapas en iOS con MKMapkit

Logotipo de iOS

En un ejercicio anterior mostramos el uso de Core Location para darnos la ubicación del usuario, teniendo como resultado solamente números, los cuales debemos asumir que son coordenadas. Para tener un mejor resultado, valdría la pena que esta información se mostrara en un mapa. Y bien, para llegar a ello primero debemos conocer el uso de mapas en iOS.

MapKit vs Google Maps

Si no conocemos mucho de la historia de iOS o de plano no estamos muy metidos en su funcionamiento, podríamos pensar que como fuente para los mapas utilizaríamos los servicios de Google. Si bien, esto todavía posible, ya no es la opción predeterminada. Google Maps fue la primera opción en las primeras versiones de iOS, pero fue cuando salió la versión 5 que Apple mostró su propio framework, llamado MapKit.

Ahora bien, puede ser que recuerdes un poco de esa época, por ahí del 2012, y te vengan a la mente las historias de terror de esos mapas, los cuales no se mostraban completos. O peor aún, daban información errónea. Había noticias o quizá leyendas urbanas de que siguiendo esos mapas desde el centro de la ciudad podía llevarte a bosques escondidos donde se perdía la vida. Pero bueno, de esa época a la fecha, finales del 2017, MapKit ha mejorado bastante y es muy confiable. Y comparándolo con Google podríamos decir que es diferente. Todavía no se cuenta con elementos tipo Street View pero en cuanto a obtener direcciones, tráfico y otros elementos comunes, son muy semejantes. Y es debido a que la integración con MapKit es más sencilla y se vincula más fácilmente con lo que ya conocemos de Swift que en este ejemplo será lo que utilizaremos.




Creación del Proyecto

En Xcode realiza un nuevo proyecto de tipo Single View y da click al botón de continuar. En la siguiente pantalla escribe “Mapa” como nombre del proyecto. Revisa que el lenguaje sea Swif. Guarda el proyecto en donde gustes.

Colocar un MapKitView

Una vez creado el proyecto, ve al archivo Main.storyboard. Para utilizar un mapa necesitamos añadir un elemento, tal como si fuera una imagen o un webView. Desde el Object Library busca al elemento llamado Map Kit View y arrástralo al View Controller. Para este ejercicio no importa el tamaño del mapa, así que puedes ponerlo a tu gusto.

Objeto de Map Kit View en la biblioteca de objetos
Objeto de Map Kit View en la biblioteca de objetos

Apretando la tecla Ctrl y el editor asistente, haz una conexión de outlet del mapa hacia el archivo ViewController. Simplemente se llamará “mapa”.

Conexión de outlet para el mapa
Conexión de outlet para el mapa

En este caso va a marcar el siguiente error.

Error de MapKit
Error de MapKit

Lo que sucede es que para utilizar MapKit se debe instalar el framework . Desde el navegador del proyecto selecciona el primer documento, el que se llama Mapa. Una vez ahí, selecciona la opción de Build Phases y después Link Binary With Libraries. Dale click al botón “+” para que aparezcan todas las bibliotecas que se pueden instalar. En el campo de búsqueda escribe mapkit y dale click al botón de agregar.

Seleccionando el framework MapKit
Seleccionando el framework MapKit

Aún con esta parte el error seguirá apareciendo. Lo único que falta para eliminarlo es importar el framework en el archivo ViewController.swift. Junto a donde está importado UIKIt, escribe:

import MapKit

Con esto, el archivo ya no debe marcar errores.




Definir el tipo de mapa.

Al igual que otros frameworks de mapas, MapKit permite mostrar la información de diferentes formas, que aunque en la mayoría de los casos el nombre describe lo que hace, vamos a describirlas.

standard.- Es la opción más común, donde se ve el contenido como un mapa.

satellite.- La información es una imagen tomada desde un satélite y todo se ve real.

hybrid.= Es la mezcla de ambas.

También están las opciones flyover (hybridFlyOver y satelliteFlyOver), las cuales muestran la información a 3/4 en lugar de arriba y colocarán modelos en 3D. En estos casos debemos tomar en cuenta que no están disponibles en todos lados, solamente en algunas ciudades.

Para este ejemplo, vamos a utilizar el híbrido. Dentro de la función de viewDidLoad escribe lo siguiente:

mapa.mapType = MKMapType.hybrid

Establecer la región del mapa.

Para establecer lo que se va a mostrar del mapa debemos saber dos cosas: qué región del mundo queremos mostrar y a qué tamaño lo vamos a mostrar. Para lo primero se necesita un objeto de la clase CLLocationCoordinate2D. En este ejemplo lo que vamos a mostrar es el Ángel de la Independencia en la Ciudad de México. Debajo de donde declaramos el tipo de mata, escribe el siguiente código:

let coordenada = CLLocationCoordinate2D(latitude: 19.4270206, longitude: -99.1686937)

Anque no es la única forma de construir el objeto de LocationCoordinate2D, en este caso le pasamos desde el principio la latitud y longitud que queremos usar.

Ahora, para definir que tan cercano o lejano es el mapa, se utiliza la clase MKCoordinateSpan. Debajo del código anterior, escribe:

let span = MKCoordinateSpan(latitudeDelta: 0.005255, longitudeDelta: 0.008808)

Ambos elementos se utilizan para definir la llamada región.

let nuevaRegion = MKCoordinateRegion(center: coordenada, span: span)

Ya teniendo esto, se puede vincular con el mapa, pero antes vamos a definir una anotación. Es la marca dentro del mapa que indica un lugar. Se pueden aplicar los que gustes pero en este caso será uno solo. El código va debajo de lo que ya llevamos dentro de viewDidLoad.

let anotacion = MKPointAnnotation()

anotacion.coordinate = coordenada

anotacion.title = "Ángel de la Independencia"

Lo primero que hacemos es declarar al objeto. En la segunda línea le asignamos la ubicación, que en este caso es la misma que el centro del mapa. Y finalmente definimos un texto.

Ya teniendo esto, lo que falta es vincular los dos elementos, la región y la anotación al mapa.

mapa.addAnnotation(anotacion)

mapa.region = nuevaRegion

Prueba la aplicación. Debe aparecer más o menos así.

Muestra final del ejercicio de Mapkit, en donde se muestra el mapa funcionando.
Muestra final del ejercicio de Mapkit, en donde se muestra el mapa funcionando.

Muy bien, ya tenemos el mapa y también ya vimos la geolocalización. En el siguiente tutorial de esta serie uniremos ambas partes para que el mapa muestre nuestra ubicación.




Código Completo

 

import UIKit

import MapKit

class ViewController: UIViewController {

    @IBOutlet weak var mapa: MKMapView!

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        mapa.mapType = MKMapType.hybrid

        

        let coordenada = CLLocationCoordinate2D(latitude: 19.4270206, longitude: -99.1686937)

        let span = MKCoordinateSpan(latitudeDelta: 0.005255, longitudeDelta: 0.008808)

        

        let nuevaRegion = MKCoordinateRegion(center: coordenada, span: span)

        

        let anotacion = MKPointAnnotation()

        anotacion.coordinate = coordenada

        anotacion.title = "Ángel de la Independencia"

        

        mapa.addAnnotation(anotacion)

        mapa.region = nuevaRegion

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

}

Be the first to comment

Leave a Reply

Your email address will not be published.


*