Alex Urquhart
Geomatics Professional

Introducing plottr.io - A tool to plan your running and cycling routes

Tags: running cycling javascript leaflet vue

What Is It?

plottr.io is a free web app I made to help you plan and map running and cycling routes. Using automatic routing API’s or manual mode if you choose, you can plan out and find the exact distance of routes you want to take before you step out the door. The site is fully usable on desktop and on mobile.

See It In Action

In case you are unable to view the site (if you can’t please drop me a line!) here’s a short clip of plottr in action.

How It Started

My go-to run planning tool has always been the GMap Pedometer. I’ve used this site almost exclusively since the mid-2000’s and a lot of the functionality of plottr has been inspired by it.

I have been working on making an app like this in one form or another for the past few years, I would usually make it an exercise when I was picking up a new mapping API or UI framework. I’ve tried similar things using React, AngularJs, Angular 2+, and the ArcGIS JavaScript API (using Dojo). This time around I decided I was going to learn Vue, and found the overall development experience to be much more enjoyable for an application like this than the other frameworks I’ve tried. I’ve owned the plottr domain since 2015 and this naturally felt like a good use of it.

Under The Hood

I want to give credit to the different projects and frameworks that I used to create this:

Vue.js

For the front end framework I used Vue.js. I found it to be very intuitive and easy to use with much less boilerplate than Angular, which I had been working with frequently before. The project’s reactive store and CLI tools sweetened the deal.

Bootstrap 4

Bootstrap is always my go-to for new projects due to my familiarity with the framework and its good looks. I’ll hopefully be adding some custom styling/branding in the future.

Leaflet.js

I decided to implement my own Leaflet vue components, instead of going with existing projects such as Vue2Leaflet. Due to its utility I’ve always compared Leaflet to the jQuery of mapping API’s, and it gave me the flexibility to easily use it in a Vue app.

HERE Technologies

I signed up for a developer account when they opened up their free-tier plan, and I currently use their services for their basemap tiles and the pedestrian/cycling routing. Their API’s allow for some other value-added stuff like service areas which I’m looking at adding to the site in the future.

Turf.js

I use Turf for measuring the route geometry and calculating the positions of the distance markers.

Node.js / Express / PostgreSQL / TypeScript

Right now the server used for saving and loading routes is using a Node/Express/Postgres/TypeScript stack. I’m not saving the routes into a PostGIS enabled DB yet, but it’s something I’m looking into.

Roadmap

There’s a lot of functionality that I have planned, and I hope that if a user base forms around this I can prioritize based on what people actually want. Some of the bigger things I’m looking at short term are:

Elevation Profiles

I think most people take the Z-axis into consideration when looking at a route. Adding an intuitive graph similar to how Google Maps displays one for its cycling routes would be neat.

Notice the elevation profile on the bottom of the left-side bar.
Notice the elevation profile on the bottom of the left-side bar.

One of my goals for this is to stay away from using Google’s APIs (mostly due to the new price increases), so I think I’ll have to find a way to roll my own profile service for this.

Export Routes

I want users to be able to export routes to various formats such as: KML, GPX, GeoJSON, and Shapefile. This will add some more complexity on the server side, as I’ll need to use a task queue of some kind as well as find a way to manage any static files I generate.

Service Areas

The HERE API exposes a service-area endpoint which I think would be useful to show users the maximum extents of a defined distance there-and-back run/cycle route.

User Accounts

Allowing users to sign up for an account would let them keep track of saved routes, among other things.

Feedback

I can only test on so many devices and browsers. Please let me know in the comments or shoot me an e-mail if you have any feedback, or if something isn’t working optimally!

comments powered by Disqus