PageSourceSearch

http://arda-maps.org/about/

html arda-maps.org collected 2026-10-03 00:51:11 UTC 49,055 bytes, 740 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" ng-app="ardamaps">
3<head>
4    <meta charset="utf-8">
5    <title>Arda Maps - Interactive Tolkien Maps</title>
6    <!--[if lt IE 9]>
7    
7<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
7
8    <![endif]-->
9    <meta name="description" content="Arda Maps is a complete new interactive experience. It is visualizing the most important Tolkien ages all on one site. Driven by the community!">
10    <meta name="keywords" content="Tolkien, Arda Maps, Lord of the Rings">
11    <meta name="author" content="Curtis Mosters">
12    <meta name="site_name" content="Arda Maps">
13    <meta name="type" content="science fiction">
14    <meta name="robots" content="index, follow">
15    <meta name="language" content="english">
16    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
17    <link rel="stylesheet" href="css/arda-maps.css" type="text/css" media="screen">
18    <link rel="stylesheet" href="css/arda-maps-1300.css" type="text/css" media="screen and (max-width: 1300px)">
19    <link rel="stylesheet" href="css/arda-maps-900.css" type="text/css" media="screen and (max-width: 900px)">
20    <link rel="stylesheet" href="css/arda-maps-600.css" type="text/css" media="screen and (max-width: 600px)">
21    <link rel="stylesheet" href="css/arda-maps-350.css" type="text/css" media="screen and (max-width: 350px)">
22    <link rel="stylesheet" href="css/guiders.css" media="screen" type="text/css">
23    <link rel="icon" href="http://arda-maps.org/favicon.ico" type="image/x-icon">
24    
24<script src="js/libs/angular.min.js" type="text/javascript"></script>
24
25    
25<script src="js/libs/jquery-1.11.3.min.js" type="text/javascript"></script>
25
26    
26<script src="js/libs/jquery-ui.min.js" type="text/javascript"></script>
26
27    
27<script src="js/libs/d3.min.js" type="text/javascript"></script>
27
28    
28<script src="js/libs/topojson.min.js" type="text/javascript"></script>
28
29    
29<script src="js/model/modelmodule.js" type="text/javascript"></script>
29
30    
30<script src="js/ctrl/illustratorCtrl.js" type="text/javascript"></script>
30
31    
31<script src="js/libs/guiders.js" type="text/javascript"></script>
31
32</head>
33<body>
34<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 34-35
34
35<script async src="https://www.googletagmanager.com/gtag/js?id=
35UA-64043649-1
vendor: 13 bytes, line 35
35"></script>
36<script>
37  
vendor: 138 bytes, lines 37-41
37window.dataLayer = window.dataLayer || [];
38  function gtag(){dataLayer.push(arguments);}
39  gtag('js', new Date());
40
41  gtag('config', '
41UA-64043649-1
vendor: 5 bytes, line 41
41');
42</script>
42
43
44<header>
45    <nav role="navigation" class="is-unselectable">
46        <ul id="sdt_menu" class="sdt_menu">
47            <li>
48                <a id="menu_main" href="/">
49                    <img src="pics/menu/1.png" style="width: 0px; height: 0px;" alt="Menu Main">
50                    <span class="sdt_active"></span>
51                    <span class="sdt_wrap">
52                        <span class="sdt_link">Arda Maps</span>
53                        <span class="sdt_descr">Version 2.0</span>
54                    </span>
55                </a>
56                <div class="sdt_box">
57                    <a id="menu1about" href="/about/">About</a>
58                    <a id="menu1creator" href="/creator/">The Creator</a>
59                    <a id="menu1delimitation" href="/delimitation/">Delimitation</a>
60                    <a id="menu1opensource" href="/opensource/">Open Source</a>
61                    <a id="menu1donateshare" href="/donate/">Donate &amp; Share</a>
62                </div>
63            </li>
64            <li>
65                <a id="menu2ages" href="/ages/">
66                    <img src="pics/menu/2.png" style="width: 0px; height: 0px;" alt="Menu Ages">
67                    <span class="sdt_active"></span>
68                    <span class="sdt_wrap">
69                        <span class="sdt_link">Ages</span>
70                        <span class="sdt_descr">Ages of Arda</span>
71                    </span>
72                </a>
73                <div class="sdt_box">
74                    <a id="menu2firstage" href="/ages/first/">First Age</a>
75                    <a id="menu2secondage" href="/ages/second/">Second Age</a>
76                    <a id="menu2thirdage" href="/ages/third/">Third Age</a>
77                </div>
78            </li>
79            <li>
80                <a id="menu4familytree" href="/familytree/">
81                    <img src="pics/menu/4.png" style="width: 0px; height: 0px;" alt="Menu Familytree">
82                    <span class="sdt_active"></span>
83                    <span class="sdt_wrap">
84                        <span class="sdt_link">Ancestry</span>
85                        <span class="sdt_descr">Family Tree</span>
86                    </span>
87                </a>
88            </li>
89        </ul>
90    </nav>
91</header>
92<div id="welcome">
93    <div id="welcomeinner">
94        <a href="#">
95            <img id="welcomecontentclose" src="pics/popup/close.png" alt="Close Button">
96        </a>
97        <article id="welcomecontent">
98            <div id="welcomecontentDisclaimer">
99                <header class="welcome">
100                    <h1>Arda Maps</h1>
101                    <div class="welcomecontentext">
102                        <p>Welcome to Arda Maps. This project comes up with the 3 most important ages of J.R.R. Tolkien's works.</p>
103                        <section id="threeages">
104                            <a href="/ages/first/" title="Show the map of the first age">
105                                <span id="welcomeFirstage" class="welcomeBackgroundimage is-unselectable">First Age</span>
106                            </a>
107                            <a href="/ages/second/" title="Show the map of the second age">
108                                <span id="welcomeSecondage" class="welcomeBackgroundimage is-unselectable">Second Age</span>
109                            </a>
110                            <a href="/ages/third/" title="Show the map of the third age">
111                                <span id="welcomeThirdage" class="welcomeBackgroundimage is-unselectable">Third Age</span>
112                            </a>
113                        </section>
114                        <p style="position: relative;">But there is even much more on top of these high-detailed maps.</p>
115                        <section id="otherfunctionality">
116                            <span id="welcomeJourney" class="welcomeBackgroundimage is-unselectable defaultcursor" title="No direct link available">Journeys</span>
117                            <span id="welcomeTimeline" class="welcomeBackgroun
117dimage is-unselectable defaultcursor" title="No direct link available">Timelines</span>
118                            <a href="/familytree/" title="Show the family tree">
119                                <span id="welcomeAncestry" class="welcomeBackgroundimage is-unselectable">Family Tree</span>
120                            </a>
121                        </section>
122                        <p>Thanks for anyone who was involved in this project. For more ideas and feedback check out our <a href="/forum/">Forum</a>.</p>
123                        <p class="welcomeBrowser">Best performance with Chrome (36+)</p> <img src="/pics/welcome/chrome.png" alt="Chrome" title="Chrome">
124                        <p class="welcomeBrowser">and all implemented features successfully tested with Firefox (16+)</p> <img src="/pics/welcome/firefox.png" alt="Firefox" title="Firefox">
125                    </div>
126                </header>
127            </div>
128        </article>
129    </div>
130</div>
131<div id="popup">
132    <div id="popupinner">
133        <a href="#">
134            <img id="popupcontentclose" src="pics/popup/close.png" alt="Close Button">
135        </a>
136        <div id="popupcontent">
137            <article id="popupcontentAbout">
138                <header>
139                    <h3>About Arda Maps</h3>
140                    <div class="popupcontentext">
141                        <p>Arda Maps is a non-profit, Open Source, community driven and educational project.</p>
142                        <p>This project is not associated with Middle-earth Enterprises nor the Tolkien Estates.</p>
143                        <p>We come up with 3 <strong>Tolkien ages</strong>
143, 882 <strong>characters</strong>, 796 <strong>places</strong>, 1624 <strong>timeline events</strong> and more then 500 licenced <strong>pictures</strong> to a complete new presentation level of detail.</p>
144                        <p>The aim is that Tolkien readers can use this website to explore the fictive universe, Tolkien lovely filled with life. So we created the maps of the most important ages. These maps can be zoomed, dragged and each one shows some of the most important journeys, timeline events and much more!</p>
145                        <p>All maps are based on the <a href="http://en.wikipedia.org/wiki/The_Atlas_of_Middle-earth">The Atlas of Middle-earth</a> from <a href="http://en.wikipedia.org/wiki/Karen_Wynn_Fonstad">Karen Wynn Fonstad</a> but extended with own ideas and small changes based on different other official maps.</p>
146                        <p></p>
147                        <p>If you have any idea or feedback, just let me know:</p>
148                        <ul>
149                            <li>Forum: <a href="/forum/">Forum</a></li>
150                            <li>Skype: <a href="skype:kwoxer?add">kwoxer</a></li>
151                            <li>E-Mail: <a href="mailto:[email protected]">[email protected]</a></li>
152                        </ul>
153                        <p></p>
154                    </div>
155                </header>
156            </article>
157            <article id="popupcontentCreator">
158                <header>
159                    <h3>The Creator</h3>
160                    <div class="popupcontentext">
161                        <img src="pics/arda/illustrator/curtismosters.png" width="200" height="200" alt="Curtis Mosters">
162                        <p>This project is created by <a href="http://www.kwoxer.de">Curtis Mosters</a> who is writing his master-thesis at the Brandenburg University of Applied Sciences in Germany.</p>
163                        <p>As a big Tolkien fan in my mind his books are really outstanding. But when I was e.g. some times ago reading the Silmarillion I was often asking myself: "Where is this place?" and "How big might be a specific difference between two places?". So I was searching around if there is any website which is showing the whole maps that can be zoomed without loosing any small lovely detail. But unfortunately there was nothing like that in the web except lots of static drawings and most of them were in low qualy as well.</p>
164                        <p>This was the moment where I actually was the first time thinking about creating something like Arda Maps.</p>
165                        <p>I also want to thank Prof. <a href="http://informatik.fh-brandenburg.de/alexander-urban.html">Alexander Urban</a>  who made this project possible and who helped a lot with his media and design background knowledge.</p>
166                        <p>Special Thanks are going to <strong style="color: #999">Sabrina Wiese</strong>. She helped very much in creating the concept of Arda Maps and supported me where it was possible. Without her this website and many more beautiful things would have never happened to me. I thank you so much for every second you spent with me. This page is dedicated to you.</p>
167                    </div>
168                </header>
169            </article>
170            <article id="popupcontentDelimitation">
171                <header>
172                    <h3>Delimitation</h3>
173                    <div class="popupcontentext">
174                        <p>Arda Maps is in contextual terms based on the <a href="http://tolkiengateway.net/wiki/Main_Page">Tolkien Gateway</a>.</p>
175                        <p>This Wiki is used because it's the most complete English Wiki about the whole Tolkien universe. It also has a well-defined structure and was most recommended by the Tolkien community when I started Arda Maps.</p>
176                        <p>Arda Maps can contain mistakes like wrong dates or any other information. This might be due to the manual copying process of the data. As it will be Open Source anyone will be able to fix issues in the future like in a usual Wiki. Meanwhile you can send issues and bugs on our <a href="/forum/">Forum</a>
176. Thank you very much.</p>
177                        <p>We are also NOT showing ALL information because our aim is to visualise data especially the maps, timelines and relationships. So in order to go deeper we really recommend reading all the different Tolkien books and refering to the great Tolkien Gateway.</p>
178                    </div>
179                </header>
180            </article>
181            <article id="popupcontentOpensource">
182                <header>
183                    <h3>Open Source</h3>
184                    <div class="popupcontentext">
185                        <p>Arda Maps is completely Open Source and a community driven project driven by YOU!</p>
186                        <p>You can now do several things to improve this project or just to get an idea how it has been done:</p>
187                        <ul>
188                            <li><a href="https://github.com/kwoxer/Arda-Maps/tree/master/htdocs">Website</a> | all files used on this website</li>
189                            <li><a href="http://arda-maps.org:2480/studio/index.html#/">Database</a> | exploring the database (login with arda:arda)</li>
190                            <li><a href="https://github.com/kwoxer/Arda-Maps/tree/master/QGIS">QGIS</a> | topographical data of the ages</li>
191                            <li><a href="/forum">Forum</a> | found a mistake somewhere, please mention it in our forum</li>
192                        </ul>
193                        <p>Arda Maps is using the following main technologies:</p>
194                        <ul>
195                            <li>QGIS | georeferencing and map creation in general</li>
196                            <li>D3.js with topojson | visualising map and family tree</li>
197                            <li>OrientDB | graph database</li>
198                        </ul>
199                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img id="ccimage" alt="Creative Commons Lizenzvertrag" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Arda Maps</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://arda-maps.org/" property="cc:attributionName" rel="cc:attributionURL">Curtis Mosters</a> is licenced under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons 4.0 International Licence</a>.
200                    </div>
201                </header>
202            </article>
203            <article id="popupcontentDonateshare">
204                <header>
205                    <h3>Donate and Share</h3>
206                </header>
207                <div class="popupcontentext">
208                    <p>Arda Maps is a non-profit project and driven by YOU, the community!</p>
209                    <p>We have the intention to help readers so that those can find the information they need. Keeping this website alive costs some bucks. We really appreciate if you like Arda Maps, please consider a <a href="/go/donate/">donation</a>. This ONLY helps to improve the server and paying costs.</p>
210                    <p>Also feel free to share this project anywhere you like (<a href="https://www.facebook.com/ardamaps">Facebook</a>).</p>
211                    <p>On our Facebook site you can also see when we update something. Stay tuned!</p>
212                    <div style="position: absolute !important; left: 0%; right: 0%; text-align: center;" class="fb-page" data-href="https://www.facebook.com/ardamaps" data-tabs="timeline" data-width="500" data-height="400" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ardamaps"><a href="https://www.facebook.com/ardamaps">Arda Maps</a></blockquote></div></div>
213                </div>
214            </article>
215            <article id="popupcontentAges">
216                <header>
217                    <h3>Ages of Arda</h3>
218                    <div class="popupcontentext">
219                        <p> Arda Maps is created to offer high-detailed maps about the most important ages of Middle-earth for free. It might never be complete due to missing official map pieces or sometimes unclear definitions made by J.R.R. Tolkien. There are way more Ages mentioned by Tolkien but most of them are having very less data to show like 'Years of the Trees' or the 'Forth Age'.</p>
220                        <p>Until there is not enough data about them we are here just showing these 3 main ages right now:</p>
221                        <ul>
222                            <li><a href="/ages/first/">First Age</a> (Túrin, Tuor, Beren)</li>
223                            <li><a href="/ages/second/">Second Age</a> (Númenor)</li>
224                            <li><a href="/ages/third/">Third Age</a> (Hobbit, Lord of the Rings)</li>
225                        </ul>
226                        <p>The ages are fully zoom- &amp; drag-able. And much more...</p>
227                    </div>
228                </header>
229            </article>
230            <article id="popupcontent404">
231                <header>
232                    <h3>Ooops - no content here</h3>
233                    <div class="popupcontentext">
234                        <p>We are really sorry but the page your requested page does not exist.</p>
235                        <p>If you came via direct link please report this as an <a href="mailto:[email protected]?subject=Found an issue on Arda Maps&amp;body=...more details on your issue (copyright;map data;design...)">issue</a>
235. Thank you. =)</p>
236                    </div>
237                </header>
238            </article>
239        </div>
240    </div>
241</div>
242<div id="illustrator">
243    <div id="illustratorinner" ng-controller="Illustrator">
244        <a href="#">
245            <img id="illustratorcontentclose" src="pics/popup/close.png" alt="Close Button">
246        </a>
247        <article id="illustratorcontent">
248            <section id="illustratorcontent{{illustrator.ID}}" ng-repeat="illustrator in illustrators">
249                <header>
250                    <h3>{{illustrator.name}}</h3>
251                    <div class="illustratorcontentext">
252                        <img ng-if="showImage(illustrator)" src="pics/arda/illustrator/{{illustrator.imgName}}.png" width="170" height="200" alt="{{illustrator.name}}">
253                        <p>This work is copyrighted and owned by <strong>{{illustrator.name}}</strong>. However, permission has kindly been granted, by the copyright holder, to use this file on the not-for-profit Arda Maps website.</p>
254                        <p>Details of the copyright holder: </p>
255                        <p ng-if="showXtraInfo(illustrator)"> </p>
256                        <ul class="listplacing">
257                            <li>Name: {{illustrator.name}}</li>
258                            <li>Website: <a href="{{illustrator.website}}">{{illustrator.name}}'s website</a></li>
259                            <li ng-if="show2WebLink(illustrator)">Website: <a href="{{illustrator.website2url}}">{{illustrator.name}}'s {{illustrator.website2text}}</a></li>
260                            <li>Permission for use on Arda Maps</li>
261                        </ul>
262                    </div>
263                </header>
264            </section>
265            <section id="illustratorcontentTedNasmith">
266                <header>
267                    <h3>Ted Nasmith</h3>
268                    <div class="illustratorcontentext">
269                        <img src="pics/arda/illustrator/tednasmith.jpg" width="170" height="200" alt="Ted Nasmith">
270                        <p>The artwork incorporated herein is copyrighted by <strong>Ted Nasmith</strong>. Mr. Nasmith's permission has been granted to use these images. Arda Maps is a not-for-profit project.</p>
271                        <p>Details of the copyright holder:</p>
272                        <ul class="listplacing">
273                            <li>Ted Nasmith's official website: <a href="http://www.tednasmith.com">www.tednasmith.com</a></li>
274                        </ul>
275                    </div>
276                </header>
277            </section>
278            <section id="illustratorcontentUllaThynell">
279                <header>
280                    <h3>Ulla Thynell</h3>
281                    <div class="illustratorcontentext">
282                        <p>This work is copyrighted and owned by <strong>Ulla Thynell</strong>. However, permission has kindly been granted, by the copyright holder, to use this file on the not-for-profit Arda Maps website.</p>
283                        <p>Details of the copyright holder:</p>
284                        <ul class="listplacing">
285                            <li>Name: Ulla Thynell</li>
286                            <li>Website: <a href="http://www.ullathynell.com">Ulla Thynell's website</a></li>
287                            <li>Website: <a href="http://society6.com/ullathynell">Ulla Thynell's Prints shop</a></li>
288                            <li>Website: <a href="http://www.facebook.com/ullaillustration">Ulla Thynell's Facebook page</a></li>
289                            <li>Website: <a href="http://ullathynell.tumblr.com/">Ulla Thynell's Tumblr art blog</a></li>
290                            <li>Website: <a href="http://ullakko.deviantart.com">Ulla Thynell's DeviantART gallery</a></li>
291                            <li>Permission for use on Arda Maps</li>
292                        </ul>
293                    </div>
294                </header>
295            </section>
296        </article>
297        <article id="illustratorfooter">
298            <section id="illustratorfooterHeader">
299                Complete image portfolio
300            </section>
301            <section id="illustratorfooterCreatures">
302                <div class="illustratorfooterImagesHeader">Creatures:</div>
303                <div id="illustratorfooterImagesCreatures"></div>
304            </section>
305            <section id="illustratorfooterCreaturesFamilytree">
306                <div class="illustratorfooterImagesHeader">Creatures (Family Tree / Ancestry):</div>
307                <div id="illustratorfooterImagesCreaturesFamilytree"></div>
308            </section>
309            <section id="illustratorfooterLocations">
310                <div class="illustratorfooterImagesHeader">Locations:</div>
311                <div id="illustratorfooterImagesLocations"></div>
312            </section>
313            <section id="illustratorfooterEvents">
314                <div class="illustratorfooterImagesHeader">Events:</div>
315                <div id="illustratorfooterImagesEvents"></div>
316            </section>
317        </article>
318    </div>
319</div>
320<section id="preloader">
321    <div id="preloadercontent" class="center">
322        Loading map...
323        <img src="pics/map/preloader.gif" title="Reloading..." alt="Preloader">
324    </div>
325</section>
326<section id="zoomingLocation">
327    <div id="zoomingLocationcontent" class="center">
328        Zooming into map...
329        <img src="pics/map/preloader.gif" title="Zooming..." alt="Zooming">
330    </div>
331</section>
332<section id="version">
333    <iframe class="fb-like" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fardamaps%2F&width=78&layout=button_count&action=like&size=small&share=false&height=21&appId=151852984909033" width="78" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
334    <div id="donate"> <a href="https://www.paypal.me/kwoxer" target="_blank"><img src="pics/donate.png" title="Donate" alt="Donate"></a></div>
335</section>
336<article id="familytree">
337    <div id="familytreeinner">
338        <a href="#">
339            <img id="familytreecontentclose" src="pics/popup/close.png" alt="Close Button" title="Close Family Tree">
340        </a>
341        <div id="familytreecontent">
342            <div id="familytreecontentheader">
343                <h2>Family Tree</h2>
344            </div>
345            <div id="familytreecontentraces">
346                leftclick - more info about a node<br>
347                shift + leftclick - fixing a node<br>
348                doubleclick - add node relations<br>
349                rightclick - delete a node
350            </div>
351            <div id="familytreecontentsearch">
352                <input id="familytreesearch" type="text" placeholder="Type in any name..." value="" name="who-input">
353                <div id="familytreesearchsuggestions">
354                    <ul id="familytreesearchsuggestionsFamilycreatures"><li></li></ul>
355                </div>
356            </div>
357            <div id="familytreecontentsvg">
358            </div>
359            <div id='familytreeShowallbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
360                Show All
361            </div>
362            <div id='familytreeHideallbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
363                Hide All
364            </div>
365            <div id='familytreeUnfixallbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
366                Unfix All
367            </div>
368        </div>
369    </div>
370</article>
371<aside role="complementary">
372    <div id="info">
373        <article id="infoinner">
374            <div id="infocontent" class="is-unselectable">
375                <section id="infoContentSearch">
376                    <input id="infoSearch" type="text" placeholder="Creature,Location..." value="" name="what-input">
377                    <img id="infoClosebutton" src="pics/popup/close_search.png" title="Close search" alt="Close button">
378                    <div id="infoSearchSuggestions">
379                        <ul id="familytreesearchsuggestionsCreatures"><li></li></ul>
380                        <ul id="familytreesearchsuggestionsLocations"><li></li></ul>
381                    </div>
382                </section>
383                <section id="infoCreature">
384                    <div class="infoheader"></div>
385                    <div class="infosubname"></div>
386                    <div class="infopicture"><img src="" onerror="this.src='/pics/arda/creature/UnknownCreature.jpg'" title="Show info about the illustrator" alt="Picture"></div>
387                    <div class="infopictureSource"><a href="#" title="Show info about the illustrator"><span></span></a></div>
388                    <div class="infosex"><img src="" onerror="this.src='/pics/unclear.png'" alt="Sex"></div>
389                    <div class="infoothernames infoelement">
390                        <div class="infosubheader">Other names</div>
391                        <div class="infosubtext"></div>
392                    </div>
393                    <div class="inforace infoelement">
394                        <div class="infosubheader">Race</div>
395                        <div class="infosubtext"></div>
396                    </div>
397                    <div class="infolife infoelement">
398                        <div class="infosubheader">Lifetime</div>
399                        <div class="infosubtext"></div>
400                    </div>
401                    <div class="inforelations infoelement">
402                        <div class="infosubheader">Relations</div>
403                        <div class="infosubtext"></div>
404                    </div>
405                    <div class="infolocation infoelement">
406                        <div class="infosubheader">Location</div>
407                        <div class="infosubtext"></div>
408                    </div>
409                    <div class="infolink infoelement">
410                    </div>
411                </section>
412                <section id="infoLocation">
413                    <div class="infoheader"></div>
414                    <div class="infosubname"></div>
415                    <div class="infopicture"><img src="" onerror="this.src='/pics/arda/location/UnknownLocation.jpg'" title="Show info about the illustrator" alt="Picture"></div>
416                    <div class="infopictureSource"><a href="#" title="Show info about the illustrator"><span></span></a></div>
417                    <div class="infotype"><img src="" onerror="this.src='/pics/other/qmark.png'" alt="Type"></div>
418                    <div class="infoage"><img src="" onerror="this.src='/pics/other/qmark.png'" alt="Age"></div>
419                    <div class="infoothernames infoelement">
420                        <div class="infosubheader">Other names</div>
421                        <div class="infosubtext"></div>
422                    </div>
423                    <div class="infoarea infoelement">
424                        <div class="infosubheader">Located in</div>
425                        <div class="infosubtext"></div>
426                    </div>
427                    <div class="infolink infoelement">
428                    </div>
429                </section>
430                <section id="infoEvent">
431                    <div class="infoheader"></div>
432                    <div class="infopicture"><img src="" onerror="this.src='/pics/arda/event/UnknownEvent.jpg'" title="Show info about the illustrator" alt="Picture"></div>
433                    <div class="infopictureSource"><a href="#" title="Show info about the illustrator"><span></span></a></div>
434                    <div class="infodescription infoelement">
435                        <div class="infosubheader">Description</div>
436                        <div class="infosubtext"></div>
437                    </div>
438                </section>
439            </div>
440        </article>
441        <article id="infobuttons">
442            <ul>
443                <li id="timelinebutton" class="btn_arda btn_arda-large is-unselectable">
444                    TIMELINE
445                </li>
446                <li id="searchbutton" class="btn_arda btn_arda-large is-unselectable">
447                    <img src="pics/search.png" alt="search" width="10" height="10">
448                </li>
449                <li id="infobutton" class="btn_arda btn_arda-large is-unselectable">
450                    INFO
451                </li>
452            </ul>
453        </article>
454    </div>
455    </div>
456    <div id="timeline">
457        <div id="timelineinner">
458            <div id="timelinecontent">
459                <div id="timelinearea">
460                    Loading Map...
461                </div>
462            </div>
463        </div>
464    </div>
465</aside>
466<div id="arda"></div>
467<article id="bottomButtons">
468    <section id='zoombuttoncontainer'>
469        <div id='zoomplusbutton' class="is-clickable btn_arda btb_arda-small buttonzoom is-unselectable">
470            +
471        </div>
472        <div id='zoomminusbutton' class="is-clickable btn_arda btb_arda-small buttonzoom is-unselectable">
473            -
474        </div>
475    </section>
476    <section id='zoomresetbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
477        Reset Map
478    </section>
479    <section id='scalebar' class="is-unselectable">
480        <div id="scalebarslider" style="height: 9px; padding:1px; margin:0 5px 0 5px;"></div>
481        <div id='scalebarheader'>Scalebar (miles)</div>
482        <div id='scalebarsmooth' title="smooth has bad effects on slow machines!">smooth</div>
483        <div id='scalebarleft'>0 </div>
484        <div id='scalebarcenter'></div>
485        <div id='scalebarright'></div>
486    </section>
487    <section id="legendcontainer">
488        <div id='legendbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
489            Legend
490        </div>
491        <div id="legends">
492            <div id='legendinner'>
493                <img id="legendnames_EN" class="is-clickable" src="pics/en.png">
494                <img id="legendnames_DE" class="is-clickable" src="pics/de.png">
495                <div id='legendinnerinner' class="is-unselectable">
496                    <table>
497                        <colgroup>
498                            <col width="100">
499                            <col width="60">
500                        </colgroup>
501                        <tr>
502                            <td id="legendoutline"><span class=" legendicon"></span>Outline</td>
503                            <td class="is-not-clickable"></td>
504                        </tr>
505                        <tr>
506                            <td id="legendocean"><span class=" legendicon"></span>Ocean</td>
507                            <td class="is-not-clickable"></td>
508                        </tr>
509                        <tr>
510                            <td id="legendforest"><span class=" legendicon"></span>Forest</td>
511                            <td class="is-not-clickable"></td>
512                        </tr>
513                        <tr>
514                            <td id="legendnames"><span class=" legendicon"></span>Label</td>
515                            <td class="is-not-clickable"></td>
516                        </tr>
517                        <tr>
518                            <td id="legendmountainhigh"><span class=" legendicon"></span>Peaks</td>
519                            <td id="legendcastletower"><span class=" legendicon"></span>Tower</td>
520                        </tr>
521                        <tr>
522                            <td id="legendmountainlow"><span class=" legendicon"></span>Mountain Range</td>
523                            <td id="legendcity"><span class=" legendicon"></span>City</td>
524                        </tr>
525                        <tr>
526                            <td id="legendhighland"><span class=" legendicon"></span>Highland</td>
527                            <td id="legendplace"><span class=" legendicon"></span>Place</td>
528                        </tr>
529                        <tr>
530                            <td id="legendlake"><span class=" legendicon"></span>Lake</td>
531                            <td id="legendbridge"><span class=" legendicon"></span>Bridge</td>
532                        </tr>
533                        <tr>
534                            <td id="legendroad"><span class=" legendicon"></span>Road</td>
535                            <td id="legendmount"><span class=" legendicon"></span>Mount</td>
536                        </tr>
537                        <tr>
538                            <td id="legendriver"><span class=" legendicon"></span>River</td>
539                            <td id="legendford"><span class=" legendicon"></span>Ford</td>
540                        </tr>
541                        <tr>
542                            <td id="legendmoor"><span class=" legendicon"></span>Moor</td>
543                            <td id="legendwaterfall"><span class=" legendicon"></span>Waterfall</td>
544                        </tr>
545                    </table>
546                </div>
547            </div>
548        </div>
549    </section>
550    <section id='journeycontainer'>
551        <div id='journeybutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
552            Journey
553        </div>
554        <div id="journey">
555            <div id='journeyinner'>
556                <div id='journeyinnerinner' class="is-unselectable">
557                    <div id='journeyFirstAge' class="is-unselectable">
558                        <table>
559                            <colgroup>
560                                <col width="160">
561                            </colgroup>
562                            <tr>
563                                <td id="journey-tuor"><span class=" journeyicon"></span>Tuor</td>
564                            </tr>
565                            <tr>
566                                <td id="journey-beren1"><span class=" journeyicon"></span>Beren (460-465)</td>
567                            </tr>
568                            <tr>
569                                <td id="journey-beren2"><span class=" journeyicon"></span>Beren (465-466)</td>
570                            </tr>
571                            <tr>
572                                <td id="journey-turin1"><span class=" journeyicon"></span>Túrin (473-495)</td>
573                            </tr>
574                            <tr>
575                                <td id="journey-turin2"><span class=" journeyicon"></span>Túrin (495-499)</td>
576                            </tr>
577                        </table>
578                        <p>*coloured green offer more info</p>
579                    </div>
580                    <div id='journeySecondAge' class="is-unselectable">
581                        No journey till now...
582                    </div>
583                    <div id='journeyThirdAge' class="is-unselectable">
584                        <table>
585                            <colgroup>
586                                <col width="90">
587                                <col width="150">
588                            </colgroup>
589                            <thead>
590                            <tr>
591                                <th>The Hobbit</th>
592                                <th>Lord of the Rings</th>
593                            </tr>
594                            </thead>
595                            <tr>
596                                <td id="journey-bilbo"><span class=" journeyicon"></span>Bilbo</td>
597                                <td id="journey-frodo"><span class=" journeyicon"></span>Frodo &amp; Sam</td>
598                            </tr>
599                            <tr>
600                                <td id="journey-thorin"><span class=" journeyicon"></span>Thorin</td>
601                                <td id="journey-aragorn"><span class=" journeyicon"></span>Aragon</td>
602                            </tr>
603                            <tr>
604                                <td id="journey-dwarfs"><span class=" journeyicon"></span>Other Dwarfs</td>
605                                <td id="journey-gandalf-lotr"><span class=" journeyicon"></span>Gandalf</td>
606                            </tr>
607                            <tr>
608                                <td id="journey-gandalf-hobbit"><span class=" journeyicon"></span>Gandalf</td>
609                                <td id="journey-legogimli"><span class=" journeyicon"></span>Legolas &amp; Gimli</td>
610                            </tr>
611                            <tr>
612                                <td class="is-not-clickable"></td>
613                                <td id="journey-merry"><span class=" journeyicon"></span>Merry</td>
614                            </tr>
615                            <tr>
616                                <td class="is-not-clickable"></td>
617                                <td id="journey-pippin"><span class=" journeyicon"></span>Pippin</td>
618                            </tr>
619                            <tr>
620                                <td class="is-not-clickable"></td>
621                                <td id="journey-boromir"><span class=" journeyicon"></span>Boromir</td>
622                            </tr>
623                        </table>
624                        <p>*coloured green offer more info</p>
625                    </div>
626                </div>
627            </div>
628        </div>
629    </section>
630    <section id='regionbutton' class="is-clickable btn_arda btn_arda-large is-unselectable">
631        Region
632    </section>
633    <section id='arda-bg' class="is-clickable btn_arda btn_arda-image">
634        <span title="Show Earth">Earth</span>
635        <img src="pics/Earth.png" title="Show Earth" alt="Switching views">
636    </section>
637</article>
638<footer class="site_footer">
639    <section class="site_footer-copyright is-unselectable defaultcursor">
640        <span>Copyright © 2015 Arda Maps. All rights reserved. Arda Maps is not associated with Middle-earth Enterprises nor the Tolkien Estates.</span>
641    </section>
642    <section>
643        <a class="site_footer-tour site_footer-links" href="#">Take a tour</a>
644    </section>
645    <section>
646        <a class="site_footer-forum site_footer-links" href="/forum/">Forum</a>
647    </section>
648    <section>
649        <a class="site_footer-disclaimer site_footer-links" href="#">Disclaimer</a>
650        <div class="site_footer-disclaimer_popup">
651            <div>
652                <a href="#">
653                    <img class="site_footer-disclaimer_popup-close" src="pics/popup/close.png" alt="Close Button">
654                </a>
655                <div id="footerpopupcontent" class="site_footer-disclaimer_popup-content">
656                    <div class="site_footer-disclaimer_popup-content-inner">
657                        <header>
658                            <h3>Disclaimer</h3>
659                            <div class="site_footer-disclaimer_popup-content-inner--text">
660                                <h4>1. Limitation of liability for internal content</h4>
661                                <p>The content of our website has been compiled with meticulous care and to the best of our knowledge. However, we cannot assume any liability for the up-to-dateness, completeness or accuracy of any of the pages.</p>
662                                <p>Pursuant to section 7, para. 1 of the TMG (Telemediengesetz – Tele Media Act by German law), we as service providers are liable for our own content on these pages in accordance with general laws. However, pursuant to sections 8 to 10 of the TMG, we as service providers are not under obligation to monitor external information provided or stored on our website. Once we have become aware of a specific infringement of the law, we will immediately remove the content in question. Any liability concerning this matter can only be assumed from the point in time at which the infringement becomes known to us. Anyway please report any issue that occurs.</p>
663                                <h4>2. Limitation of liability for external links</h4>
664                                <p>Our website contains links to the websites of third parties (“external links”). As the content of these websites is not under our control, we cannot assume any liability for such external content. In all cases, the provider of information of the linked websites is liable for the content and accuracy of the information provided. At the point in time when the links were placed, no infringements of the law were recognisable to us. As soon as an infringement of the law becomes known to us, we will immediately remove the link in question.</p>
665                                <h4>3. Copyright</h4>
666                                <p>The content and works published on this website are governed by the copyright laws of Germany. Any duplication, processing, distribution or any form of utilisation beyond the scope of copyright law shall require the prior written consent of the author or authors in question.</p>
667                                <p>Any image is copyrighted by its corresponding owner. Arda Maps does not own any rights on the imbedded pictures. Any further usage needs to be confered right to use by the corresponding copyright owner. If there is infringed any copyright or the copyright has changed you are expected to report that to Arda Maps.</p>
668                                <p>Used map data is based on the The Atlas of Middle-earth and copyrighted by the by Houghton Miffline Harcourt and Tolkien Estates respectively.</p>
669                                <p>Characters and locations are copyrighted by the Tolkien Estates and Middle-earth Enterprises respectively.</p>
670                                <h4>4. Google Analytics</h4>
671                                <p>This website uses Google Analytics, a web analytics service provided by Google, Inc. ("Google"). Google Analytics uses "cookies", which are text files placed on your computer, to help the website analyze how users use the site. The information generated by the cookie about your use of the website (including your IP address) will be transmitted to and stored by Google on servers in the United States. Google will use this information for the purpose of evaluating your use of the website, compiling reports on website activity for website operators and providing other services relating to website activity and internet usage. Google may al
671so transfer this information to third parties where required to do so by law, or where such third parties process the information on Google's behalf. Google will not associate your IP address with any other data held by Google. You may refuse the use of cookies by selecting the appropriate settings on your browser, however please note that if you do this you may not be able to use the full functionality of this website. By using this website, you consent to the processing of data about you by Google in the manner and for the purposes set out above.</p>
672                            </div>
673                        </header>
674                    </div>
675                </div>
676            </div>
677        </div>
678    </section>
679    <section>
680        <a class="site_footer-reportissue site_footer-links" href="mailto:[email protected]?subject=Found an issue on Arda Maps&amp;body=...more details on your issue (copyright;map data;design...)">Report an issue</a>
681    </section>
682</footer>
683<article id="loadingprocess">
684    <div id="loadingprocessinner">
685        <div id="loadingprocesscontent">
686            <div id="loadingprocesscontentDisclaimer">
687                <header>
688                    <h3>Arda Maps loading...</h3>
689                    <div class="loadingprocesscontentext">
690                        <p>The content of Arda Maps is now loading.</p>
691                        <p>This can take some time...</p>
692                    </div>
693                </header>
694            </div>
695        </div>
696    </div>
697</article>
698<script src="js/clear.js" type="text/javascript"></script>
vendor: 2 bytes, line 698
698
699<script src="js/db.js" type="text/javascript"></script>
vendor: 2 bytes, line 699
699
700<script src="js/welcome.js" type="text/javascript"></script>
vendor: 2 bytes, line 700
700
701<script src="js/info.js" type="text/javascript"></script>
vendor: 2 bytes, line 701
701
702<script src="js/orientdb.js" type="text/javascript"></script>
vendor: 2 bytes, line 702
702
703<script src="js/popup.js" type="text/javascript"></script>
vendor: 2 bytes, line 703
703
704<script src="js/footerpopup.js" type="text/javascript"></script>
vendor: 2 bytes, line 704
704
705<script src="js/illustrator.js" type="text/javascript"></script>
vendor: 2 bytes, line 705
705
706<script src="js/legend.js" type="text/javascript"></script>
vendor: 2 bytes, line 706
706
707<script src="js/journey.js" type="text/javascript"></script>
vendor: 2 bytes, line 707
707
708<script src="js/scalebar.js" type="text/javascript"></script>
vendor: 2 bytes, line 708
708
709<script src="js/arda-bg.js" type="text/javascript"></script>
vendor: 2 bytes, line 709
709
710<script src="js/region.js" type="text/javascript"></script>
vendor: 2 bytes, line 710
710
711<script src="js/ardamap-d3.js" type="text/javascript"></script>
vendor: 2 bytes, line 711
711
712<script src="js/menu.js" type="text/javascript"></script>
vendor: 2 bytes, line 712
712
713<script src="js/linking.js" type="text/javascript"></script>
vendor: 2 bytes, line 713
713
714<script src="js/familytree-d3.js" type="text/javascript"></script>
vendor: 2 bytes, line 714
714
715<script src="js/familytree.js" type="text/javascript"></script>
vendor: 2 bytes, line 715
715
716<script src="js/loading.js" type="text/javascript"></script>
vendor: 2 bytes, line 716
716
717<script src="js/guiders.js" type="text/javascript"></script>
vendor: 2 bytes, line 717
717
718<script src="js/timeglider/underscore-min.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 718
718
719<script src="js/timeglider/backbone-min.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 719
719
720<script src="js/timeglider/json2.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 720
720
721<script src="js/timeglider/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 721
721
722<script src="js/timeglider/ba-tinyPubSub.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 722
722
723<script src="js/timeglider/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 723
723
724<script src="js/timeglider/jquery.ui.ipad.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 724
724
725<script src="js/timeglider/globalize.js" type="text/javascript" charset="utf-8"></script>
725	
726<script src="js/timeglider/ba-debug.min.js" type="text/javascript" charset="utf-8"></script>
vendor: 2 bytes, line 726
726
727<script src="js/libs/timeglider-1.0.3.min.js" type="text/javascript"></script>
vendor: 2 bytes, line 727
727
728<script src="js/timeline.js" type="text/javascript"></script>
728
729
730<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
731<link rel="stylesheet" href="timeglider/Timeglider.css" type="text/css" media="screen" title="no title" charset="utf-8">
732<link rel="stylesheet" href="timeglider/timeglider.datepicker.css" type="text/css" media="screen" charset="utf-8">
733
734<script type="text/javascript">
735    $("body").on("contextmenu", "img", function(e) {
736        return false;
737    });
738</script>
738
739</body>
740</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.