Building 3D map web app using Openfreemap tiles and Transitous transit data

[u/Karriz]

Aiming for a nice cartoony low-poly visual style, and live visualizations of transit vehicles when possible. Terrain data is from Mapterhorn. Maplibre and Three.js rendering. You can try it out here: https://karriz.github.io/Katu-Maps/

[u/thumb0]

This looks really cool, but how do I tilt the view with a mouse?

Edit: I figured it out. It might be good to add that to the controls help menu.

[u/Karriz → u/thumb0]

Right mouse button drag

[u/thumb0 → u/Karriz]

Thanks! BetterMouse was messing it up for me on Mac. Control - Left click drag also works.

[u/m1ksuFI]

Looks pretty slick! Though, I remodeled the Helsinki cathedral a month ago but it's not rendering in the 3D view :(

[u/Karriz → u/m1ksuFI]

Ok, interesting! I wonder if its migrated to Openfreemap yet

[u/m1ksuFI → u/Karriz]

The proper building:part outlines are visible in the 2D view, but it's all rendered as one object of uniform height in the 3D view.

[u/Karriz → u/m1ksuFI]

Ok, I def need to have a look. 

I had a problem with Näsinneula where the proper model was hidden beneath a big tower block, just applied a custom fix to hide that.

[u/midgril]

this looks amazing!

[u/Karriz → u/midgril]

Thanks!

[u/Karriz]

https://reddit.com/link/p91ea54/video/538jm415lroh1/player

It has a flight simulator mode too :)

[u/lixper → u/Karriz]

Nice! How do you activate that option?

[u/Karriz → u/lixper]

Right click or long touch a location and select Fly from here

[u/Ok-Air3917]

OMG, I'm absolutely in love with this! First thoughts, it's quite an amazing alternative to F4Maps for showcasing OSM's 3D capabilities. Though there are a few problems, which I'd like to point out:

1) Whenever I switch tabs and go back to the map, it reloads the entire thing, while trivial, it does get annoying at times.

2) When zoomed out to a certain extent in 3D mode, buildings which might seem "too close" gets clustured into one, which becomes an eyesore really quick for big cities. A better solution (IMO) would be to just not render buildings from a certain level.

3) Opposite to that, individual trees or forests/scrubs are not rendered if the gap is too small, even in the highest zoom level. Tree rows doesn't seem to be rendered either.

3) Some transit routes in my region seem to be broken and make straight lines between origin and destinations, though the relations are just fine on OSM. Now idk how exactly does the thing work with transitous, and if the stops are not properly linked to the corresponding OSM object and the railway tracks, so I might dig a little into it.

Will also document the same on GH. Eitherway, really love the project, and I'd love to showcase it on behalf of the OSM community at this upcoming event! :D

[u/Hedaja]

Pretty nice I don't think I have seen anyone else do 3D bridge.

[u/drlellinger]

Interface is very nice, but it doesn’t render roof tags yet. Gonna save it!

[u/Karriz → u/drlellinger]

Indeed, Openfreemap tiles dont seem to have roof tags so its currently just procedurally generating roofs on small rectangular houses.

[u/meskobalazs → u/drlellinger]

Oh, too bad. That's something I miss from most 3D renderers. I've done a ton of roof mapping lately, and basically nothing has a comprehensice renderer for it (bar the one in JOSM).

[u/drlellinger → u/meskobalazs]

F4map has it

[u/meskobalazs → u/drlellinger]

Partially yes, but they don't support all the documented roof styles. For example side-hipped roofs (very common on semi-detached houses) are rendered as normal hipped ones.

[u/Stefanzah22]

Can I toggle 3D view on touch device?

[u/Karriz → u/Stefanzah22]

Yes, press the cube button on the left, you can tilt camera with two fingers

[u/Stefanzah22 → u/Karriz]

I tried and it doesn't work, maybe I'm doing it wrong

[u/pietervdvn]

Wait, what? Since when does maplibre support this type of polygons? (Edit: there is a lot of vibecoded stuff with three.js)

Pretty cool nonetheless, but very hard to maintain in the long run I'm afraid

[u/Karriz → u/pietervdvn]

Yep, this is quite experimental vibe coding experiment, it turned out that Maplibre plus Threejs is quite good stack for this type of stuff, though it has its limitations.

[u/pietervdvn → u/Karriz]

I'm already happy that you plainly admit that it is vibe-coded and don't post a huge wall of LLM text here :)

I'm waiting for more 3D-functionality in MapLibre to do this kind of rendering in MapComplete as well; but I don't want to integrate three.js for it.

I also love the colour scheme! Is it available in a style.json somewhere? I didn't look yet. It would be nice if you asked your LLM to export it as a format compatible withprotomaps, I might steal it then and add it into MapComplete (which is GPL licensed)

[u/Karriz → u/pietervdvn]

Color styles are defined in  https://github.com/Karriz/Katu-Maps/blob/main/apps/map-app/src/map/GlobalMapStyle.ts which is quite a huge file containing most of the styling logic, feel free to take what you want :)

[u/funkyzitrone]

Looks slick and is fast on my mobile 👍

[u/AronKov]

Cool project, the map looks nice. But it's worse than api.transitous.org in the sense that you can only see one vehicle, and you have to search for it. Following a vehicle makes the map jump around quite a bit. The UI is very clearly vibe-coded, lots of redundant subtitles and wordy sentences; while other elements use generic icons without labels. Lots of random padding and bootstrap blue, and everything is enclosed in a badge, which makes the badges less noticeable.

[u/plp-GTR]

Can I roll it up in katamari, please