Upgrading T-Comm’s Map Engine: Leaflet to MapLibre GL

It’s been a while since I’ve posted something here, and looking through the side projects published here, many of them are no longer alive. But one of my them has stayed running for just over 15 years now: my T-Comm live bus map and tracker. This website, which I created while I was still studying in university, visualizes the location of all of TransLink’s buses together on one map.

Last week, I upgraded T-Comm’s mapping engine from Leaflet to MapLibre GL, marking the third version of the map in the site’s history. The original version, from 2012-2016, used Google Maps. After that, Leaflet became the core for nearly a decade.

There’s nothing wrong with Leaflet itself; it’s super simple to make a map and put icons and popups on it. But the way T-Comm was using Leaflet had started running into performance limits. At peak times, the map may need to draw over 1,200 bus icons on the map, which was just sluggish since each icon was an individual DOM element. Zooming in and out was laggy. When filtering buses by a route, it took an extraordinarily long time to toggle. Also, since the base map tiles were raster images, the map looked blurry on modern high-density displays.

After ten years, it was time for an upgrade.

Enter MapLibre GL and OpenFreeMap which provides the vector tiles free for any use. With vector-based rendering powered by WebGL which leverages the GPU, the 1,200+ bus markers can now be drawn and manipulated smoothly. The sharpness of the vector map and text is simply beautiful. Filtering buses via multiple criteria went from seconds to nearly instant. The highly requested dark mode was also straightforward to add. I was able to add additional details to the stop icons to indicate bays and platforms, and this was almost just for fun.

I really like the new look and feel of the new map. I’ve found myself scrolling around just for fun. And I have received a lot of positive feedback in the last week that the map has been online.

This upgrade is another investment in T-Comm; it’s still a project that I care about keeping around. There’s actually a lot more that I have wanted to add over the years, but I have not had time to do so. With AI, some of these ideas of mine could actually become a reality because it takes less time for me to build something I want. But that is probably a whole other blog post, or five.

Related

Leave a Reply

Your email address will not be published. Required fields are marked *