Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Ubähnchen – Animated subway map of Berlin (xn--ubhnchen-1za.vercel.app)
278 points by Elzear on Aug 30, 2022 | hide | past | favorite | 102 comments



Nice! 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

https://xn--ubhnchen-1za.vercel.app/en/about


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:

https://i.imgur.com/BAhNQJd.mp4



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:

https://travic.app/?z=13&x=1493233.2&y=6894127.0


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]

[1] https://github.com/derhuerst/berlin-gtfs-rt-server


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:

https://github.com/nagix/mini-tokyo-3d


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 subway


Note 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

https://traintimes.org.uk/map/tube/


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.


[flagged]


xn-- domains are fallback Unicode compatibility domains for systems that don't support it. It's mainly seen in Asia. So it's not the intended representation of the domain name, that's ubähnchen.vercel.app

I think ubähnchen means little U-bahn.

It's interesting to see Germans are still very strict with their letter accents even in domain names. I'm from the Netherlands myself and because we mainly use US keyboards (there is a NL type but nobody uses it), accents are a PITA to type so people started leaving them out. These days they're almost extinct, as is the ligature for "ij". We're pretty pragmatic like that. Personally I wouldn't even care if we phase Dutch out for English, it's just much more useful on a global scale. But that's probably a step too far for most.


> Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something.


it's good critical comment if you can read, clearly saying the domain name is not memorable and readable, even the author understood it in his response and blames HN website for using different link than he submitted


> A good critical comment teaches us something.

It was not the case here. It was an ironic dissmissal of something that’s totally secondary to OP’s work. This is why you’ve been downvoted, not because you "stated facts".


The link I posted was https://ubahnchen.vercel.app but, because there is a redirection, HackerNews changed it automatically.

You can also memorize ubaehnchen.vercel.app


fair enough, but then the HN is the problem and I have no way knowing you posted correct (memorable) link


Sorry you faced downvotes. No offense taken.


I think the lesson here would be using only ordinary characters in domain names (then what HN does would not matter), if you (and I mean anyone, not you in particular) advertise domain with special characters people will be confused because some companies advertise domain with special characters while you should actually read it with normal characters and not literally plus there is quite a stigma that these special characters are used for malicious purposes to pretend they are different sites. Dunno what's situation in Germany but here in Czechia where we also widely use special Latin characters in language, but they are pretty much non existent from domain names, though sometimes you can see them and they mean you should strip the domain name in your head and type it without special characters.


That’s punycode encoding, defined in RFC3492(2003) but not getting much traction since.


Depends on how much you interact with non-ASCII domains. I see it relatively often.


ubähnchen.vercel.app seems quite memorable




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: