This project aims to provide an interactive map of Middle-earth at the end of the Third Age as imagined by J.R.R. Tolkien in his books.
You can follow this journal to see the development and creation process of the map.
Note
Zoom level, map center and rotation are preserved in the URL, so you can share a specific view of the map by sharing the URL.
Credits
- Map drawn in Figma with custom terrain & landmark elements.
- Notable places drawing created by myself in Figma. They are inspired by the movie trilogy and various representation of existing Middle-Earth paintings and artworks:
- Tharbad is drawn based on Rob Alexander's painting of the city: Tharbad.
- Tower Hill is drawn based on the painting of the same place by Nasmith Elostirion: Tower Hill.
- Points of interest have been collected from various sources, including:
- Original maps by J.R.R. Tolkien and his son Christopher Tolkien.
- The Atlas of Middle-earth by Karen Wynn Fonstad.
- MERP maps by various artists.
- Button's icons: extracted from Remix Icon collection.
- Favicon: One Ring icon by Icons8.
- Map texture overlay: Image by rawpixel.com on Freepik.
- Compass rose (modified): Image by freepik.
- Font: IM Fell DW Pica
Note
Places from all sources are displayed by default, but you can filter them and display only "canon" places from the map nomenclature at the top left of the screen.
Contribute
Feel free to open an issue or contribute if you'd like anything fixed or added.
If you want to propose a new point of interest, or correct an existing one, you can retrieve the position of the point on the map by adding ?debug=true to the URL, then click on the map to get the coordinates of the point in your clipboard.
Development
This project includes live-server as dev dependencies to serve the map locally and sharp for image processing.
Otherwise, it is a standalone app without any dependency at runtime.
Setup
First, install the project dependencies with bun or npm:
# with bun bun install # or with npm npm install
Running the Server Locally
You can run the development server using live-server:
# with bun bun dev # or with npm npm dev
The server will start and you can access the map by opening the URL shown in your terminal : http://localhost:3000.
Generating Map Tiles
To generate map tiles from the source images, run:
# with bun bun generate-tiles # or with npm npm run generate-tiles
This script uses sharp to process map images at different zoom levels, split them into tiles of 512x512 pixels, and apply a paper texture overlay.