HN Explorer

Show HN: An interactive map of Tolkien's Middle-earth (middle-earth-interactive-map.web.app)

291 points by frasermarlow ↗ HN
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.

35 comments

[ 4.2 ms ] story [ 50.4 ms ] thread
bananaflag
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.

twostorytower
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.
shdh
Using a tile server for this feels hilarious
topherjaynes
One doesn't simply vibe code into Mordor!(but seriously love this)
kilbey1
Mad respect; I've been working on building maps and it's a LOT harder than it might seem.
balajeekalyan
Wow! this is so detailed. You are putting vibe-code to genuine use.
pants2
Would love just for fun to feed this through an image generator to make it look like satellite imagery or maybe even Google Maps.
blevinstein
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?
strider_2018
I made an account just to say thank you. Really great work. I would love to see a map of the first age events.
imwally
Anyone know a decent place where I can buy a giant print of this for my wall?
vldszn
Looks very good! Thank you
jcstryker
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?

randomeel
Amazing ! But it did kind of spoil the rest of the books since i am reading LOTR for the first time...
ivolimmen
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.
frasermarlow
I 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
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?

chantaiman_fnf
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!
aquir
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.
tuom1s
This is amazing, and only recently I started to read the books. So this map will actually be handy to follow through the story!
frm88
This is awesome, thank you. I will play around with this all day :)
block_dagger
Interactive is generous - more like labeled. Interesting but was expecting more.
frasermarlow
PS: There have been a few questions about the tiling system used. It's based on 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

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.

ComSubVie
The 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.

bdeol22
The 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.