Table of Contents
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.
Under The Hood
I want to give credit to the different projects and frameworks that I used to create this:
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 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.
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.
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.
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.
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:
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.
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.
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.
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.
Allowing users to sign up for an account would let them keep track of saved routes, among other things.
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!