It's great but it's the Map of Middle-Earth in the Third Age, right? During the First and Second Ages Middle-Earth looked very different and this makes showing events from the Silmarillion for example very confusing.
The first thing that poped in my head when seeing this: it must have taken quite some time to thoroughly go thought all this to make it. The developer must have a huge passion for LOTR. Seeing all the message that it was build using AI it hugely deminishes this feeling.
Still a very nice looking map.
As much hate as vibe-coding gets (and most of it is justified), it has also allowed all of us to vibe-code our thoughts to small single-page web apps very easily.
Shameless vibe-coded plugs for my own regular usage:
Yeah, for sure. Vibe coding has it's place, I think. It's the people who pretend to build production-ready systems that are just hollow shells that give it a bad name. It is what it is.
I vibe-coded this game and I take pride in it: https://frasermarlow.github.io/vibe-star-chase/
yep.. vibe-coding works, but, only up to a certain housands of lines of code max, that too, with bigger models.. beyond that, it starts to make absolutely stupid mistakes and starts to screw up with the architecture and general layout of the project all while leaving huge security holes. You need to guide it beyond that.
Arda was supposed to be drastically changed after the First Age. This map is from the Second/Third Ages. Do the events from the First Age map currently into what is shown? Do some have to be excluded?
Well I included 13 Silmarillion events, but most are actually Second Age events that map perfectly fine. Three of them are First age so it's a bit fudgy.
The project has no Beleriand events... they literally cannot be placed because Beleriand sank beneath the sea after the War of Wrath.
Cuiviénen it tricky. The Sea of Helcar where it sat was reshaped when Morgoth's strongholds were taken out, so that is approximate.
Would love to make age-appropriate (ha ha) maps, but I only had this one to work from.
This is awesome! Can you make the zoom in and out smoother? I have to pinch every single time to get to the next zoom level instead of continuously zooming as I pinch.
Good question. Check out Reddit - that is where I found the original. I understand it was made for the movies but I have not been able to locate the exact source or a place to order it from.
Honestly the hardest thing for this was getting the pins in the right place. I had Claude create a tool for me to get the location and have it correct placements. Even after a dozen 'pins' were on the map, it still had problems placing the next pin (relative to the ones it had). Claude has gotten better and honestly I had not figured out Claude in the browser when I built this.
It's great but it's the Map of Middle-Earth in the Third Age, right? During the First and Second Ages Middle-Earth looked very different and this makes showing events from the Silmarillion for example very confusing.
The first thing that poped in my head when seeing this: it must have taken quite some time to thoroughly go thought all this to make it. The developer must have a huge passion for LOTR. Seeing all the message that it was build using AI it hugely deminishes this feeling. Still a very nice looking map.
Wish I had this thing when I was young. Like... 25 years ago? lol I had to turn back to the map page over and over... Thanks for the work!
Looks really nice. There are tons of interactive Middle Earth maps, but this looks really polished.
Did the LLM suggest using some pre-existing standard like MBTiles for the tiles?
Amazing ! But it did kind of spoil the rest of the books since i am reading LOTR for the first time...
As much hate as vibe-coding gets (and most of it is justified), it has also allowed all of us to vibe-code our thoughts to small single-page web apps very easily.
Shameless vibe-coded plugs for my own regular usage:
1. https://llm-token-cost-calculator.pagey.site/
2. https://metrics-memory-usage.pagey.site/
Yeah, for sure. Vibe coding has it's place, I think. It's the people who pretend to build production-ready systems that are just hollow shells that give it a bad name. It is what it is. I vibe-coded this game and I take pride in it: https://frasermarlow.github.io/vibe-star-chase/
yep.. vibe-coding works, but, only up to a certain housands of lines of code max, that too, with bigger models.. beyond that, it starts to make absolutely stupid mistakes and starts to screw up with the architecture and general layout of the project all while leaving huge security holes. You need to guide it beyond that.
One doesn't simply vibe code into Mordor!(but seriously love this)
LOL
I notice the map is the one from the movies (it shows the Orocarni a bit too close, but it's nice they appear on the map).
Maybe when describing historical events you should also put the year (it is given only for some of them).
Anyway, very nice work! I think it's appropriate especially for casual fans (especially movie fans) to delve (sorry) deeper into the lore.
Hey thanks. Good call, I will have Claude figure out the years for each event that can be pinned down.
Great work! A window into one of the most important universe we have created.
Any chance you would be willing to share the source code?
Sure, it's public; https://github.com/frasermarlow/middle-earth-map
Arda was supposed to be drastically changed after the First Age. This map is from the Second/Third Ages. Do the events from the First Age map currently into what is shown? Do some have to be excluded?
Well I included 13 Silmarillion events, but most are actually Second Age events that map perfectly fine. Three of them are First age so it's a bit fudgy. The project has no Beleriand events... they literally cannot be placed because Beleriand sank beneath the sea after the War of Wrath. Cuiviénen it tricky. The Sea of Helcar where it sat was reshaped when Morgoth's strongholds were taken out, so that is approximate. Would love to make age-appropriate (ha ha) maps, but I only had this one to work from.
Using a tile server for this feels hilarious
Wow! this is so detailed. You are putting vibe-code to genuine use.
Best use case I have found so far :-)
Would love just for fun to feed this through an image generator to make it look like satellite imagery or maybe even Google Maps.
Hey @pants2, I put something together for you. It's pretty rough, but if you take the time to respond here, that will be the motivation I need to clean this up and make it work properly. https://middle-earth-interactive-map.web.app/index.html?view...
Oof, zooming in on Fangorn Forest set off my trypophobia!
The original map was found here: https://www.reddit.com/r/lotr/comments/18fy0ga/middleearth_m... - give it a whirl!
This is awesome! Can you make the zoom in and out smoother? I have to pinch every single time to get to the next zoom level instead of continuously zooming as I pinch.
Yep, that zoom thing is a bit fiddly on mobile in particular. I will see what I can improve.
Anyone know a decent place where I can buy a giant print of this for my wall?
Good question. Check out Reddit - that is where I found the original. I understand it was made for the movies but I have not been able to locate the exact source or a place to order it from.
The source image is here if it helps - https://i.redd.it/r8403tg0wo5c1.jpeg.
I made an account just to say thank you. Really great work. I would love to see a map of the first age events.
If I can find the right source materials, then challenge accepted.
Looks very good! Thank you
Thanks. Being on Hacker News is fun. But it turns out to be expensive too if your project takes off and Firebase charges for downloads!
Mad respect; I've been working on building maps and it's a LOT harder than it might seem.
Honestly the hardest thing for this was getting the pins in the right place. I had Claude create a tool for me to get the location and have it correct placements. Even after a dozen 'pins' were on the map, it still had problems placing the next pin (relative to the ones it had). Claude has gotten better and honestly I had not figured out Claude in the browser when I built this.