Saltar al contenido →

MapKit JS. Guía de integración de Apple Maps en la web. Parte II

En el artículo anterior vimos una introducción a MapKit JS y dimos un repaso por las operaciones más comunes cuando se trabajan con un mapa.

Ahora vamos a ver la forma en la que establecemos rutas y el nuevo dashboard con el que controlar el estado de nuestras aplicaciones web con Apple MapKit JS.

Os recuerdo que podéis ver una demostración en vivo de MapKit JS en este microsite de desappstre.com

Establacer Rutas

Ya sabemos como situar lugares en el mapa y marcarlos de todas las manera posibles. Pero se nos olvida otra de la cosas que podemos hacer con un mapa, quizá la más últil.

Sí, estamos hablando de trazar rutas, y es otra de cosas que MapKit JS nos deja hacer de una forma muy sencilla.

Toda la responsabilidad cae sobre la clase mapkit.Directions a la que con muy poca información nos dará una o varias rutas desde entre dos puntos del mapa que le indiquemos.

Lo primero que hacemos es crear un objeto DirectionsRequest en el que configuraremos la solicitud al cálculo de rutas. A este objeto le pasamos el origen y el destino, el tipo de trasporte en el que nos vamos a desplezar, que en este momento sólo puede ser
en coche (mapkit.Directions.Transport.Automobile) o andando (mapkit.Directions.Transport.Walking).

También podemos pedirle que nos de una o varias rutas dependiendo de si pasamos true o false a la propiedad requestsAlternateRoutes

Una vez que tenemos lista la configuración para la ruta creamos un objeto mapkit.Directions que será el encargado de calcular la ruta.

Para obtener la ruta o rutas llamamos a la función route a la que le pasamos como parámetros la configuración que acabamos de preparar y el callback donde recibiremos el resultado del cálculo de rutas.

Este callback recibe un error y un results. Es este último el que más nos interesa, aquí encontraremos las rutas y las instrucciones a seguir.

results tiene un array de objetos Route, hasta un máximo de 3, uno por cada ruta que MapKit haya encontrado. Cada uno de estos Route a su vez contiene una serie de propiedades donde está toda la información de la ruta

  • path Es un array de mapkit.Coordinate con todos los puntos por donde pasa la ruta
  • steps Un array con las instrucciones a seguir para llegar al destino
  • distance La distancia en metros
  • expectedTravelTime El tiempo que tardaremos en completar la ruta en segundos

¿Y cómo dibujo una ruta en el mapa?

Calcular la ruta está muy bien, pero mostrar sobre el mapa estaría mucho mejor. Hacer esto es obligación de la clase mapkit.PolylineOverlay a la que pasamos como parámetros las coordenadas de cada punto de la ruta y el estilo visual que tendrá la línea que presentamos sobre el mapa.

Como vemos podemos configurar el color de la línea, el grosor y la forma en la que se une cada punto de la ruta.

¿De dónde sale cada paso de la ruta?

Ya hemos visto que las coordenadas salen de la propiedad path, pero las instrucciones ha seguir se encuentran en la propiedad steps.

Ya hemos comentado que esta propiedad contiene un array de objetos de la clase RouteStep. Esta clase tiene propiedades como…

  • instructions Son las instrucciones a seguir que representen esta parte de la ruta
  • distancia Los metros de este paso
  • transportType La forma de transporte para este paso

Como vemos en el código anterior para cada step presentamos sus instrucciones y la distancia que debemos recorrer para completarlo.

Geocoding 1. Punto del mapa a coordenadas

Otra de las funciones que nos permite MapKit es convertir un punto de la pantalla en la que está el mapa en sus coordenadas correspondientes.

Para hacerlo tenemos que registrar el evento click del mapa. Cuando de produzca el click obtenemos el punto (x, y) en el que se ha producido el click.

Después sólo tenemoso que hacer uso de la función convertPointOnPageToCoordinate del mapa para obtener un mapkit.Coordinate correspodiente.

Geocoding 2. Coordenadas a dirección

Otra de las funciones de geocoding que implementa MapKit es la de covertir unas coordenas en una dirección legible.

Esto lo conseguimos gracias a la función reverseLookup de la clase mapkit.Geocoder

El callback recibe como parámetro un error, si no se ha podido convertir, y un data, que es el que contiene la dirección (formattedAddress) y las coordenadas asociadas (coordinate)

Calcular regiones a partir de 2 o más coordenadas

El mapa se centra sobre una región de forma automática cada vez que añadimos un Annotation. Pero cómo podemos centrarlo si no vamos a añadir ninguna.

Si tenemos dos o más coordenadas podemos construir un mapkit.BoundingRegion a partir de ellas.

Lo primero es decir que un BoundingRegion es un rectángulo sobre el mapa y para constuirle necesitamos 4 datos:

  • northLatitude La latitud más al norte (la de mayor valor)
  • eastLongitude La longitud más hacia el este (la de mayor valor)
  • southLatitude La latitud más al sur (la de menor valor)
  • westLongitude La longitud más al oeste (la de menor valor)

Así que vamos son el script que haga esto por nosotros.

Lo primero que hacemos es obtener dos arrays, uno con las latitudes y otro con las longitudes.

Después recuperamos los valores mayor y menor de cada array gracias a la función Math.max y Math.min

Con estos 4 valores ya podemos construir el BoundingRegion y centrar el mapa en esa región.

MapKit JS Dashboard

Hace unos días Apple nos daba la opción de realizar un seguimiento a todos nuestros desarrollos badaos en MapKit JS mediante un dashboard en el que podemos ver las visualizaciones de mapas así como las llamadas al servicio.

Recordemos que al día disponemos de 250.000 visualizaciones y **25.000 llamadas a los servicios de mapas. Si vuestro proyecto va a superar estos límites podéis contartar con Apple a través de este formulalrio.

Pruebas en local

Puedes usar el sitio web que acompaña al artículo y que puedes visitar en esta dirección o si lo prefieres puedes hacerlo en tu equipo local.

Sólo tiene que descargar el código desde este repositorio de GitHub y una vez descomprimido abrir la app Terminal, situarte en el directorio raíz de la web y ejecutar el siguiente comando:

php -S 0.0.0.0:9090

Ahora ya puedes acceder desde tu navegador, o desde cualquier ordenador de tu red a la dirección

Conclusión

Con esto terminamos la serie de dos articulos sobre el nuevo la versión web del framework de mapas de Apple.

Publicado en MapKit JS