Show HN: I made an offline-ready hiking trail companion app (github.com)
Hi HN! This is a trail companion web app (think AllTrails) I hacked together in a couple weeks time. I was inspired to create this project while training for an extended backpacking trip. My motivation was to create a UI tailored exactly to my liking, and to be able to track my progress along the trail without draining my battery. I also wanted to experiment with PWA technologies.
I successfully used it on my five day adventure along the Knobstone Trail in southern Indiana, and even though it's web-based it hardly consumed any battery life on my old first-gen Pixel XL.
It's set up currently to support a single trail, where the trail and trail markers are deployed with the rest of the app. So it's single-use in that way. For future trips, I can simply swap out the GPX files and deploy.
I am releasing it with an open source license in case anyone wants to use it as a boilerplate to create their own.
155 comments
[ 3.0 ms ] story [ 217 ms ] threadA service worker handles caching of most of the application resources, while a Leaflet plugin[1] handles the actual tiles. You can see it in action by loading it on your phone, switching to landscape mode and pressing the save icon () that appears. It will cache everything in view, for certain zoom levels (configurable). I believe the plugin saves to session storage.
[1]: https://allartk.github.io/leaflet.offline/
It reminds me of a very simplified interface of CalTopo.
One question, are you open to PR's? If so, I'd love to see slope angle added into this in the same format for avalanche awareness along a trial.
Great work!
I'd be curious to know how this directly impacted Gaia development. It's a tool I rely on essentially every day in some pretty harsh environments so I second this concern.
No one is gate-keeping these taxpayer-funded resources, which is sortof what you're implying here. It costs money to process, host, and deliver these taxpayer -funded maps to people, especially offline.
If you're a legacy user of Gaia, I'd encourage you to give the app another shot. Originally Gaia was the best way to view USGS quads on your phone. Since then, we've invested a ton of resources and engineering into building a vector topographic map based in OpenStreetMap, which I think is a huge value add for backcountry users.
We give that away for free.
But if all you're looking for is USGS topos, I'd use Avenza.
The subscription model has distorted the smartphone map app ecosystem, just like it has the rest of the software industry.
For the record, OSM maps lack the detail and reliability of the legacy USGS 7.5 minute topographic quads. For that matter, the most recent USGS topographic maps are themselves almost as bad as OSM! For best coverage I would recommend the 1990s series or earlier. ( https://www.usgs.gov/faqs/how-do-us-topo-maps-differ-histori... )
For Android, OSMAnd is good enough for navigation and Qfield can load any GIS vector or raster layer from a desktop QGIS project.
w.r.t the acquisition, we've seen some fairly dramatic highs and lows. The 20% layoff earlier this year was definitely the lowest low, but the whole org was affected, not just Gaia. On the flip side, we've been working really hard on developing a roadmap that centers on stabilising and enhancing the bedrock features that our users have come to expect, and that are sometimes less than perfect. This is something that Outside PM's have been really pushing on. I'm enthusiastic about that focus, because it's been sorely needed.
The tl;dr is that the forces that have caused some of the user experience challenges of late were in play long before the Outside acqusition, and if anything Outside is providing the resources necessary for us to commit to fixing them.
One question if you're able to comment - what's up with the satellite snow coverage layers? I tried to use those to scout for a hike in October, but both most recent and cloudless were from 2021.
I assume you're talking about our "fresh sat" layers -- in some places the recency of the imagery in those layers is unfortunately dependent on some rather stochastic factors. These factors are usually (but not always) correlated to location on the earth.
We get the latest imagery taken from the satellites (Sentinel-2 and Landsat 8/9) nearly as soon as it's acquired, and then apply some quality filters to it which either accept the imagery for processing or reject it. It's entirely possible to get repeatedly unlucky in that regard, where for a given location no imagery that passes our quality filters has been taken for a long time.
This especially happens a lot near the poles, or in very cloudy places.
are you willing to share where you were looking that you experienced this issue?
Thanks for sharing the filtering process, that makes more sense how a long gap can occur.
I make sure to go on airplane mode and hard-reload the app, and it generally works great. If I have week signal, or don’t reload it, or anything like that, it gets confused and constantly freezes.
The offline route creation is very iffy though.
I'm actually using a plugin[1] that handles elevation and slope graphing. Adding slope to the graph is as simple as adding a line in the configuration.
I only intend this to be a boilerplate for others to start their own projects. I'm not sure how much active development I'll do on it, but I'm certainly open to PRs that make it better.
[1]: https://raruto.github.io/leaflet-elevation/
A really fantastic team building some absolutely gorgeous topographic basemaps from publicly available data. Hopefully they'll find time to add a slope angle overlay at some point.
I have no affiliation, but it’s the only paid app I appreciate as much as I do.
https://apps.apple.com/us/app/mapout/id477094081
An example of something I stumbled onto: have a route open on your screen, zoom into some portion of the route, tap the screen and it adds markers on the route telling you the distance of the segment on screen, which persist when zoomed out. This seems silly, but highly useful way for me to zoom to where my location is (say) at bottom of screen and next route milestone is at top, and getting the exact distance to go between current location and desired location on the fly.
For uses like that I use Mapy.cz app which uses OSM and contrary to the name works all over the world. It’s very good for trail hiking although I haven’t used it in US, it’s probably as good as OSM data.
Notable about Mapy.cz:
- Offline support is really nice, you download specific regions you're interested in.
- There is a really cool option to create a "Trip in the area". You pick a starting point and it does a loop of a set length and comes back to the same point. See https://napoveda.seznam.cz/en/maps/route-planner/circuit-rou...
- It's backed by, what seems to be, a Czech IT giant - Seznam.
One ability of it that I find awesome is that there is a huge variety of online map sources, for example, in my home country there is an independent mapping project for hiking trails, and the maps are usually more detailed and better quality than OSM. I can easily switch to those maps when needed, and of course download them for offline use - but not the full dataset, instead you can draw a polygon of map boundaries that you want to have offline.
> "You should always research your trip ahead of time, plan training hikes, become familiar with the terrain, carry a physical compass and map and know how to use them."
Here's an idea for an app: one that teaches users how to find their position with nothing but map and compass (though having a non-GPS, i.e. barometric, altimeter is also useful, particularly in poor visibility).
Honestly, I have terrible natural bearings and I've never relied on a map and compass but I would love to practice with an app like what you're describing.
There's some ultramarathon race I remember reading about where contestants bushwack an insane distance through some stretch of woods over a few days using only compass and map. I don't think I'd even make it a mile!
First, try to orient the map to the surroundings based on landmarks which you get readings on using the compass. (A more expensive compass with a mirror for sight readings is kind of essential, also with an adjustment for your local magnetic vs. true north offset, which can be fairly large). Here is where having a satellite GPS to get your location on the map makes life a whole lot easier, but orienteering types sniff at such aids.
Once the map is oriented, plot your straight-line course to your desired location on the map (although you may have to go around obstacles, so then you have to plot a zig-zag route). Then, use the compass to follow that plot as best you are able, re-orienting the map every once in a while to landmarks to verify your location. Checking against an altimeter also helps ensure you are where you think you are.
It's amazing how fast one can get off-track in whiteout conditions due to snow or heavy clouds, though. And if there are no visible landmarks in flat country, then having a satellite GPS is pretty key! (as long as the batteries last).
https://barkleymovie.com/
https://vimeo.com/97270099
I've completed a few ultra marathons but only on well marked impossible to get lost on trails. I'm not even brave enough for the http://www.uwharrie100.com/
Can I ask you how calculated the slope gradients (if I'm reading that right? like red = steep?)
[1] https://github.com/Raruto/leaflet-elevation [2] https://github.com/iosphere/Leaflet.hotline
You can upload your GPX or FIT files and it generates the 3D Terrain using Babylon.js
It's called https://cubetrek.com
I uploaded my GPX and it made these hills that I struggled through look like nothing! I'm not sure why they look so small, but maybe it's just because they are :) https://cubetrek.com/view/8081
But your map is much smaller and users likely don't pan/zoom it very much.
But I understand that this will be difficult in your case, as you're running awesome shademap.
- I select trail
- App generates map PDF with numbered markers (milestones)
- phone has GPS active, but only shows single number, milestone. Preferably on lock screen, without unlocking phone.
Distraction free, tiny drain on battery.
- https://github.com/w3c/ServiceWorker/issues/745 - https://github.com/w3c/geolocation-sensor/issues/22
Everything is online so they can make sure you've paid for it. These things all start out great but as soon as they take off the monetisation becomes priority #1 and the user #2 and of course they die off again.
Found it useful going to Yosemite and planning some hikes over there, especially to know recent comments.
the feature of all trails pro is it's unique maps you can download for data-less access. This ^ should be illegal. Imagine you're an under-equipped tourist from boston who tries to hike Mount Washington, thinking your application surely will work offline? Nope, you gotta pay for that, and you don't know until you're lost.
Like many other apps, it has off-line vector map support, but it has the unique feature to create routes interactively by swiping your finger over the trail that you want to ride, and it will immediately build an elevation profile.
It's incredibly useful when you didn't plan your route up front and you want to get an idea about what's ahead.
TrailForks[1] is in many ways the ideal app for mountain biking, and a great example of what a "trail recommendation" app for hikers should be. It combines the best trail data with easy navigation, planning and routing. What's really unique about it is that they got buy-in from a huge number of regional trail organizations and land managers, so it's frequently updated and generally quite accurate.
When you're riding in an area you're unfamiliar with, it's really easy to put together a good route, read reviews from other users and check out trail conditions.
Gaia GPS[2] is probably the best outdoor mapping app. It doesn't have social functions or trail recommendations, but you can grab layers from just about everywhere, from USGS topo maps, to forest service maps, specialty layers and more. It's great at tracking where you've been, planning routes based on map data and making it hard to get lost while you're out there.
I think the ultimate hiking app would be some combination of "Trailforks but for hiking" and Gaia.
One disclaimer about those apps, they were both recently acquired by Outside Inc., so far they haven't been ruined, but I (and other dedicated users) are worried that corporate ownership won't be good for either app/community.
[1] https://www.trailforks.com/
[2] https://www.gaiagps.com/
The the other shoe dropped. They locked the data and the app behind a subscription service, and not long after that, they've bundled some related web sites with it and sold it to off to some bigger company for quite a nice sum from what I've heard.
My point being, they knew about the subscription/monetization since the beginning but "forgot" to mention it (for obvious reasons). Classic bait and switch tactic. My riding buddies and me spent dozens of hours (some much more) mapping our region and added hundreds of trails and other info "for the good of everyone", just to get it locked away by them. I'm wiser after that, but this is definitely an example how to destroy a good will of a community.
Have you by any chance also evaluated MapLibre (https://maplibre.org/) as an alternative to Leaflet. I'm just wondering if anyone has any insights on how they compare. I use MapLibre for one of my side-projects [1].
What are you using as source for height data (I see the curve colors represent the altitude). I've noticed that one of the most commonly used datasets [SRTM](https://lpdaac.usgs.gov/products/srtmgl1v003/) has some deviation compared to OSM data in high latitudes. E.g. some peak locations from OSM don't match to the contour lines from SRTM. But I have never found any further infos about this.
[1] https://cubetrek.com
I learned of Leaflet through GPS Visualizer[1]. It's an excellent resource. They also have a tool that will augment your GPX file with elevation data[2], though I'm not sure what source they use. According to their site:
> Complete copies of the SRTM3 and USGS NED databases, as well as a large number of SRTM1 and ASTER tiles, are stored on GPS Visualizer's server`
One thing I learned through this project is that elevation and distance data are all over the place depending on what source you're pulling from.
[1]: https://gpsvisualizer.com/ [2]: https://www.gpsvisualizer.com/elevation
It was actually pretty easy, but I did get tripped up by the scope of the service worker. Initially I had the service worker js file in the `scripts` folder but it wouldn't work properly because the scope is by default relative to that file's location. I moved it to the root and that fixed my problem but you can also configure the scope when you register it[2].
[1]: https://developer.mozilla.org/en-US/docs/Web/Progressive_web... [2]: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWork...
> You should always research your trip ahead of time, plan training hikes, become familiar with the terrain, carry a physical compass and map and know how to use them.
Have you any additional advice for someone who has not really done a multi-day trip before? I have never heard of AllTrails; I will check it out.
On the other hand knowing the rough direction you’re going and seeing where trails go don’t require being an orienteering whiz.
Add panic because you're lost and losing daylight, and you're in a pickle.
Have you done any overnight camping before? REI has some good resources[1] including checklists for gear. I bet you can find some good YouTube channels too with camping tips too. Watch some of those to get a sense.
I'd recommend starting with a single overnight. Find someone experienced to go with if you can. If not, find a trail where you stay close to the trailhead. That way you can bail if you need to.
Some other tips that come to mind: - Consider the wildlife in your area and whether you need to bring bear spray and hang your food (and any fragrant items) - After each trip do a little reflection. What did you bring that you didn't need? What did you need that you didn't have? - Make sure you carry enough water. Most people need about a half liter per hour during moderate activity in moderate temperatures. If you want to rely on natural water sources, you will most likely need a water treatment device. Also consider that some lakes/streams are seasonal and not always available. Do your research! - Read up on Leave No Trace principles so that you can conserve the outdoors and make sure others can have the same enjoyment[2].
That should give you a good place to start. Feel free to reach out with any specific questions. I've been thinking about sharing more camping/hiking resources on my website.
[1]: https://www.rei.com/learn/c/camping/t/skills?ir=category%3Ac... [2]: https://lnt.org/why/7-principles/
Is there a map app that has same satellite imagery as google maps but isnt google maps?
I do a good bit of mountaineering. I use 'OSMAND' when driving to the parking spot and 'World Topo Map' when hiking on foot. One problem with world topo map is that the satellite imagery is not great, having the far superior google maps satellite imagery would really be beneficial so I could see where small trails are relative to me. Unfortunately the google maps Android app itself is unusable trash imo. Is there a good app like OSMAND or World Topo Map that uses the same satellite imagery as google maps? If it also has the option to save the data and work offline that would be very useful also. I would pay for an app that fufils those requirements np. Thanks!
I work on the maps on that app, so of course you ought to try it for yourself rather than believing me.
https://play.google.com/store/apps/details?id=com.trailbehin...
I don't mind paying for an app, I paid for some others outside of the Google store (nine folders and cryptomator) but many don't bother to offer this option.
But I don't think OsmAnd is great for viewing elevation profiles of routes. It makes a little elevation graph below the calculated route, but it's really hard to see where this maps out to hard parts on the actual map.
Hey if you don’t mind since you built it, what are the advantages of PWA vs native/flutter mobile app? I’ve been messing with SwiftUI/Kotlin and recently switched to flutter earlier this year.
Thanks and congrats !
Yours is a good example of what can be done by keeping it simple and not getting wrapped around the axle with complicated frameworks.
It makes me regret all the time I've spent trying to figure out the absolute best tech stack to use rather than just working on finishing the damn thing.
https://lists.sr.ht/~scooter/mototripper-dev
You can subscribe by sending an email to ~scooter/mototripper-dev+subscribe@lists.sr.ht. Feel free to send a hello to the list with what you'd like to see. I'm banging away on it every night when I get home from work.
I think Osmand works fine for some things but really sucks for planning long, time-bound trips, which is my use case.
https://lists.sr.ht/~scooter/mototripper-dev
You can subscribe by sending an email to ~scooter/mototripper-dev+subscribe@lists.sr.ht. Feel free to send a hello to the list with what you'd like to see. I'm banging away on it every night when I get home from work.
OsmAnd is fantastic, but there's room for improvement.
https://lists.sr.ht/~scooter/mototripper-dev
You can subscribe by sending an email to ~scooter/mototripper-dev+subscribe@lists.sr.ht
That being said, it's a web app which means it runs in your browser. Follow the link at the top of the README ("Try it out here").
If you're on Android, open your browser menu and look for a menu item that reads `Install` and tap that to add the icon to your homescreen. Now you can use it as a standalone fullscreen app.
If you're on iOS Safari, you can follow the same instructions but install of `Install` it's something like `Add to Home Screen`. Unfortunately Apple doesn't support all the same features because they want to incentivize people using their app store.
Do you know https://faroutguides.com/ (formerly GutHook)? They have offline-friendly paid maps of a lot of the largest scenic trails in America.
I hiked the Appalachian Trail last year and FarOut was standard kit.