{"id":19428,"date":"2021-09-22T14:04:56","date_gmt":"2021-09-22T18:04:56","guid":{"rendered":"https:\/\/nuxx.net\/blog\/?p=19428"},"modified":"2021-09-22T14:04:57","modified_gmt":"2021-09-22T18:04:57","slug":"making-an-online-ramba-trails-map","status":"publish","type":"post","link":"https:\/\/nuxx.net\/blog\/2021\/09\/22\/making-an-online-ramba-trails-map\/","title":{"rendered":"Making an Online RAMBA Trails Map"},"content":{"rendered":"\n
\"\"<\/a>
RAMBA Trails Map v1.0 (Default View w\/ Epic Loop Layer)<\/figcaption><\/figure>\n\n\n\n

Introduction<\/h2>\n\n\n\n

Kristen and I have been spending a good deal of time in the Ishpeming<\/a> and Negaunee<\/a> area this year, and I’ve made it a personal goal to become more familiar the local trails — both RAMBA<\/a>-supported and otherwise — and get them documented OpenStreetMap (OSM)<\/a>. Having these trails in OSM provides two big benefits: they appear in other mapping tools (such as OsmAnd<\/a>, GaiaGPS<\/a>, Strava<\/a>, MapMyRide<\/a>\/MapMyRun<\/a>) and the trail data can be freely used to build other tools.<\/p>\n\n\n\n

\"\"<\/a>
Official RAMBA Map v6 from 2018<\/figcaption><\/figure><\/div>\n\n\n\n

Over the years of making trail maps with OpenStreetMap I’ve mostly produced PDFs for printing<\/a>, leaving mobile and online mapping to other apps. These work well, but have the big downside of rendering routes with their style. That is, online maps via these tools’ show the routes, but look quite different from print maps, even if all the data for them to display more data (such as colour=*<\/code><\/a> tags on relations) is in OSM.<\/p>\n\n\n\n

While these apps work pretty well, and I use them myself routinely for navigation<\/a>, I got the itch to see if I could make a web-based map<\/a> that looked more like locally produced print maps than app-based renderings. It seemed like a good project, a good way to learn some basics of modern web development, and maybe make something useful.<\/p>\n\n\n\n

What I ended up with was a slippy map of showing the RAMBA trails<\/a> that uses layers of pre-rendered tiles to show the different official trail routes, placed over a background map. The map viewer is client-side JavaScript that loads static tiles from a basic web server, making this a very simple app to host (just a bunch of static files on a site).<\/p>\n\n\n\n

In this post I intend to document the major steps of how I made this map, why I used the tools I did, and share the code to reproduce (and update) this build. Hopefully this’ll allow others to get their head around these map presentation basics, perhaps even reusing this work to make and host another map.<\/p>\n\n\n\n

Update OSM Data<\/h2>\n\n\n\n
\"\"<\/a>
Strava Global Heatmap in JOSM<\/figcaption><\/figure><\/div>\n\n\n\n

Mostly outside the scope of this article but worth a mention, a significant amount of time was spent ensuring that the RAMBA area trails are accurately listed in OSM. Without good data it would not be possible to go further, as the OSM data is the base data used to create other maps.<\/p>\n\n\n\n

By combining information from a bunch of sources, and doing some personal surveying of trails while riding and hiking, I was able to get all of the official RAMBA trails documented, along with numerous other paths and tracks in the area. This building a complete picture of the usable trails in the area.<\/p>\n\n\n\n

Information used to get the RAMBA trails in OSM included:<\/p>\n\n\n\n