Show HN: Ubähnchen – Animated subway map of Berlin
xn--ubhnchen-1za.vercel.appNice! Would be more realistic (and more Mini Metro-like) if the trains actually stopped at the stations though. Also, the trains don't have to disappear and reappear at the terminal stations, they could just stay there until they are scheduled to go back - after all, that's what they do in reality as well...
Any chance that the source could be made available ;) ?
It's linked in the (somewhat easy to miss) about page
The solution with fade out / fade in is pretty clever. Short layovers will cross-fade automatically, but you don’t need complicated internal information about which train continues from one run to the next.
Stopping would be neat, but may also be visually messy.
It doesn't have to be complicated though, and it also doesn't need additional information. The trains could simply be "parked" at terminus stations, and when a train is scheduled to depart in the other direction, check if a train is available at the station - if yes, use it, if no, create a new one.
Strangely S-Bahn does stop at stations, U-Bahn does not.
Maybe a difference in the source data?
I really like it! Well done!
- As others have mentioned, it seems dodgy on Firefox. The button to switch between U-Bahn and S+U mode doesn't seem to work at all on Safari (?)
- Completely unreasonable request, but it would be cool if it were to show the current engineering works - i.e. the U1 not running, and the temporary U12 taking over the western U2 and U1
If anyone else is a urban railways geek, then may I introduce you to CartoMetro - https://cartometro.com/ - an amazingly detailed map of various (mostly French) urban rail systems (although sadly lacking Berlin!)
Another great one is https://www.worldmetro.io/map, which came out of a very cool Kickstarter project[1] that mashed up nearly every urban railway in the world into a huge, interconnected network. I bought one of the large 60” x 45” maps and I still sometimes sit and stare at it, trying to find the various stops where I’ve lived and worked over the years.
1. https://www.kickstarter.com/projects/1960956629/the-world-me...
Looks like it's not available anymore, the website now mostly talks about NFT and minting stations. Shame, would've loved to buy a paper map.
OpenRailwayMap is also worth a mention: https://www.openrailwaymap.org/
It’s working on my iOS 15 iPad:
Very nice. Given the smoothness, I first thought this was real-time:) As someone who lives in Berlin, I didn't know there was an open API for the VBB. I'll have to have a look at it.
And loving the Minimetro vibes! (Running this on android 10 on a OnePlus 7pro - runs smooth in Chrome)
I too thought for a moment that this was real-time until I noticed the absolutely frighting speed at which these trains would be passing through the tubes.
People waiting at a station would be sucked onto the tracks by the vortex created in the wake of a passing train. The front of the trains would probably be red hot with friction, while the passengers would be screaming until their train reached the end of the line, where it would pass out of existence, presumably into another dimension.
That is, until god slowed reality back down to 1x speed.
I don't know if VBB used this, but most transit agencies publish their data in two standard formats these days GTFS for static schedules and GTFS-real time for real-time data. Any application you build around these formats would immediately scale to pretty much every big city.
Google maps and Apple maps provide transit directions in their apps using GTFS and GTFS real time data (partly the reason why Apple maps was able to add transit directions feature so easily - Google had to deal with the transit agencies years before that and convinced them to publish data in open source standard formats).
VBB has been publishing GTFS (Static/Schedule) data for almost 10 years now. [1][2]
But there is no (truly open) realtime data (e.g. GTFS Realtime or SIRI) available because their API [3] - requires signing a draconian contract (e.g. ridiculous liability clauses, no permission to pass the data on in any form), and - API works individual vehicles/trips, so you'd have to poll every single one out there to get the equivalent of a GTFS-RT dataset.
There is an unofficial API though [4][5] that is de-facto open, and I have built a tool that pools the data and creates a GTFS-RT feed. [6]
[1] https://daten.berlin.de/datensaetze/vbb-fahrplandaten-gtfs [2] https://www.golem.de/news/open-data-verkehrsverbund-berlin-b... [3] https://www.vbb.de/vbb-services/api-open-data/api/ [4] https://github.com/public-transport/hafas-client/tree/5.25.0... [5] https://github.com/public-transport/transport-apis/blob/8e05... [6] https://github.com/derhuerst/berlin-gtfs-rt-server
Agreed on the minimetro feel!
I thought it was live too, I wonder if there's a way to do that? I like that you can see both the s and u bahn, though I kind of wish the abstract map would carry over.
Thanks a lot for the feedback!! The "live mode" is already developed using hafas-client[1] and VBB-API[2]. I just asked VBB to give me API access, I'll release the feature when I get it. If you are interested, VBB already made a live map[3]
1: https://github.com/public-transport/hafas-client 2: https://www.vbb.de/vbb-services/api-open-data/api/ 3: https://www.vbb.de/fahrinfo/
Author of hafas-client here!
Do you know about v5.vbb.transport.rest's /radar API [1]? Because it wraps VBB's de-facto-open unofficial API [2][3], it doesn't require authentication or even signing a contract.
If you have problems using it, please get in touch with me!
[1] https://v5.vbb.transport.rest/api.html#get-radar [2] https://github.com/public-transport/hafas-client/tree/5.25.0... [3] https://github.com/public-transport/transport-apis/blob/8e05...
Hi, I know you! You're hard to miss when working on public transportation. Very happy to see you're looking at my project! I sent you an email.
v5.vbb.transport.rest's frames were missing something I needed, if I recall correctly. With a fork of hafas-client, I got something to work okay. I was going to release it too, but then I realised I should use another user agent than 'my-awesome-program' which only VBB can provide, I think.
> v5.vbb.transport.rest's frames were missing something I needed, if I recall correctly. With a fork of hafas-client, I got something to work okay.
It would be great if you could create an Issue in hafas-client about this, so everyone can benefit from the changes.
> I realised I should use another user agent than 'my-awesome-program' which only VBB can provide, I think
If you're talking about hafas-client: No, you can use anything! It's merely about being transparent towards VBB who/what is using their API, but they don't have to approve it beforehand; They can't in fact, because the "mobile" HAFAS API just uses a static auth token.
Oh okay. Here is an old version of Ubähnchen with the toggle for "live mode / planned mode" on the top right: https://ubahnchen-inona1te6-lzear.vercel.app/?live The URL parameter still works in the current version by the way.
When I changed 'my-awesome-program' to 'ubahnchen' or something else when creating the hafas-client, it stopped getting valid responses. So I thought I should wait for VBB to give me an ID that works.
> When I changed 'my-awesome-program' to 'ubahnchen' or something else when creating the hafas-client, it stopped getting valid responses.
Please report this as an Issue in the hafas-client repo, so we can discuss this further.
> So I thought I should wait for VBB to give me an ID that works.
This is not how it works: - The official VBB API is an entirely different API, which they give you an auth token for when you ask. - hafas-client uses the "mobile" API, which has a static universal auth token. But it sends a (slightly randomised) User-Agent in order to communicate who/what is making requests. It might be that some User-Agents are blocked.
There is definitely a way to do it, actually the Munich S-Bahn has a realtime map : https://www.s-bahn-muenchen.de/fahren/live-map - not as smoothly animated though, and I'm not sure if the data used there is publically available. As an Easter Egg, the "50th anniversary" train (photo here, but the article is paywalled: https://railcolornews.com/2022/04/26/de-expert-s-bahn-munche...) is highlighted on the map.
Yeah the ridiculous speed confused me for a little bit before I saw the “x50“ up in the corner.
This is really great, and despite saying it’s desktop optimized it worked great on my iPhone.
Love it.
The problem with Berlin is than there are many operators for public transport by train:
* U-Bahn, for the subways (underground & aerial)
* S-Bahn, for sub-urban lines (mostly aerial)
* Traway in est-Berlin
A map, live or not need at least to combine the U-Bahn and the S-Bahn, (and if possible the tramway too), because you generally need to use both networks (with the same ticket) to travel. Staying in only one of the network is just not practical.
It's such a shame that the official Tram network map [1] almost fits the U-Bahn/S-Bahn map [2], but not exactly.
My assumption is that, when BVG designed these, they had separate maps in mind already early in the process, because including all station names on a tiny printed map is not feasible. With those transparent maps at the trams' windows though, or especially with a digital zoomable map, this would be completely feasible.
According to a BVG email from a few years ago, there isn't even a machine-readable version of this map, which is why I hand-digitised it. [3] So sad because the creativeness of the internet combined with a "remixabe" [4] (or at least forkable) version would likely kick off cool projects!
If anyone wants to attempt merging them, please open an Issue in [5] to let me know!
PS: Do you know about the (experimental) BVG bus map? [6]
[1] https://www.bvg.de/dam/jcr:d45105f2-6752-4ec5-b882-893657205... [2] https://www.bvg.de/dam/jcr:60a89e3b-f88d-4d48-b8a6-98ab340ad... [3] https://github.com/derhuerst/bvg-topological-map/issues/7#is... [4] https://github.com/derhuerst/remix-bvg-map-frontend [5] https://github.com/derhuerst/bvg-topological-map [6] https://www.bvg.de/dam/jcr:ee4647c3-ce1e-4b0a-9546-b1848b85e...
Thanks for the experimental bus map, I wasn't aware of that one!
How about this one? It also includes the rest of Germany:
Even though it is a great project/product, note that it does not have realtime data in Berlin/Brandenburg. It interpolates the position based on schedule data [1].
[1] I assume based on https://daten.berlin.de/datensaetze/vbb-fahrplandaten-gtfs
Aw, too bad. Here I was, already getting excited that they had real-time data.
AFAIK they do in some places where realtime data is available under and open license and in an acceptable format, e.g. in Switzerland.
shameless plug: I build a tool that polls VBB's (or any other compatible) API and produces a GTFS-Realtime feed. [1]
Thank you for posting this: This also has the Danish real time data presented in a much cleaner way than the various web services of our local operators.
This exists, built by the VBB: https://news.ycombinator.com/item?id=32647874
Note that this also just interpolates the vehicles' positions based on their delay, which in turn is calculated based on periodic pings that the vehicle sends AFAIK.
So the map does not show realtime positions in the same sense as e.g. HSL's trip planner does. [1][2]
[1] In the departures section on the left, tap on one of the upcoming departures to see the vehicle in realtime: https://reittiopas.hsl.fi/terminaalit/HSL%3A1000105?locale=e... [2] https://digitransit.fi/en/developers/apis/4-realtime-api/veh...
There's actually a button in the upper right corner to enable both S+U Bahn! Although the app gets a little sluggish for me when I enable them both.
When you say "operator": isn't it all BVG?
The S-Bahn is run exclusively by the DB subsidiary S-Bahn Berlin
Looks great!
If author wants some inspiration then this tokyo map is awesome:
In the Shinjuku city hall many years ago there was an animation showing how population desitiy changes in Tokyo during one day. It was absolutely mindblowing, but I have never been able to find it online.
If someone happens to know where I can find this animation I would be really grateful.
Thanks for sharing this! It will definitely be helpful, as I am considering updating my map to use WebGL.
Wow, it even includes weather (rain) and airplanes.
Reminds me of the official live map "Livekarte" at https://www.vbb.de/fahrinfo/
For those like me who just see a regular map, click on "Livekarte & Multi-Mobilität" on the right, then "Livekarte", and then "An".
Extremely slow for some reason in Firefox on Mac OS for me
Same here. A profile suggests that most native time is spent rendering the backdrop shadow of the text rendered to the canvas, and most of the remaining CPU time is spent on the drawText Javascript call.
Looks like Mozilla has something to optimize!
Totally unusable in Firefox on Windows 10 as well.
Same story in Librewolf on Arch Linux.
Buses and subway positions for Hamburg: https://hvv.live
I love it. I'm from Poland and lived for a while in Warsaw, where public transport also has all this kind of tracking, BUT the operator when asked about making this data available to travelers, he replied something like "Why would people need it? It's internal data and it will stay like that".
It's super smooth on Chrome, but it's doing (say) 1 frame per second on Firefox.
Same for me, even I set "layers.acceleration.force-enabled" to true. Chrome and Chromium are smooth.
EDIT: Turning "High Resolution" (in the settings of the webpage on top right) off and on seems to fix the issue somehow? It's smooth now, but reloading takes it back to choppy.
It's the station names for me.
It's definitely a website bug, as goes from 1 FPS to smooth if you go to S+U and back to U again. (debugger didn't help, but it's all minified anyway)
The slowness in firefox comes from the station name drawing. Going from U to S+U and back again seems to reset the setting for drawing them. The settings option for drawing the station names is somewhat buggy.
To optimize this the text should probably be drawn to another canvas/surface and layered behind the main one and not be updated that often.
Not even 1 FPS on my Firefox and it's also eating CPU like nothing. Good thing: This kind of simulates the sound of the subway.
(Nevertheless: Beautiful!)
On Safari the animations are smooth but mouse clicks are barely registered or only after a few seconds.
it's maxing out the GPU on my M1
It's also smooth for me (also Chrome) in "U-Bahn only" mode, but when I switch to "U+S", it's noticeably less smooth (10 fps?). It gets better if you deactivate the "city map background" in the settings.
Works fine on Firefox for me
Which version on which OS?
103.0.2 on Windows 10, with NVIDIA GPU
Try clicking on the S+U on the right. In Chrome it’s super smooth on the U view, but somehow when you switch to the S+U one it’s very laggy.
With firefox on android, even though it says it isn't optimized, it runs perfectly smooth even in s+u mode
It's getting choppy for me in Chrome when enabling the S and U Bahn mode
Worth checking that Firefox is (also) using the GPU correctly.
How would I check that?
Same for me (FF103.0.2 on Ubuntu 22.04)
Smooth for me on FF (desktop).
Seems good for me
I did something very similar to this in 2012:
http://philholden.me.uk/kraya/routemap/
I wanted to simply draw and SVG of the bus route map. The timetable had the lat long of stop positions. I was using d3 so having drawn the map it almost zero effort to animate the busses. It was just a standard transition with a delay and a duration.
Well executed side project with a great name! :) Where do you get the data from?
It's mentioned in the 'about' page (click the 'i' link) - https://news.ycombinator.com/reply?id=32647603&goto=item%3Fi...
> Schedules are extracted from the GTFS data of the VBB (loaded on Fri, 26 Aug 2022 13:11:26 GMT) which contains arrival time and departure time of every hour of every day. The movement of the train is simulated at constant speed between stations.
An official live map with subway and tram positions in Nuremberg: http://infoportal.vag.de/InfoPortal/
Ha! I worked on that, nice seeing it here
Nice, only thing is it's not currently accurate. The U1 and U2 have temporarily combined into the U12.
Thanks for the comment! It made me realize I forgot to move a file. It's fixed now (you might need to clear your cache). And the live data toggle is now enabled.
Thank you for the follow up and fix. It's a great project you have there!
This has exited forever for all parts of the VBB https://www.vbb.de/fahrinfo/ You can turn on individual forms (S-Bahn, U-Bahn, Bus, Ferries etc) of tranport on the right hand side menu.
On a tangent, buying a ticket for a tourist is a real pain on the Berlin system. You have to know what a zone is, what specific station etc. would be great to have a standard fare like in NYC.
https://tracker.geops.ch similar app for many major cities around the world. Sharing for ideas.
Mini Metro IRL. Kudos!
so cool! nice work! maybe Munich is next? :)
the S-Bahn there actually has a DB-provided live-map https://s-bahn-muenchen-live.de
I don't know, if they have an open API though (Google of course gets access. Which is......)
There is a real Berlin live map of subway, bus and railway at: https://www.vbb.de/fahrinfo/ by the operator.
Seems no english version available, you have to
- click upper right corner "Livekarte"
- click on the menu again "Livekarte"
- select means of transport: radio buttons for subway, railway etc
- zoom in to see subwayNote that this just interpolates the vehicles' positions based on their delay, which in turn is calculated based on periodic pings that the vehicle sends AFAIK. So the map does not show realtime positions in the same sense as e.g. HSL's trip planner does [1][2]. In fact, the location and speed of a vehicle can be very off.
Personally, I loathe this map, because it gives an impression of accurate data, even though it isn't that precise. VBB gets credit for providing supposedly reliable data, even though they could (and should, given amount of tax money spent) provide much better data!
[1] In the departures section on the left, tap on one of the upcoming departures to see the vehicle in realtime: https://reittiopas.hsl.fi/terminaalit/HSL%3A1000105?locale=e... [2] https://digitransit.fi/en/developers/apis/4-realtime-api/veh...
Thanks! I used the search to find it but always got to the German version.
Live map showing trains on the London Underground
What's the purpose of animation here?
It seems to have no information about actual train position, or am I missing something?
I think it is just a toy :)
But the trains are sort-of-actual positions based on the time in the top right hand corner and the latest estimated arrival times, but time is moving forwards at 50x speed.