fp.

deck.gl based visualiser of the TFL Api + National Rails to be able to track (with minimal drift) a train along the way in London and to the nearest airports. If you pick one from any platform in https://nexttrain.london basically you can share your train journey along the rails. Build to test Cloudflare workers and their infra along with deck.gl performance that is incredible in my opinion.

Comments

kentonv•3d ago

This is really cool!

Quick suggestion: When not tracking a train, the mouse wheel should zoom into / out from where the cursor is pointing, rather than the center of the window.

mgranados•2h ago

thanks! that's a great suggestion will implement

fredley•4h ago

Very nice, but the map seems to be in the wrong position vs. the trains/3d elements.

philipwhiuk•4h ago

I'm curious what the 3D model source is - the Gherkin is kinda weird.

0l•4h ago

OpenStreetMap - seems to be done with concentric circles, e.g. https://www.openstreetmap.org/way/1365317072 and a dome on top

There is a good wiki page on this: https://wiki.openstreetmap.org/wiki/Simple_3D_Buildings

jrrv•4h ago

The planes were a surprise

mgranados•2h ago

hehe thanks!

dmazin•4h ago

It would appear you are missing the High Barnet branch of the Northern line.

uukelele•3h ago

And the Reading branch of the Elizabeth line

mgranados•2h ago

thanks for feedback i'll have a look!

jdswain•30m ago

Looks like many (all?) branches are missing. Central line doesn't have the Ealing Broadway branch.

gowld•4h ago

The train paths are drawn on a 2D layer above the buildings, not at z-index that matches the proper 3-D position. So the paths appear to weave around and over the tops of buildings.

mgranados•2h ago

I meant to make it feel like the tube ones felt "underground" by some metres i'll have a look thanks

sdoering•3h ago

Having just taken the Elisabeth Line to LHR T5 and sitting here, this was fun. Thanks.

Edit: Is there a Repo to look at and learn from this?

mgranados•2h ago

<3 thanks!! i'll clean it and share here sometime soon

Falimonda•3h ago

How do I drive the train? Arrow keys not working :(

mgranados•2h ago

It's just following api data for now. That'd be a real cool feature for backlog!

darknavi•3h ago

I'd love to see a view with all/many trains. In London I was constantly wondering what the criss-cross of underground lines looked like.

mgranados•2h ago

I saw a project like that here in hn recently for all uk trains even. it'd be pretty cool to extend this to support that, busy stations might be visually confusing, thanks for suggestions

ohjeez•3h ago

This is incredibly cool. I had it open on my desktop for most of the day.

TheOtherHobbes•3h ago

Interesting but quite buggy. Example: mouse dragging seems trapped in a fairly small area.

mgranados•2h ago

Ah yeah i tried anchoring to the train with a threshold for panning around i'll try smoothing it. thanks for trying it!

ampdepolymerase•1h ago

Can you add support for touch?

hokkos•3h ago

There seems to be some parallax issues between your trip layer and your 3D Tiles layer, but nice usage of deck.gl.

mgranados•2h ago

thank you! i'll have a look

taylorius•2h ago

Is it not that certain train lines are somewhat deep underground? The Piccadilly line swims with respect to the ground in the centre of town, when it is below ground. Further out where lines are at the surface the routes stick to the ground correctly.

Leewen•2h ago

model rough but amazing. i cant do this

adecoster•1h ago

A bit buggy in term of tiles jonctions

Pigo•1h ago

This is a fun idea and interesting implementation. I know there's only so much an api can give you, but I'd love to see anything that gives more information or visuals of the surroundings.

mgranados•24m ago

thanks! you mean more 3d buildings? I'd love to explore that or more labels on things along the way?

IIAOPSW•1h ago

This is frustratingly close to amazing. Obviously you went through all the trouble of pulling all the data from all the trains and displaying them in 3d, but then lock our view on to just one train or one station while all that interesting information zips around in the periphery. The view port needs to be more free form...less on rails.

mgranados•23m ago

I'll have a note on this! Thanks a lot! a free form to browse the trains I think is definitely doable whilst keeping it performant

Cider9986•43m ago

Appreciate the vibecoded note.

mgranados•22m ago

Hat tip.

tamimio•35m ago

Neat! I chose victoria one and it was flying over the buildings!

mgranados•21m ago

I knew Victoria was fast but not so much! On a serious note it's meant to have a sense of being underground that maybe it's failing to convey. I'll check the line in more detail thanks.

ninjahawk1•23m ago

I guess I’m a train guy now

giancarlostoro•21m ago

Coworker used to have a specific stream up everyday, apparently he'd seen a car get pummeled by the train. Every now and then something interesting would be on the train. I saw military tanks and gizmos on one stream, was kind of neat.

mgranados•20m ago

There's planes by the airports too

Eduard•19m ago

using Google Pixel 7a with Chrome Android.

while the 3d buildings render properly, the trains' polygons have a flipped z-order: polygons that are supposed to be layered behind are actually in front.

nevertheless, great website!

mgranados•16m ago

tysm for the report ill have a look, tried some things to optimise for mobile, I'll check it more

Liquidor•15m ago

This is scary. I literally just had a dream last night wishing I could see the metro trains from above the ground in order to follow where the tunnels are under the buildings and all that. Wow.

mgranados•13m ago

Accuracy may vary, but it's great to see dreams come true!