6 ms·
Show HN: An interactive map of Tolkien's Middle-earth
An interactive map of Tolkien’s Middle-earth, with events from across the legendarium plotted as markers.
I have been commuting a fair bit between the East and West coast, and thanks to American Airlines' free onboard WiFi, I was able to vibe-code a full interactive map of Middle-earth right from my economy seat at the back of the bus.
It's rather amazing how much an LLM knows about Tolkien's work, and it was fun to delve into many of the nooks and crannies of Tolkien's lore.
Some features:
- Plot on the map the journey of the main characters in both The Hobbit and The Lord of the Rings.
- Follow a list of events in the chronological Timeline
- Zoom in on the high-def map and explore many of the off-the-main-plotline places
- Use the 'measure distances' feature to see how far apart things are.
I also had a lot of fun learning about tiling to allow for efficient zooming.
If you are anything like me, this should provide a fun companion to reading the books or watching the movies (note that on this site, I followed the book narrative, and did not include Peter Jackson's many departures)
If you get the chance to check it out, I would love more feedback, and if there is demand, I might do the same for Game of Thrones.
- bananaflag 6mo agoI 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.
- frasermarlow 6mo agoHey thanks. Good call, I will have Claude figure out the years for each event that can be pinned down.
- twostorytower 6mo agoThis 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.
- frasermarlow 6mo agoYep, that zoom thing is a bit fiddly on mobile in particular. I will see what I can improve.
- shdh 6mo agoUsing a tile server for this feels hilarious
- frasermarlow 6mo agoI added a comment above about the use of https://leafletjs.com/ https://leafletjs.com/ if you are interested.
- topherjaynes 6mo agoOne doesn't simply vibe code into Mordor!(but seriously love this)
- frasermarlow 6mo agoLOL
- kilbey1 6mo agoMad respect; I've been working on building maps and it's a LOT harder than it might seem.
- frasermarlow 6mo agoHonestly 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.
- kilbey1 6mo agoYes, I ran across that issue. There's also been the issue of collision avoidance for me! (By the way, check out the superpowers brainstorming skill and yume--implementer skill -- I would have gone insane without them)
- balajeekalyan 6mo agoWow! this is so detailed. You are putting vibe-code to genuine use.
- frasermarlow 6mo agoBest use case I have found so far :-)
- pants2 6mo agoWould love just for fun to feed this through an image generator to make it look like satellite imagery or maybe even Google Maps.
- frasermarlow 6mo agoThe original map was found here: https://www.reddit.com/r/lotr/comments/18fy0ga/middleearth_map_on_the_movies_8k_7680_4320/ https://www.reddit.com/r/lotr/comments/18fy0ga/middleearth_m... - give it a whirl!
- frasermarlow 6mo agoHey @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=satellite https://middle-earth-interactive-map.web.app/index.html?view...
- timvdalen 6mo agoOof, zooming in on Fangorn Forest set off my trypophobia!
- pants2 6mo agoHi @frasermarlow, this is a nice start! Of course the water here is land which is an issue, but I think it's fun. I think the brown color of the map made it all desert when it should probably be more New Zealand - like. Might not be super doable with img2img but I'll definitely check out any other attempts!
- frasermarlow 6mo agoYep. When I get some time I will do a metadata layer to clarify water vs land vs prairies vs forest etc... then I will rerun the process with that additional Context. Should be fun. Thanks for the suggestion.
- fatcullen 6mo ago
- blevinstein 6mo agoArda 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?
- frasermarlow 6mo agoWell 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.
- sjdv1982 6mo agoNice map! The First Age / Second Age boundary is not unlike the K/T boundary... Compared to that, Second Age / Third Age isn't that different (places like Dunland and Tharbad were forested, according to Treebeard). So if you wish to make the map a bit more ageless, you could just add a few alternate names. - Dol Guldur was Amon Lanc in the Second Age - Lothlorien was Laurelindorenan in the Second Age - Mirkwood, Minas Tirith and Minas Morgul are late-Third-Age-isms too.
- strider_2018 6mo agoI made an account just to say thank you. Really great work. I would love to see a map of the first age events.
- frasermarlow 6mo agoIf I can find the right source materials, then challenge accepted.
- imwally 6mo agoAnyone know a decent place where I can buy a giant print of this for my wall?
- frasermarlow 6mo agoGood 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.
- frasermarlow 6mo agoThe source image is here if it helps - https://i.redd.it/r8403tg0wo5c1.jpeg https://i.redd.it/r8403tg0wo5c1.jpeg.
- vldszn 6mo agoLooks very good! Thank you
- frasermarlow 6mo agoThanks. Being on Hacker News is fun. But it turns out to be expensive too if your project takes off and Firebase charges for downloads!
- vldszn 6mo ago:)
- freakynit 6mo agoAs 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/ https://llm-token-cost-calculator.pagey.site/ 2. https://metrics-memory-usage.pagey.site/ https://metrics-memory-usage.pagey.site/
- frasermarlow 6mo agoYeah, 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/ https://frasermarlow.github.io/vibe-star-chase/
- freakynit 6mo agoyep.. 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.
- emaro 6mo agoI don't mind people sharing their plugs about related things, but don't you think the connection here is a bit far-fetched? Imo we're past the point where being vibe-coded is an interesting link. This is a thread about an interactive map of middle earth — not about vibe-coding, token usage or anything like it. Imagine if everyone posted their vibes projects now...
- freakynit 6mo agoYou're right. I got too excited to share. Couldn't delete now because of HN rule (1 hour), but will keep in mind. Thanks..
- 6mo ago
- jcstryker 6mo agoGreat work! A window into one of the most important universe we have created. Any chance you would be willing to share the source code?
- frasermarlow 6mo agoSure, it's public; https://github.com/frasermarlow/middle-earth-map https://github.com/frasermarlow/middle-earth-map
- zhichuanxun 6mo ago[dead]
- randomeel 6mo agoAmazing ! But it did kind of spoil the rest of the books since i am reading LOTR for the first time...
- frasermarlow 6mo agoAh. Yeah sorry. I could add a "spoiler alert!"
- ivolimmen 6mo agoThe 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.
- cheschire 6mo agoLLMs are a sum of their parts. Whatever feelings you had towards OP can still be given freely to the creators of the parts.
- frasermarlow 6mo agoI totally get that. Sorry if it was a letdown. In reality I built this map as part of a personal exploration of the lore and background of Tolkien's lore, because i am fascinated by it. This felt like a productive way to share my learnings with others in a fun way. I certainly learnt a lot from going through the process.
- 4ndrewl 6mo agoLooks 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?
- frasermarlow 6mo agoI added a comment above about the use of https://leafletjs.com/ https://leafletjs.com/ if you are interested.
- chantaiman_fnf 6mo agoWish 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!
- aquir 6mo agoIt'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.
- frasermarlow 6mo agoYep, that is correct, well spotted. See the thread with blevinstein below on some more details related to that.
- tuom1s 6mo agoThis is amazing, and only recently I started to read the books. So this map will actually be handy to follow through the story!
- frm88 6mo agoThis is awesome, thank you. I will play around with this all day :)
- devcraft_ai 6mo ago[dead]
- block_dagger 6mo agoInteractive is generous - more like labeled. Interesting but was expecting more.
- frasermarlow 6mo agoOpen to ideas on how more 'interactive' we can make it. But yeah, fair point. Maybe it's just more 'annotated'
- frasermarlow 6mo agoPS: There have been a few questions about the tiling system used. It's based on https://leafletjs.com/ https://leafletjs.com/ and you will find it all in the Github repo. Its one of the more interesting parts of the project: https://github.com/frasermarlow/middle-earth-map https://github.com/frasermarlow/middle-earth-map The tiles were pre-generated from the source image using generate_tiles.py — a Python script that slices the big map into 256x256 JPEG tiles at three zoom levels . Leaflet loads them with zoomOffset: 2, so directory zoom 0 = Leaflet zoom -2, directory zoom 2 = Leaflet zoom 0 (the highest native zoom). Below and above that range, Leaflet scales tiles up or down automatically. The satellite tiles were generated by generate_sat_ai.py using Stable Diffusion img2img. It assembles the zoom-2 tiles into a full image, processes 512x512 overlapping patches through SD, blends them back together, then slices into the tile pyramid.
- Prime_Axiom 6mo agoThis is pretty cool man, I appreciate you sharing what you did on GitHub. I’m just a codelet script kiddie crashing around the Google Maps api for fun and I love seeing projects like this.
- frasermarlow 6mo agoIf you put in a credit card, look out, the Google maps API can get very expensive very quickly!
- ComSubVie 6mo agoThe generated satellite tiles are interesting. The sea is very dry. And some mountains are looking very strange. At least for some places (e.g. Mount Doom) the AI should have been able to generate more "realistic" images. Interesting project. I might "steal" that for teaching purposes.
- frasermarlow 6mo agoHa ha. Yeah. That was a first wild attempt. If I get time I will figure out how to fine tune the mock-satellite imagery to properly reflect ocean, lakes, trees, castles etc.
- bdeol22 6mo agoThe tiling pipeline is the easy part to underestimate; documenting how you sliced and served zoom levels is genuinely useful for anyone doing map-style UIs. Nice work.
- ffwebmaster 6mo ago[dead]
- Pooge 6mo agoAnd all this without OpenGL! Kudos. My new favorite insult towards web services that are badly done is: "even fully vibe-coded Codex would've done better".
- starkparker 6mo agoLotrProject[1] has several interactive maps and visualizations, including a family tree, time/distance chart of the fellowship's journey, maps of Beleriand and Middle-Earth, historical timeline maps, and demographic posts on Middle-Earth's inhabitants. Sadly doesn't seem to have been maintained recently, the cracks in WordPress are starting to show, and AFAICT the source content isn't open. http://lotrproject.com http://lotrproject.com
- frasermarlow 6mo agoThanks, I will check it out. Good news is, web hosting tech aside, the content should not go out of date!
- frasermarlow 6mo agoUgh, yeah, I see what you mean - much of the project is running into backend errors.
- deleted 6mo ago[deleted]
- xg15 6mo agoThis is really cool! Some nitpicks/ideas: A few of the markers seem to be misplaced. I just noticed with the Cirith Ungol markers and Henneth Annûn, which are too far north and east compared to their location in the books (Cirith Ungol should be more or less directly above Minas Morgul; Henneth Annûn would be closer to the riverbank I think and in any case definitely not inside the mountain range) There is also a bit of a mix of different semantics with the markers, I think. I see at least three different categories: Book plot lines, historical events and locations. The Hobbit and LotR markers seem to be mostly the first category, Silmarillion the second and Appendices the last (but not always). This makes sense, but is also a bit confusing, as a lot of locations only have book chapter or event descriptions, but no distinct description of the location itself. Some locations also have multiple markers if multiple things happened there. I wonder if this could be structured a bit more, e.g. a marker for each location, with text subsections or "sub markers" for events and plotlines in that location. Also, why the map looks good, I'd experiment with a few different ones (like the one from the books) that are more detailed. E.g. in this map, most of the roads are missing, which makes the markers for Tharbad or the Crossroads a bit awkward. The crowning achievement would be of course to integrate Karen Wynn Fonstad's "high-resolution" maps from the atlas - but I imagine copyright makes that impossible. The satellite view is a really cool idea, but, as others have said, doesn't reall work right now. (I think this might be an interesting LLM benchmark: How well can a model generate a satellite view of middle earth that is both accurate to the map and to the descriptions in the books - e.g. not putting any vegetation into Gorgoroth, depicting the various ruined cities as ruins, etc) But in any case, it's a really fun and well-designed project.
- frasermarlow 6mo agoThanks for the thoughtful feedback. Yes, i literally threw the faux-satellite version together in response to suggestions on this thread. Plenty of room for improvement there! Thanks for the notes on marker positioning. Let me look into that. Each source map has its pros and cons, but Fonstad's canonical version would be ideal. Copyright could be an issue as you point out.
- nc1zdev 6mo agoThis is so cool, I love it. Probably need to enhance the rendering so it doesn't feel as laggy when panning or zooming. But still amazing
- frasermarlow 6mo agoThanks. Performance will depend on your internet connection as it progressively loads the tiled images.
- starwalkn 6mo agoThanks for the work! It looks very good, it's a pity that it wasn't there when I read Tolkien the first 2 times.
- frasermarlow 6mo agoWell hopefully it we be useful on your 3rd read :-)