Middle-Earth map

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.
• 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

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