Middle-Earth map

This project aims to provide an interactive map of Middle-Earth as imagined by J.R.R. Tolkien in his books. All points of interest were collected on various representations of existing Middle-Earth maps.

Credits #

• Map drawn in Figma with custom terrain & landmark elements.
• 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.
• Fonts: Aniron and EB Garamond

Used tools:

• Vanilla JS
• Custom Elements
• Shadow Roots
• CSS

Features:

• Zoom with physical controls
• Desktop drag & zoom
• Mobile drag & zoom
• POIs displayed on different zoom levels
• Extensible POIs system stored in JSON