{"id":24940,"date":"2026-09-27T09:58:51","date_gmt":"2026-09-27T13:58:51","guid":{"rendered":"https:\/\/nuxx.net\/blog\/?p=24940"},"modified":"2026-09-27T10:07:12","modified_gmt":"2026-09-27T14:07:12","slug":"maplibre-gl-lanes-v1-0-0","status":"publish","type":"post","link":"https:\/\/nuxx.net\/blog\/2026\/09\/27\/maplibre-gl-lanes-v1-0-0\/","title":{"rendered":"maplibre-gl-lanes v1.0.0"},"content":{"rendered":"
\n
\"\"<\/a>
maplibre-gl-lanes v1.0.0 Lanes Rendering Example<\/figcaption><\/figure>\n<\/div>\n\n\n

The old (outdated) print RAMBA map<\/a> was the inspiration for the parallel lines\/lanes (public transit-style) maps on trailmaps.app<\/a>. They functioned, but I wasn’t super happy with how they looked. It worked by using the built-in line-offset<\/a> and bolting on a bunch of fixes at map generation time. This looked… mostly okay… but fell apart at complex intersections and had lots of back-and-forth transitions.<\/p>\n\n\n\n

I realized that a better way to do this would be via a plugin for MapLibre GL JS<\/a> which calculates and draws these routes as zoom changes. It turns out there are papers from 2018-2021 about software called LOOM<\/a> (Line-Ordering Optimized Maps: 1<\/a>, 2<\/a>, 3<\/a>, 4<\/a>) and a reference implementation or and it did basically this, but with the intention of transit maps themselves.<\/p>\n\n\n\n

So, a few weeks ago I fired up the clanker\u2020 and set it to work implementing this, via a plugin, without using any existing code, which c0nsumer\/trailmaps.app-map-generator<\/a> would be able to use for drawing the lines on my maps. After a bunch of back and forth, some really interesting learning about having multiple agents (on different packages) coordinate their work and testing (a plugin + its consumer), and a late-night session to tie things up (interestingly, after riding a bunch of RAMBA trails that afternoon<\/a>), it’s now live at v1.0.0: c0nsumer\/maplibre-gl-lanes<\/a> (and via npm<\/a>).<\/p>\n\n\n

\n
\"\"<\/a>
DRvG route on App v507 w\/ maplibre-gl-lanes<\/figcaption><\/figure>\n<\/div>\n\n\n

I’m really, really happy with this. Here is the demo from GitHub pages that allows you to A\/B the simple line-offset and \/ plugin drawing styles<\/a>, or if you look at my current maps for RAMBA<\/a> or Glacial Hills<\/a> you can see it in action. While not as key, it really makes Burchfield<\/a> pop.<\/p>\n\n\n\n

It looks particularly good on maps of routes like those for Massive Fallout<\/a> and De Ronde van Grampian<\/a> where there’s just 3-4 routes of varying lengths with some overlap. I can’t share those maps publicly yet, but this image shows a bit of it.<\/p>\n\n\n\n

There’s also been some further tweaking to the map generator, such as not drawing the thin white lines under the trail routes, better coloring (heavily inspired by NPS Park Tiles<\/a>), showing swamps and railroads, which have helped make things even better, but the bulk of the improvement is from this plugin.<\/p>\n\n\n\n

More to come on map improvements, including possibly adding a color-by-difficulty option for trail systems that only color\/designate their trails this way (eg: Copper Harbor<\/a>, NTN<\/a>), but that’s all going to take some planning and thinking.<\/p>\n\n\n\n

\u2020 A laptop that I use for running Claude, accessed via SSH. I should probably write something up about this later…<\/p>\n","protected":false},"excerpt":{"rendered":"

The old (outdated) print RAMBA map was the inspiration for the parallel lines\/lanes (public transit-style) maps on trailmaps.app. They functioned, but I wasn’t super happy with how they looked. It worked by using the built-in line-offset and bolting on a bunch of fixes at map generation time. This looked… mostly okay… but fell apart at\u2026<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,57],"tags":[],"class_list":["post-24940","post","type-post","status-publish","format-standard","hentry","category-making-things","category-mapping"],"_links":{"self":[{"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/posts\/24940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/comments?post=24940"}],"version-history":[{"count":3,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/posts\/24940\/revisions"}],"predecessor-version":[{"id":24945,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/posts\/24940\/revisions\/24945"}],"wp:attachment":[{"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/media?parent=24940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/categories?post=24940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuxx.net\/blog\/wp-json\/wp\/v2\/tags?post=24940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}