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:
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.
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.
Ha 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.
This 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.
LotrProject[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.
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.
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.
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.
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.
Hi @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!
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.
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:
I 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...
I added some notes above on the tiling technology. As for the base map itself I posted a link to the original file. I hope that helps but happy to answer any other questions you might have.
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.
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.
http://lotrproject.com
My new favorite insult towards web services that are badly done is: "even fully vibe-coded Codex would've done better".
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?
Shameless vibe-coded plugs for my own regular usage:
1. https://llm-token-cost-calculator.pagey.site/
2. https://metrics-memory-usage.pagey.site/
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.