I'm starting to add relief and vegetation to the map. This should allow visitors to be better immersed when zooming in.

It will take some time to go over all the map and add these details, but the result should be worth it.

I'm using this MERP map below as a source of inspiration for placing relief and vegetation on the map.

However, when looking at the map, there are a lot of voids that could be filled. I'm in no position to invent new locations, but I can rely on other solid sources to add more detail and context to my map.

Keeping in mind that Middle-earth is severely depopulated at the end of the Third Age as a consequence of multiple factors (the Great Plague, the Long Winter, the Fell Winter, the departure of the Elves, and so on...), we can still imagine that there were a lot more places and settlements harboring civilization in every direction.

In order to populate the map a bit more, I will only be adding more points of interest sourced from the Middle-earth Role Playing game, which is a tabletop RPG published in the 1980s and 1990s. It is based on Tolkien's works and is considered a reliable source for Middle-earth lore.

That said, I want to give a choice to the users of the map: they will be able to toggle the display of points of interest coming from non-canon sources like the Middle-earth Role Playing game.

On top of that, every point of interest is now linked to a source, which is displayed in the tooltip when click on it.

This toggle is available in the map nomenclature, at the top left of the map:

Here is the source of the points of interest in the tooltip:

As this map's scale is much smaller than my interactive version, some points of interest and landscape features are not exactly in the same place. It will be corrected in the future.

It will come handy when adding more points of interests to the map, especially in The Shire, where there are many small hamlets that are not really villages but still worth showing on the map.

It is now a fixed part of the interface and is dynamically updated as the user zooms in and out.

This is better now :

The new mountains were inspired by this tutorial on how to draw Tolkien-style mountains by Josh Stolarz.

I'm still not fully satisfied with the result, I will surely rework them again in the future, but this will do for now.

A new approach was needed to render the map efficiently.

Without diving too much into technical details, the map was initially displayed as a single SVG image with all the landmasses, seas, rivers, mountains, forests and roads. Adding biomes meant adding a new layer of more or less complex shapes in the existing SVG, which made it very heavy to render and manipulate.

Looking at existing solutions, I chose to completely change the way the map is rendered: instead of using a single SVG, I now export 8 separate JPEG images. A script then splits each image into 512x512 pixel tiles, which are then loaded and displayed as a grid of images in the browser. This way, only the tiles that are visible in the viewport are loaded and rendered, which significantly improves performance.

Coupled with some optimizations in the zooming and panning logic, the map is now as responsive as it could be, even on mobile devices.

A preview of a single tile

Also, using different images for each zoom level will allow me to add more details to the map on higher zoom levels.

Middle-earth is a vast continent composed of a multitude of geographical features, and I wanted to reflect this diversity in the map.

The new version of the map introduces distinct biomes, Eriador, Rhovanion, Harad, Rohan, Mordor and so on. Each biome has its own color palette, inspired by the original map but with a bit more saturation and contrast to make them visually distinct.

Looking at this screenshot, the map renders overall a bit too dark. It will surely be remedied soon.

The map background is drawn from the original map by Tolkien. It displays landmasses, seas, rivers, mountains, forests and roads. Points of interest are displayed as markers during rendering in the browser.

As for fonts, Aniron and EB Garamond are used for main regions and labels respectively.

This is the first journal entry of a series about the development of this map. It will cover principally the features rather than the technical details, except when the latter serves the former.