El Tour
El 28 de abril, la Universidad de Temple organizó un recorrido en bicicleta de 22 millas desde el Campus Principal en Filadelfia hasta Temple Ambler.
Mapa animado
El mapa muestra un marcador que sigue la ruta del tour sobre una imagen satelital. A medida que avanza la ruta, una línea rojiza marca el camino recorrido. Una ventana sobre el marcador indica la distancia cubierta desde el punto de origen Campus Principal de la Universidad de Temple hasta la ubicación del marcador. La animación comienza automáticamente cuando se carga la página pero puede ser pausada 
o reiniciada 
usando los botones en la esquina superior derecha.
o reiniciada usando los botones en la esquina superior derecha.
Haga click aquí
para ver el mapa en pantall completa.
El proceso
El mapa fue construido utilizando las bibliotecas Mapbox GL JS, Mapbox Assembly para el estilo y Turf para recuperar y calcular la distancia.
- Se descargó un archivo .gpx desde aquí .
- El archivo .gpx fue convertido a formato Geojson utilizando QGIS.
- Se creó un archivo HTML básico para iniciar el mapa siguiendo los ejemplos de Mapbox en su web.
- Se añadieron los logos de la Universidad de Temple a los puntos de inicio y fin del tour.
- El código y los datos fueron alojados en github y desplegados usando github pages.
Configuraciones
- Utilizamos el
satellite-streets-v12como mapa base. - Utilizamos
path = turf.lineString()ypathDistance = turf.lineDistance(path)para obtener la distancia total. - El
const alongPath = turf.along(path, distanceTraveled).geometry.coordinates;recupera latitud y longitud en la ruta.