Maps, Apps, and Tracks

Marathons, long and hard. Personally, I wouldn’t be caught doing one, but I’m always up to help someone who is, especially when I can use a bit of Fly to do it. Steve, our global infrastructure whiz, asked if I could think of a good way to track M

Dj Walker-Morgan
9 min readintermediate
--
View Original

Overview

The article discusses the process of creating an online map to track a marathon runner using a mobile device and deploying it with Fly. It covers the technical steps involved in setting up the map, tracking the runner's location, and deploying the application.

What You'll Learn

1

How to create a KML file for mapping routes

2

How to set up a Node.js server to receive location data

3

How to deploy a web application using Fly

Prerequisites & Requirements

  • Basic understanding of web development and JavaScript
  • Familiarity with Node.js and Express framework

Key Questions Answered

How can I track a marathon runner using a mobile device?
You can track a marathon runner by using the OwnTracks app to send location data to a server, which then displays the runner's position on an interactive map created with Leaflet.js. This setup allows real-time tracking of the runner's progress during the marathon.
What technologies are used to create the tracking map?
The tracking map is created using Leaflet.js for the map interface, KML files for route data, and Node.js with Express for the server-side application. This combination allows for interactive mapping and real-time location updates.
How do I deploy my application using Fly?
To deploy your application using Fly, you need to install the Fly CLI, initialize your app with 'fly init', and then run 'fly deploy' to upload your application to the cloud. This process simplifies the deployment of web applications.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
Leaflet.js
Used for creating interactive maps.
Backend
Node.js
Used to build the server that handles location data.
Backend
Express
Framework used for setting up the server.
Mobile App
Owntracks
Used for tracking the runner's location.
Cloud Platform
Fly
Used for deploying the application.

Key Actionable Insights

1
Utilize the OwnTracks app for real-time location tracking.
This app allows users to send their location to a server without needing to develop a custom mobile application, making it an efficient solution for tracking runners.
2
Leverage Leaflet.js for interactive map displays.
Leaflet.js is a powerful library for creating dynamic maps, which can enhance user experience by providing real-time updates and interactivity.
3
Consider using Redis for scalable location data storage.
Using Redis can help manage location data efficiently, especially if you plan to scale the application to track multiple runners simultaneously.

Common Pitfalls

1
Neglecting to handle location data securely.
Without proper validation and security measures, location data can be exposed to unauthorized access. Implementing authentication and secure data handling practices is crucial.

Related Concepts

Web Development
Real-time Tracking
Cloud Deployment