jrmgx/trailodysseyopen

Trail Odyssey is a website that allows you to plan hikes from A to Z. Including: creation of the path ; planning the hike ; preparing your bag ; live use during the hike ; and finally share with your friends.

Trail Odyssey

This introduction comes from my blog

What is Trail Odyssey?

It’s a website that allows you to plan hikes from A to Z.

And what do I mean by that:

• The creation of the path itself, that is to say importing GPX or creating routes (even if needed by tracing point-to-point segments), managing your base maps.
• Planning the hike, namely placing the stages, studying altitudes, looking for points of interest (water or viewpoint for example).
• Preparing your bag, including weight management.
• Export of the final GPX to import it into external apps if necessary.
• Live use during the hike, with offline display of the current stage, GPS for position, elevation, progress in real time.
• And finally share photos of the itinerary with a public version for your friends.

Technical choices

Trail Odyssey is developed for mobile first.

It is also a “web app” which includes these features in particular:

• Offline map.
• Installable on mobile.

More technical details in the form of keywords: PHP, Symfony, Javascript, Turbo, LeafletJS, BoostrapCSS, PWA, Mobile First.

Technical Concepts

Stage and Routing relation

-----------
| Stage A |
-----------
  !__ Routing AB __
                  !
            -----------
            | Stage B |
            -----------

Stage have two dates:

• arriving at (the date and time where you plan to arrive at this destination)
• leaving at (the date and time where you plan to leave from this destination)

Stage have 0, 1 or 2 routing(s):

• routing in
• routing out

Routing have two stages:

• start stage
• finish stage

So in this schema:

• Stage A has one routing out: Routing AB
• Routing AB has two stages; start stage: Stage A and finish stage: Stage B
• Stage B has one routing in: Routing AB

Other concepts

Mappable is anything that can be shown on the map

TODO

• Explain: the use of turbo frames templates
• Explain: Load JS on DOMContentLoaded and re-used when Turbo frame is re-rendered via {{ stimulus_js_load_start('diaryController', first_load is defined and first_load) }}

Installation

Prerequisite

• Adds 127.0.0.1 trailodyssey.test into your /etc/hosts file
• Install castor

First time install

• castor infra:build There nothing to build for now but still
• castor infra:up
• castor infra:install
• castor dev:load-fixture For dev

Head up to https://trailodyssey.test and you should have a running instance!

Day to day commands

• castor up to start the project
• castor down to stop the project

See castor for other commands

Some screens

Public: Display of photos with the position on the map, mobile first (but a desktop version exists)

Public: Public sharing home page with mileage and bag summary

Planning: Display of the different stages, elevation differences, desired dates and times. Desktop version (available in mobile)

Path: display of paths coming either from multiple GPXs, or from routes traced by hand or via the tool integrated into Trail Odyssey. Desktop version (available in mobile)

Live: Display of the current stage with real-time GPS position, elevation and progress in percentage

Main page with all hikes

Equipment page, with the list of equipment. From this page, you can add elements (with their weight) to find them in bag management later

"Diary" part which allows you to add geotagged photos and texts, for the public version

Bag management: Adding items, managing multiple bags, bags within bags and total weight. The checkboxes allow you to prepare your bag and not forget anything.

Resources

• symfony.com/ux-turbo
• stimulus
• graphp/graph
• graphp/algorithms
• sibyx/phpGPX
• leafletjs.com/reference
• mpetazzoni/leaflet-gpx
• overpass api
• overpass turbo
• wiki.openstreetmap.org/Nominatim/Special_Phrases
• wiki.openstreetmap.org/Overpass_API
• wiki.openstreetmap.org/Tag:tourism:camp_site
• thunderforest maps outdoors
• leaflet routing machine
• turfjs.org/docs/
• Leaflet.GeometryUtil
• getbootstrap.com
• icons.getbootstrap.com
• Offline

Licence

Code, and assets are under Apache License 2.0

Contributing

Trail Odyssey aims to be an Open Source, community-driven project. Join us by contributing code or documentation.