Como Integrar un Enrutador en Mapbox


En este tutorial veremos cómo integrar un enrutador en un mapa de Mapbox, para que nos calcule nuestras rutas en coche, en bici o a pie.


A continuación, tenéis el código completo para visualizar el mapa de Mapbox con la API de enrutamiento llamada Mapbox Direction a pantalla competa y en formato HTML.

Ya sabéis solo tenéis que copiar y pegar en un editor de texto y guardarlo como html.

						
<!DOCTYPE html>
<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css' type='text/css'/>  

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
    <script>
        mapboxgl.accessToken = 'Tu Token de Mapbox';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'Tu estilo de Mapbox',
        center: [8.922735, 44.413531],
        zoom: 14
        });
    // Add zoom and rotation controls to the map.
	map.addControl(new mapboxgl.NavigationControl());
    // Add router
	map.addControl(new MapboxDirections({accessToken: mapboxgl.accessToken}), 'top-left');
    </script>
</body>
</html>
						

					

Vamos a conocer un poco más el código del enrutador de Mapbox:

La API de enrutamiento de Mapbox llamada Mapbox Direction nos permite el cálculo de rutas entre coordenadas. Además la API nos permite escoger entre rutas en coche (incluido el tráfico en tiempo real), rutas en bicicleta o rutas a pie.

Tiene dos partes principales, la salida y la llegada, en cada una de ellas es posible insertar la dirección por coordenadas (insertando primero la Longitud y luego la Latitud, separados por coma y con el punto como separador decimal: -3.703456,40.416981), seleccinar a mano sobre el mapa o escribiendo la dirección.

Una vez insertados la salida y la llegada, nos genera la ruta sobre el mapa y un panel con indicaciones paso a paso incluyendo los giros y las distancias (en pies y en millas).

La primera parte del código se inserta en la cabecera o head, en ella aparecen cuatro enlaces los dos primeros estilos son para crear el mapa base y los dos siguientes son los códigos especificos del enrutador de mapbox:

						
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css' type='text/css'/>  
						
					

La segunda parte del código que también se incluye en el head, hace referencia a los estilos de este mapa en particular, en nuestro caso le estamos obligando a que el mapa ocupe el 100% de la ventana, sin márgenes ni bordes.

						
<style>
  body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
						
					

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que esta directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

						
<div id='map'></div>
						
					

Si nos fijamos ahora en la parte del Script veremos varias partes imprescindibles, la primera es el Token de acceso o identificador de usuario, es único para cada usuario de Mapbox.

Posteriormente hay que añadir el estilo del mapa, existen estilos por defecto, pero os animo a crear vuestros propios estilos personalizados.

La parte numérica corresponde a las coordenadas geográficas en grados decimales, Longitud y Latitud

Posteriormente definimos la escala de visualización.

						
mapboxgl.accessToken = 'Tu Token de Mapbox';
var map = new mapboxgl.Map({
container: 'map',
style: 'Tu estilo de Mapbox',
center: [8.922735, 44.413531],
zoom: 14
});
						
					

Si queremos añadir los controles básicos al mapa, solo tenemos que insertar esta parte:

						
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
						
					

Finalmente añadimos el enrutador llamando a la API MapboxDirections, y la situamos arriba a la izquierda.

						
// Add router
map.addControl(new MapboxDirections({accessToken: mapboxgl.accessToken}), 'top-left');
						
					

Esta API admite tres perfiles de enrutamiento diferentes:

mapbox.driving para enrutamiento de coches y motocicletas, muestra las rutas más rápidas seleccionando carreteras de alta velocidad como autopistas y autovías.

mapbox.walking para rutas peatonales y de senderismo, muestra el camino más corto seleccionando aceras y senderos.

mapbox.cycling para enrutamiento de bicicletas, muestra las rutas que son más cortas y seguras para los ciclistas, evitando autopistas y seleccionando calles con carriles para bicicletas.

Y listo, ya tenemos nuestro enrutador funcionando gracias a la API de Mapbox Direction.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm