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.
Shameless vibe-coded plugs for my own regular usage:
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...
Been using a slightly modified Tufte template for my vibed small apps, but this is much better.
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.
Interesting project. I might "steal" that for teaching purposes.
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.
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.
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.
Any chance you would be willing to share the source code?
Did the LLM suggest using some pre-existing standard like MBTiles for the tiles?
My new favorite insult towards web services that are badly done is: "even fully vibe-coded Codex would've done better".
