Before going for a hike, a ride or any outdoor activity on roads or trails, it can be useful to plan your outing in order to know where you are going, and to estimate how much time it could take you.

Moreover, in this Covid period, where most of the trail running races were cancelled, a lot of runners (myself included) were looking for off-races, long distance challenges. But before attempting to complete a challenge, it must be defined and planned, and this usually includes drawing some lines on a map. So my initial motivation was to create a tool that allows me to do that in a quick an efficient way.

What do I need?

The essential features I personally need are:
- the tool should be able to automatically follow roads and trails between two points
- it should be possible to add off-trail points with a straight line from the previous point (manual routing)
- it should be possible to switch the routing mode between road and trail
- the tool should calculate the distance, ascent and descent
- the track should be exportable to a GPX file.
Some other features are nice to have but non essential for me:
- a visualization of the slopes on a graph
- having some Point of Interests displayed on a map, like refuges and huts, drinking water location, shops, etc...
- being able to estimate a schedule based on a pace.

There are a lot of existing tools which cover more or less these features, but some of them (Strava, OpenRunner, TraceDeTrail...) require a premium subscription to have all the features listed above, and some others are linked to the watch or device you bought (Garmin, Suunto...). Moreover, I'm often not very satisfied with the user experience of these applications.

Some technical details...

So I decided to try building my own app, with the following components:
- Vue.js for the front-end framework
- Leaflet as the map library
- the OpenRouteService API via its openrouteservice-js NPM module
- Thunderforest for its outdoor map

The ORS API is nicely designed an is quite fast. The main issue I faced was the limitation of maximum 50 points for the routing API. To overcome this, I'm now doing requests to the API with only two points, and concatenating the route inside the application.

I now have a first working version which includes all the essential features. The code is available on Github with the instructions to run it.

An online version is available at https://map.nicolas-abbal.com.

How to use it?

I did not spend much time on the UI/UX part, as it's mainly a tool for my own usage. Here are some hints on how to use it.

The official Ghost installation guide recommends Ubuntu 16.04 and MySQL. Here is a quick walkthrough to install Ghost on a fresh Debian 9 install, with a sudoer user, using NGINX as a reverse proxy, and SQLite as the database to store the blog content.

The goal is to have all the files needed to run the blog in the same folder, so that it can be easily transfered to another server, with the minimum amount of work.

1/ Install node.js and NGINX

Instructions here.
For node.js 8.x:

sudo apt-get update
sudo apt-get install -y curl nginx
curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
sudo apt-get install -y nodejs

2/ Install ghost-cli

We will use ghost-cli to create the local Ghost instance.

sudo npm install ghost-cli@latest -g

3/ Install a local instance of Ghost

First, we create a new directory in /var/www, and we give our user its ownership:

cd /var/www
sudo mkdir my-ghost-instance
sudo chown myuser:myuser my-ghost-instance

Then we install the local ghost instance:

cd my-ghost-instance
ghost install local

At the end of the installation, you should have the following message:

Ghost was installed successfully! To complete setup of your publication, visit:

    http://localhost:2368/ghost/

And you should have an instance running:

nico@myserver:/var/www/my-ghost-instance$ ps -ef |grep node
myuser      5694  5686  3 16:10 ?        00:00:04 /usr/bin/node current/index.js
myuser      5714  2479  0 16:13 pts/0    00:00:00 grep node

The command ghost ls should also display the running instance.
Now, we will create the production configuration file:

cp config.development.json config.production.json

Let's Edit the file config.production.json, and change the url field to match our server IP or DNS (the one which will be used to access our blog). The file should look like:

{
  "url": "http://myDNSorIP",
  "server": {
    "port": 2368,
    "host": "127.0.0.1"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/var/www/my-ghost-instance/content/data/ghost-local.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "local",
  "paths": {
    "contentPath": "/var/www/my-ghost-instance/content"
  }
}

Now we stop our ghost instance and start it in production mode:

ghost stop
ghost start production

4/ Configure NGINX

Let's create some folders and files to configure NGINX to act as a reverse proxy for the blog.

cd /var/www/my-ghost-install
mkdir -p system/files system/nginx-root
cd system/files

Then, we create a file named my-ghost-instance.conf, with the following content:

server {
    listen 80;
    listen [::]:80;

    server_name myDNSorIP;
    root /var/www/my-ghost-instance/system/nginx-root;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

Then we will link this configuration file into the NGINX configuration folder, and then make NGINX reload the configuration files:

sudo ln -s /var/www/my-ghost-instance/system/files/my-ghost-instance.conf /etc/nginx/sites-enabled/my-ghost-instance.conf
sudo systemctl reload nginx.service

5/ Make the blog resilient with systemd

Now we need to ensure that the ghost instance will be automatically restarted if the server reboots. Create a new file /var/www/my-ghost-instance/system/files/my-ghost-instance.service with the following content:

[Unit]
Description=Ghost systemd service for my-ghost-instance

[Service]
Type=simple
WorkingDirectory=/var/www/my-ghost-instance
User=myuser
ExecStart=/usr/bin/node /var/www/my-ghost-instance/current/index.js
Restart=always
Environment="NODE_ENV=production"

[Install]
WantedBy=multi-user.target

Then we need to link this configuration file to the systemd folder, and then activate the service:

ghost stop
sudo ln -s /var/www/my-ghost-instance/system/files/my-ghost-instance.service /etc/systemd/system/my-ghost-instance.service
sudo systemctl daemon-reload
sudo systemctl enable my-ghost-instance.service
sudo systemctl start my-ghost-instance.service

6/ Bonus: install a SSL certificate to use HTTPS

It's very easy to use HTTPS, generating a SSL certificate with Let's Encrypt free service. The instructions are described here, or we can follow the following steps:

sudo su
echo 'deb http://ftp.debian.org/debian stretch-backports main' > /etc/apt/sources.list.d/stretch-backports.list
exit
sudo apt-get update
sudo apt-get install certbot python-certbot-nginx -t stretch-backports
sudo certbot --nginx

Once the question have been answered, the NGINX configuration should be automatically updated to use the new certificate.

We now have a new Ghost instance running! Using this process, we can easily add more Ghost instances on the same server (adapting the folder names, port numbers etc...), and backup an instance with all its configuration file.