Middle-Earth map
See website> Open source
> Developed for Jean Tinland
> Since February 2025
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.
Credits #
- Map drawn in Figma with custom terrain & landmark elements.
- 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
Used tools:
- Vanilla JS
- Custom Elements
- Shadow Roots
- CSS
- Bun
- Sharp
Features:
- Zoom with physical controls
- Desktop drag & zoom
- Mobile drag & zoom
- Map rotation
- POIs displayed on different zoom levels
- Extensible POIs system stored in JSON