Link Map

First, I added general improvements including fix for the color tiles appear when loading in dark mode, and fixed the layering issues where the route tooltips were sometimes obscured by icons including stops and busses. I also added an accessibility icon and API feature so that you can see if a stop supports wheelchair ramps.

First, I re-implemented the dynamic route width depending on zoom, I guess I just forgot that when moving to react. I also added a wind speed and direction tooltip when hovering the weather section! (pictured second is the thick lines!)

I added a dynamic weather display for live weather in Seattle. It shows the temperature in Fahrenheit and an icon for the weather (that I designed in affinity!). This was done using the open-meteo API, which is free. I also restructured some files and organized my folders.

Refactoring complete! All code is now in react, and the server hosts the react files on my raspberry pi! I also made huge improvements on the stop arrivals view, and it is now much more clear whether a stop truly has no arrivals or the API is just erroring. Next, I am adding a live weather view!

I finished the entire map refactor, all features now work as intended. As a bonus, the tooltip code is way more efficient and I fixed the stuttering, along with fixing Z-index issues on the stop icons.

Began React refactor! So far, I have just added map support, no CSS yet. Next I am planning to reimplement the UI system.

First, I refactored the variable system into something much easier to read, and while doing this I discovered a pretty bad bug. None of the localstorage saving was correct, and sometimes it would default to vehicles and stops being hidden, so I fixed this and cleaned up the storage code. I attempted to split my code into modules but gave up - eventually I’ll try again

I added real-time vehicle rendering for link! Now, my vehicles endpoint has support for multiple agencies and distinguishes between vehicle types (using GTFS). I also created a custom light rail icon in affinity! I also fixed some of my manual data cutting I did in my last devlog to only affect soundtransit stops.

I added support for the link light rail (finally!). This took quite some time, as I had to somewhat manually remove duplicates of stations (one stop was created for every entrance). Now, there are just two for each station, one for each direction. I also added a smooth slide in out for settings and data, and made the input in the search function more inclusive.

First, I completely reorganized the HTML using various div containers, and I redid almost all of the CSS using flexbox rather than absolute positioning. After this, mobile compatibility was easy to add, mainly just centering everything and making all icons bigger!

Added zoom in UI effect, updated splash screen text and layout mainly using CSS and transitions.

I created a simple splash screen with a nice blurred background that fades when the screen is clicked. This was done mainly using just CSS and a little JS. I also improved the route search system by making the enter key work and changing the enter button color dynamically, and taking in lowercase and uppercase as equal inputs.

First, I made some changes to the line width: now it is dynamic and looks good while zoomed out far. I also started using the route colors given by GTFS, but I mapped them to my own palette as the given one is very ugly. I also rearranged the UI for better usage and aesthetics

I created a route search and highlight feature. I loop through all of the routes to find the inputted one. When the map is clicked, the route gets deselected. Also, minor UI improvements including styled tooltips. The map flies to the selected route.

Quick UI fixes before second ship! I changed the attribution and options style, and made the settings and shown status of options persistent in local storage so that they stay when the page is reloaded or reopened. I also have not shown a screenshot of my affinity file where I design my icons (yup, I made them all lol), so I will upload that here as well.

First, I overhauled the arrivals display. Now, the scheduled vs live labels are accurate (before it just set top 3 to live), and I added the ending destination for each route. I also improved the UI for destinations by adding more space and making it scroll rather than hit other elements. Lastly, I added a settings button rather than the crude close button i had earlier, and the hidden or shown state is remembered on reload.

I created an options menu to enable or disable map layers, as well as UI improvements for dark mode, and custom slider switches for the menu. I also optimized the rendering of busses and bus clusters by only requesting the vehicles shown on screen.

I created a real-time bus layer on the map. First, I get all the trips and figure out where busses are (using OBA) for each GTFS trip in the database. Then, all of those vehicles are rendered on the map. I used the leaflet cluster addon to combine close busses into one until zoomed in. I definitely still need to work out the colors for dark mode, and next I plan to add map settings, like showing live busses.

General QOL fixes: UI bugs, including flashes of the wrong theme fixed. I also made the selected stop persistent so that it renders no matter how zoomed out you are. Lastly, your chosen theme is now saved to the browser and will stay if the page is closed or reloaded.

Dark mode feature added. When the button is clicked, I change the tilemap, UI colors, and map icons to dark mode versions. Also added a smooth transition between modes!

I finalized the UI and added a routes display in the data panel, using a glass effect with CSS and I updated some icons. I also wrote the readme.

Now, the tooltips are dynamically created and show all of the routes you hover. This was done by checking the mouse position’s distance to all of the polyline segments rendered on screen. I also fixed issues when stops do not have real time data, names, or directions, and made sure to avoid undefined stops completely. It is also significantly easier to hover and click on map objects.

First, I created bus icons in affinity to be used for the markers. I also updated the arrivals code to get the id of the clicked stop and use that to fetch real-time data. This is getting very close to being completely functional, and I can start worrying more about design. I also started storing data with the stop objects on screen.

I created a new stops-nearby endpoint for my server. It takes in the bounding box of the map and finds all of the stops that are on screen, and I render them as markers. Eventually, I’m goinf to change the icons and style of the map, but they are default markers for now. Stops only render if there are less than 400 on screen for performance. Otherwise, a warning will tell you to zoom in.

I stopped using OneBusAway completely for route maps and shapes. Now, I am using GTFS data directly from King County, along with the GTFS library for node. Now, I run through all of the routes in the system, and check for the longest shape (which should be the correct route), then import it onto the map. All of the routes are actually in the correct places!! This is much more reliable and way way quicker than using OBA. I genuinely have no idea how I will deploy this tho…

I used the getroutebyagency request now, so that I can get all sound transit and KCM data. There seems to be a pretty bad bug though, and some lines are rendering as other lines. I believe this is the APIs fault as there are many trips for each route, and there is no way for me to find which trip is the correct one. I may use GTFS data instead for fixed data like route shapes.

First, I used the routesForLocation query to get all of the bus and train routes within 2.5 kilometers of the user. Then, I request shapes for each of those routes, and render them as polylines. I also used tooltips to show the hovered or clicked route, and changed the color of the selected route.

I struggled with vercel deployment for almost an hour and ultimately made no progress. I think I will need to use a service that does not do serverless deployment, like digitalocean, but they all require a credit card input. I also tested out some other routes in my map system.

I used Leaflet to create a route map! Currently, I am fetching the route shape which is stored as an encoded polyline. I use that and the polyline addon for Leaflet to render the route on to the map. I also fixed a bug where the minutes would be in the thousands because I forgot to account for scheduled trips or trips with no time data. The leaflet library is surprisingly easy and intuitive, and just their docs got me nearly all the way to rendering the train lines.

First, I set up the node environment on my computer (and this time did not expose my api key to the world). I created a basic UI that shows the departure times for a (hardcoded rn) station or bus stop. I recieved my API key after a five day wait, and I am using the arrivals and stops endpoints for the OneBusAway API (shown in the docs). Right now, I input a station ID code and it will output the arrivals/departures from the past 5 and next 35 minutes.