Middle-Earth

Webmap
User Guide

Mark Mclean, February 2021

ME_webmap_UserGuide

Table of Contents
Revision History .................................................................................................................................... 2
Intended Audience................................................................................................................................ 2
Background ........................................................................................................................................... 3
Purpose ................................................................................................................................................. 3
Scope .................................................................................................................................................... 3
Technical Details ................................................................................................................................... 3
A note on Scale ................................................................................................................................. 3
Data Sources ......................................................................................................................................... 4
External ............................................................................................................................................. 4
Internal ............................................................................................................................................. 4
Using the webmap ................................................................................................................................ 5
Webmap components .......................................................................................................................... 5
Zoom +/- ........................................................................................................................................... 5
North Arrow ...................................................................................................................................... 5
Menus ............................................................................................................................................... 6
ICE Publications ............................................................................................................................. 6
Navigation Menus ......................................................................................................................... 6
Bookmark menu................................................................................................................................ 7
Search ............................................................................................................................................... 7
Drawing Controls .............................................................................................................................. 8
Delete all tool .................................................................................................................................... 8
Printing ............................................................................................................................................. 8
Footer ............................................................................................................................................... 8
Future Development ............................................................................................................................. 8
Editing and Analysis Functions .......................................................................................................... 8
Appendices ........................................................................................................................................... 9
Layer Depictions ............................................................................................................................... 9

Revision History
Author Version Date Comments
Mark Mclean 1.0 29/10/2020 Initial Compilation
Mark Mclean 1.1 13/02/2021 Brought up to date

Intended Audience
Audience Role
Portal Users

ME_webmap_UG 13/02/2021 Page 2 of 10

ME_webmap_UserGuide

Background
This guide provides an overview of the Middle-Earth Webmap (‘the webmap’).

Purpose
To demonstrate some of the functionality of the webmap in the hope that it proves to be of value to
the Middle-Earth fan community.

Scope
The background and workings of the webmap. By design, the portal is extendable in terms of both
functionality and reach and is flexible enough to suit most requirements.

Technical Details
For those of a technical nature.

The portal has been built using open-source technologies (HTML5, CSS and JavaScript(JS)) and is
primarily based around an extensible, open-source, JS library called Leaflet (http://leafletjs.com/).
Data is consumed in the form of GeoJSON files.

The portal should be accessible on any modern web-browser, although some incompatibilities may
exist, and your browser needs to both support and allow JavaScript.

Development of the portal has been conducted primarily on Google Chrome and it has not been
tested on all browsers.

A note on Scale
The basemap has a nominal projection (EPSG) of 32631 https://epsg.io/32631 - a flavour of WGS84,
but is effectively a custom, flat-plane, transformation. For our purposes this doesn’t really matter
apart from the fact that the webmap scalebar, drawing and measuring tools don’t handle this well
and generate spurious values. I believe, do not quote me on it, that the map is 2,000km on each side
and this ties in with the distances on my Campaign Route – see below – generated in QGIS.

ME_webmap_UG 13/02/2021 Page 3 of 10

ME_webmap_UserGuide

Data Sources
External
I sourced the basemap from the ME-DEM project. I am not sure if this is still active, but any copyright
for the grey basemap is theirs. I ran the basemap through the free version of MapTiler to generate
different zoom levels, but this only generated 5 levels (2 to 6) and watermarked the webmap with
MapTiler.com – not that I mind.
The vector data I located at https://github.com/jvangeld/ME-GIS and, according to the readme file is
also derived from the ME-DEM project. I loaded the ShapeFiles into QGIS, split them into named and
unnamed files and then exported them to GeoJSON for consumption in the webmap.
According to the attribution within the data, many of the features were derived from Iron-crown
Enterprises (ICE) Middle-Earth Role Playing (MERP) material.

Internal
So far, I have added:
1. Contours - 250m vertical interval
2. Languages - from the ICE Campaign Guide
3. Gridlines - six options from 1km to 100km
4. Flora and Fauna - 16 groups of creatures from ICE Creatures of Middle-Earth
5. Journeys - As the crow (Crebain) flies - with dates, participants and events
6. A ‘SW Campaign Route’ – a map of potential paths for a MERP Campaign (not built).
7. ICE Publications – more detail later in this document, but I felt it would be useful to see
(approximately) where in Middle-Earth the Adventures, Citadels, Realms, etc were based.

A Note on layers:
Similar to traditional desktop GIS Systems; the webmap is layer-based. The bottom layer is always
the basemap and we layer other data on top.
Layers don’t always play nicely together. If you find that key data is being obscured then go to the
appropriate menu, turn the key data off and then back on again – this will re-add it as the top layer.

ME_webmap_UG 13/02/2021 Page 4 of 10

ME_webmap_UserGuide

Using the webmap

The webmap is designed to be clean, modern and easy to navigate, with as much of the screen given
over to the map as possible.

Fig. 1, the initial screen

Before we get into the on-screen controls, I will give a brief discussion on the Map (the bit in the
middle) interface.

Default mouse option is click and drag, otherwise known as pan. If your mouse has a scroll wheel,
then this will step you through the 5 zoom levels.

You can use Shift-click-drag to zoom in on specific areas – up to the zoom limits.

Note: by default, I have turned on the Coastline layer to define the border between land and see on
the grey basemap (hillshade).

Webmap components
Zoom +/-
These controls offer an alternative zoom method – they grey out when you can go no further in that
direction.

North Arrow
A Static image which indicates the rough direction of North.

ME_webmap_UG 13/02/2021 Page 5 of 10

ME_webmap_UserGuide

Menus
The eight dropdown menus provide much of the
interaction with the map.

The first six (Green) allow you to turn data layers

on or off – see appendices for a detailed
depiction of each option.

Note that Coastline is the only layer turned on by

default – you can mix and match to your heart’s
content.

The source data has many unnamed features, so

I have separated out those with names and given
them slightly different depictions. Named
features show their names when clicked on.

The options should be self-explanatory, but I’ll

elaborate on a few.

ICE Publications
This is a list I pulled together from various
sources. Adding the layer just shows
the locations – with an eye symbol.

Clicking the eye however, shows a popup with a thumbnail of the publication
and a few other details. Clicking the thumbnail opens a large version of the
cover in a separate tab – thanks to
https://www.icewebring.com/MERP_Print_Ref/PrintingEditionReference.html
for the majority of the images.

At the bottom of each of the three data menus is a ‘Remove layers’ option –
this does as it says – removing all layers of that geometric type.

Navigation Menus
The two grey dropdown menus are for navigation. Due to the sheer number
of places to visit, the options are nested – as shown.

The first enables you to visit any of the named

habitations available in the data. Hover over a heading
and a list of places appears. Click one of those and the
map will zoom to be centred on your selection.

The second allows you to zoom to ICE Publications –

remember to turn the associated point layer on before
selecting from here.

ME_webmap_UG 13/02/2021 Page 6 of 10

ME_webmap_UserGuide

Bookmark menu
This innocuous icon allows you to store and
revisit areas.

Navigating to an area of interest and clicking

‘Add new bookmark’ shows you a dialogue
where you can enter a name for this location.

Clicking the + adds the name and coordinates to the bookmark list.
Hovering over a name on the list shows an ‘x’ – clicking this removes
the bookmark from the list.

Search
Back on the left-hand side, we have a search option. Currently, this only
searches visible point layers.

Clicking the magnifying glass opens a text box where you can enter a
search term. If one or more matches are found, then these are displayed
to you and clicking one will zoom the map to that location – with an
animated red circle showing the way.

ME_webmap_UG 13/02/2021 Page 7 of 10

ME_webmap_UserGuide

Drawing Controls
These controls allow you to draw points, lines and polygons. Symbology is, currently, limited to that
set-in code.

As previously stated, the distances are meaningless – so ignore.

Also, note that the circle generation doesn’t work, at all.

Once you have drawn shapes, you can edit the boundaries or delete them. Edit is node by node.
Deletions need to be saved or else they will persist!

Delete all tool

Clicking this button removes all user drawn objects in one click.

Printing
Pressing CTRL+P will open your browser’s print dialog. The look and feel of printouts is controlled by a
separate Cascading style sheet (CSS) which allows for almost infinitely tailorable output.

The current 7settings are for A3 Landscape format and looks like this:

Footer
Here is where we host copyright notices and disclaimers.

Future Development
Editing and Analysis Functions
Extensions such as Turf.JS add editing and analysis functions (e.g. intersection with other layers).

Basemaps
Source and add additional Basemap layers (e.g. colourised).

ME_webmap_UG 13/02/2021 Page 8 of 10

ME_webmap_UserGuide

Appendices
Layer Depictions
Layer Geometry Symbology Information
ICE Publications Point Cover Image, Title, Number, Edition,
Notes
Beacons Point None

Cities Point Name

Citadels - named Point Name

Citadels - unnamed Point None

Towns - named Point Name

Towns - unnamed Point None

Towers - named Point Name

Towers - unnamed Point None

Ruins - named Point Name

Ruins - unnamed Point None

Fortresses Point Name

Havens Point Name

Villages Point Name

Combined Point Name – displayed by default

placenames
Rivers Line Name – rarely populated
Coastline Line None
Roads - named Line Name
Roads - unnamed Line None
SW Campaign route Line Pop up with Leg, Start, End and Distance
(miles)
Mountain Ranges Line Name
Region Borders Line

ME_webmap_UG 13/02/2021 Page 9 of 10

ME_webmap_UserGuide

Layer Geometry Symbology Information

Forests Polygon Name (a few named)

Hills Polygon None

Lakes Polygon Name (a few named)

Stonefields Polygon None

Volcanic activity Polygon None

Marsh/Swamp Polygon None

ME_webmap_UG 13/02/2021 Page 10 of 10