Impaczus/game-of-thrones-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

found index.html

Browse Source
This commit is contained in:
HPEnvy\Ryan
2020-08-20 15:37:04 +08:00
parent 824cbbb1cd
commit 634a78a655
2 changed files with 521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+95
View File
@@ -0,0 +1,95 @@
## About
The novel series by George R.R. Martin, "[A Song of Ice and Fire](http://www.georgerrmartin.com/bibliography.html)" covers a massive world and dozens of characters. As I was reading the books, I found it difficult to keep track of the characters' whereabouts and how close one place was to another. Each book included small maps in the front pages, but I knew there should be an easier way.
There were several maps available on the Internet, but all static images. [One](http://www.sermountaingoat.co.uk/map) was large enough to be a good option for a new feature in the Google Maps API custom tiles using [ImageMapType](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes). I cut the original image into tiles, and had a map that could be panned and zoomed. On top of that base layer, I added markers and polygons that made the map clickable and displayed additional information. Next, I plotted where each major character traveled on the map and associated each step with a specific point in the story.
The slider in the top-right of the website lets the user select how much of the books they have read (or how much of the [TV show](http://www.hbo.com/game-of-thrones) they have seen). As the slider is moved, the character paths are updated so that the user sees what has already happened, but is protected from plot details they have not yet reached.
After a 2014 feature in The Guardian, the site went viral, reaching more than 9.5 million sessions by mid-2016.
## Press and Other Discussions
- Google Maps Mania -
[2012](http://googlemapsmania.blogspot.hk/2012/12/a-game-of-thrones-on-google-maps.html),
[2014](http://googlemapsmania.blogspot.hk/2014/04/a-game-of-thrones-mapped.html)
- Reddit.com -
[2012](https://www.reddit.com/r/asoiaf/comments/14w7my/spoilers_all_a_map_that_only_shows_the_spoilers/),
[2013](https://www.reddit.com/r/gameofthrones/comments/1fejbk/spoilers_season_13_daenerys_journey/),
[2014](https://www.reddit.com/r/books/comments/239nx0/just_found_this_interactive_map_that_shows_the/),
[2015](https://www.reddit.com/r/asoiaf/comments/3cpw69/no_spoilers_just_started_reading_the_books_any/),
[2016](https://www.reddit.com/r/InternetIsBeautiful/comments/4r94cr/game_of_thrones_map/)
- [Los Siete Reinos (Spanish) - January 15,
2013](http://lossietereinos.com/mapa-interactivo-de-los-viajes-de-cada-uno-de-los-personajes/)
- [JoeMonster.org (Polish) - April 17,
2013](http://joemonster.org/link/45791/Interaktywna_mapa_z_Gry_o_Tron)
- [Tech Gear (Greek) - June 8,
2013](http://www.techgear.gr/interactive-game-of-thrones-map-70672/)
- [Komsomolskaya Pravda (Russian) - April 15,
2014](http://www.kp.ru/daily/26219/3103386/)
- [The Guardian - April 15,
2014](https://www.theguardian.com/tv-and-radio/tvandradioblog/2014/apr/15/game-of-thrones-interactive-map-google)
- [The Onion AV Club - April 21,
2014](http://www.avclub.com/article/interactive-game-thrones-map-has-everything-203658)
- [CNET.com - April 21,
2014](http://www.cnet.com/news/google-maps-meets-game-of-thrones-in-interactive-westeros-map/)
- [Gizmodo - April 21,
2014](http://gizmodo.com/explore-the-world-of-game-of-thrones-as-if-it-were-on-g-1565480639)
- [Tom's Guide (French) - April 22,
2014](http://www.tomsguide.fr/actualite/carte-game-of-thrones,41151.html)
- [El Confidencial (Spanish) - April 22,
2014](http://www.elconfidencial.com/tecnologia/2014-04-22/este-mapa-interactivo-permite-recorrer-el-mundo-de-juego-de-tronos_119215/)
- [News.com.au - April 22,
2014](http://www.news.com.au/technology/fans-build-game-of-thrones-world-on-google-maps/story-e6frfrnr-1226892475343)
- [Haaretz (Hebrew) - April 22,
2014](http://www.haaretz.co.il/captain/net/1.2301517)
- [Geekologie - April 22,
2014](http://geekologie.com/2014/04/impressive-game-of-thrones-interactive-m.php)
- [TN - April 22,
2014](http://tn.com.ar/tecno/recomendados/un-mapa-interactivo-para-recorrer-el-mundo-de-game-of-thrones_493769)
- [Nerdist - April 22,
2014](http://nerdist.com/this-fan-made-interactive-game-of-thrones-map-is-super-helpful-awesome/)
- [Slate.fr (French) - April 23,
2014](http://www.slate.fr/life/86289/carte-interactive-game-of-thrones-localisation-parcours-personnages)
- [People - April 23,
2014](http://www.people.com/article/game-of-thrones-westeros-interactive-map)
- [Maxim (Czech) - April 23,
2014](http://www.maxim.cz/mixer/film/skvele-uz-jste-videli-interaktivni-mapu-hry-o-truny)
- [MarketWatch: The Margin - April 23,
2014](http://blogs.marketwatch.com/themargin/2014/04/23/game-of-thrones-meets-google-in-interactive-map-of-westeros/)
- [The Daily Mail - April 23,
2014](http://www.dailymail.co.uk/sciencetech/article-2611168/Google-Game-Thrones-View-Interactive-map-reveals-fantasy-world-unprecedented-helps-avoid-spoilers.html)
- Buzzfeed -
[2014](https://www.buzzfeed.com/josephbernstein/finally-the-interactive-map-game-of-thrones-deserves),
[2015](https://www.buzzfeed.com/clairedelouraille/where-in-the-world-is-arya-stark)
- [Olhar Digital (Portuguese) - April 24,
2014](http://olhardigital.uol.com.br/noticia/game-of-thrones-ganha-mapa-no-estilo-google-maps/41602)
- [The Escapist - April 24,
2014](http://www.escapistmagazine.com/news/view/133945-Track-Game-of-Thrones-Characters-Paths-with-this-Interactive-Map)
- [Game of Thrones BR (Portuguese) - April 29,
2014](http://www.gameofthronesbr.com/2014/04/mapa-interativo-de-game-of-thrones.html)
- [Internazionale (Italian) - April 30,
2014](http://www.internazionale.it/opinione/2014/04/30/la-mappa-di-game-of-thrones)
- [DNA India - May 3,
2014](http://www.dnaindia.com/entertainment/report-game-of-thrones-interactive-map-allows-you-to-explore-the-seven-kingdoms-1984730)
- [der Standard (German) - May 4,
2014](http://derstandard.at/1397521436850/Interaktive-Google-Map-fuer-Game-of-Thrones)
- [Focus (German) - May 5,
2014](http://www.focus.de/kultur/kino_tv/game-of-thrones-george-r-r-martin-westeros-hbo-sky-interaktive-karte-zeigt-die-welt-von-game-of-thrones_id_3819866.html)
- [Esquire - April 14,
2016](http://www.esquire.com/entertainment/tv/news/a43936/game-of-thrones-360-intro-video/)
- [The Verge - June 28,
2016](http://www.theverge.com/2016/6/28/12047644/game-of-thrones-maps-season-six-travel-plot-holes-time-warps)
- [Lifehacker - July 3,
2016](http://lifehacker.com/get-your-game-of-thrones-fix-with-this-interactive-spo-1782986360)
- [The Next Web - July 4,
2016](http://thenextweb.com/shareables/2016/07/04/discover-game-thrones-universe-handy-interactive-map/)
- [Polygon - July 4,
2016](http://www.polygon.com/2016/7/4/12093570/game-of-thrones-map-westeros)
- [Wired (Italian) - July 5,
2016](http://www.wired.it/internet/web/2016/07/05/mappa-interattiva-game-of-thrones/)
- [BoingBoing.net - July 5,
2016](http://boingboing.net/2016/07/05/interactive-map-of-game-of-thr.html)
- [Origo (Hungarian) - July 18,
2016](http://www.origo.hu/teve/20140422-parades-interaktiv-terkep-a-tronok-harcahoz.html)
index.html
+426
View File
@@ -0,0 +1,426 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.js'></script>
<script src='js/angular-simple-logger.min.js'></script>
<script src='js/angular-google-maps.min.js'></script>
<script src="js/angular-csv-service.min.js"></script>
<script src="js/angular-toggle-switch.min.js"></script>
<script src="js/q-spread.min.js"></script>
<script src='js/ui-bootstrap-2.0.0.min.js'></script>
<script src='js/app.js'></script>
<script src='js/services.js'></script>
<script src='js/controller.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.css" rel="stylesheet">
<link href="css/angular-toggle-switch.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cutive" rel="stylesheet">
<link href="css/quartermaester.css" rel="stylesheet">
<title>Interactive Game of Thrones Map</title>
<meta name="description" content="A map of Westeros and the rest of the known world in Game of Thrones and the Song of Ice & Fire novels. Mark how much of the TV show or novels you've seen to prevent seeing any spoilers. See the path of major characters over time." />
</head>
<body ng-app="quartermaester" ng-controller="mapCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' control='map.control'>
<!-- Location Markers -->
<ui-gmap-markers
models='mapModels.towns'
coords="'coords'"
click='map.locationClick'
options="'options'"
idkey="'key'">
</ui-gmap-markers>
<!-- Heraldry Markers -->
<ui-gmap-markers
models='mapModels.heraldry'
coords="'coords'"
options="'options'"
click="map.heraldryClick"
idkey="'key'">
</ui-gmap-markers>
<!-- Region Polygons -->
<ui-gmap-polygons
models="mapModels.regions"
path="'path'"
fill="'fill'"
stroke="'stroke'"
visible="options.geographicRegions"
idKey="'key'">
</ui-gmap-polygons>
<!-- Loyalty Range Polygons -->
<ui-gmap-polygons
ng-if="state!='edit'"
models="mapModels.loyaltyRanges"
path="'path'"
fill="'fill'"
stroke="'stroke'"
visible="options.politicalAllegiances"
clickable="'clickable'"
events="'events'"
idKey="'key'">
</ui-gmap-polygons>
<!-- <ui-gmap-polygons
ng-if="state=='edit'"
models="mapModels.editableLoyaltyRanges"
path="'path'"
fill="'fill'"
stroke="'stroke'"
static="''"
editable="''"
visible="options.politicalAllegiances"
idKey="'key'">
</ui-gmap-polygons> -->
<!-- Character Markers -->
<ui-gmap-markers
models='mapModels.characters'
coords="'coords'"
options="'options'"
click="map.characterClick"
type="'spider'"
idkey="'key'">
</ui-gmap-markers>
<!-- Character Paths -->
<!-- The values of the attributes seem to be ignored. All that matters is if they are defined or not -->
<ui-gmap-polylines
ng-if="state!='edit'"
models='mapModels.paths'
path="''"
stroke="''"
static="''"
editable="''"
icons="''"
idkey="'key'">
</ui-gmap-polylines>
<!-- <ui-gmap-polylines
ng-if="state=='edit'"
models='mapModels.editablePaths'
path="''"
stroke="''"
static="''"
editable="''"
icons="''"
idkey="'key'">
</ui-gmap-polylines> -->
</ui-gmap-google-map>
<div id="navigation">
<div class="list-group">
<button class="list-group-item btn-clear" ng-click="toState('slider-full')" ng-class="{highlight:(state=='slider-full'), hlborder:(state=='search')}">
<i class="glyphicon glyphicon-eye-close"></i>
</button>
<button class="list-group-item btn-clear" ng-click="toState('characters')" ng-class="{highlight:(state=='characters'),hlborder:(state=='search')}">
<i class="glyphicon glyphicon-user"></i>
</button>
<button class="list-group-item btn-clear" ng-click="toState('search')" ng-class="{highlight:(state=='search')}">
<i class="glyphicon glyphicon-search"></i>
</button>
<button class="list-group-item btn-clear" ng-click="toState('options')" ng-class="{highlight:(state=='options')}">
<i class="glyphicon glyphicon-cog"></i>
</button>
<button class="list-group-item btn-clear" ng-click="toState('about')" ng-class="{highlight:(state=='about')}">
<i class="glyphicon glyphicon-question-sign"></i>
</button>
<!-- <button class="list-group-item btn-clear" ng-click="toState('edit')" ng-class="{highlight:(state=='edit')}">
<i class="glyphicon glyphicon-pencil"></i>
</button> -->
</div>
</div>
<div id="side" ng-class="{wider:(state=='about'||state=='edit')}">
<!-- <p>{{state}}</p> -->
<div id="slider" ng-show="state.substring(0,6)=='slider'">
<h1 ng-show="state=='slider-full'">
Spoiler Control
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<div id="slider-readout" title="Click to adjust plot spoilers">
<!-- <span class="glyphicon glyphicon-menu-hamburger" ng-click="toState('menu')"></span> -->
<span ng-show="slider.show=='episodes'" ng-bind="episodes[slider.currentEpisode].name" title="{{episodes[slider.currentEpisode].name}}" ng-click="toState('slider-full')"></span>
<span ng-show="slider.show=='chapters'" ng-bind="chapters[slider.currentChapter].name" title="{{chapters[slider.currentChapter].name}}" ng-click="toState('slider-full')"></span>
</div>
<div id="slider-control" ng-show="state=='slider-full'">
<div class="btn-group btn-group-2" role="group">
<button type="button" class="btn" ng-click="slider.show='episodes';" ng-class="{'btn-primary':(slider.show=='episodes'), 'btn-default':(slider.show!='episodes')}">
<i class="glyphicon glyphicon-facetime-video"></i>
HBO Show
</button>
<button type="button" class="btn" ng-click="slider.show='chapters';" ng-class="{'btn-primary':(slider.show=='chapters'), 'btn-default':(slider.show!='chapters')}">
<i class="glyphicon glyphicon-book"></i>
Books
</button>
</div>
<rzslider
id="slide-episodes"
ng-show="slider.show=='episodes'"
rz-slider-model="slider.currentEpisode"
rz-slider-options="{floor:0, ceil:episodes.length-1}">
</rzslider>
<rzslider
id="slide-chapters"
ng-show="slider.show=='chapters'"
rz-slider-model="slider.currentChapter"
rz-slider-options="{floor:0, ceil:chapters.length-1}">
</rzslider>
<div class="btn-group btn-group-5" role="group">
<button type="button" class="btn btn-default" ng-click="slideTo(-10)">
<i class="glyphicon glyphicon-step-backward"></i>
</button>
<button type="button" class="btn btn-default" ng-click="slideTo(-1)">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
<a role="button" class="btn btn-default" ng-show="slider.show=='episodes'" ng-href="{{episodes[slider.currentEpisode].url}}">
<i class="glyphicon glyphicon-link"></i>
</a>
<a role="button" class="btn btn-default" ng-show="slider.show=='chapters'" ng-href="{{chapters[slider.currentChapter].url}}">
<i class="glyphicon glyphicon-link"></i>
</a>
<button type="button" class="btn btn-default" ng-click="slideTo(1)">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
<button type="button" class="btn btn-default" ng-click="slideTo(10)">
<i class="glyphicon glyphicon-step-forward"></i>
</button>
</div>
</div>
</div>
<div id="location" ng-show="state=='location'">
<h1>
Location Details
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<div class="list-group">
<a ng-href="{{locationDetail.url}}" role="button" class="list-group-item btn-clear" ng-if="locationDetail.name">
<i class="glyphicon glyphicon glyphicon-map-marker"></i>
{{locationDetail.name}}
<i class="glyphicon glyphicon-menu-right pull-right"></i>
</a>
<a ng-href="{{locationDetail.houseUrl}}" role="button" class="list-group-item btn-clear" ng-if="locationDetail.houseUrl">
<img ng-src="{{locationDetail.houseImg}}">
{{locationDetail.house}}
<i class="glyphicon glyphicon-menu-right pull-right"></i>
</a>
<a ng-href="{{locationDetail.direct}}" role="button" class="list-group-item btn-clear" ng-if="locationDetail.direct">
<i class="glyphicon glyphicon-pushpin"></i>
Direct Link
<i class="glyphicon glyphicon-menu-right pull-right"></i>
</a>
</div>
</div>
<div id="characters" ng-show="state=='characters'">
<h1>
Characters
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<ul class="list-group" qm-list="{{characters.length}}">
<li ng-repeat="character in characters" class="list-group-item">
<a ng-href="{{character.house.url}}" ng-if="character.house!=''" class="hasimg" target="_blank">
<img ng-src="{{character.house.img}}">
</a>
<a ng-href="{{character.url}}" ng-class="{noimg:(character.house=='')}">{{character.name}}</a>
<toggle-switch
ng-model="options.characters[character.key]"
on-label="Show"
off-label="Hide"
class="pull-right">
</toggle-switch>
</li>
</ul>
</div>
<div id="search" ng-show="state=='search'">
<h1>
Search
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<div class="input-group">
<input id="searchInput" ng-model="search" type="text" class="form-control" placeholder="towns, houses, characters, titles">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
<div class="list-group" ng-show="search!==''">
<button
ng-repeat="result in searchResults | filter:{ title: search }"
class="list-group-item"
ng-click="resultClick(result)">
<i class="glyphicon {{result.icon}}"></i>
<span>
{{result.title}}
<small>{{result.subtitle}}</small>
</span>
<i class="glyphicon glyphicon-menu-right pull-right"></i>
</button>
</div>
</div>
<div id="options" ng-show="state=='options'">
<h1>
Options
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<ul class="list-group">
<li class="list-group-item">
Character Paths
<toggle-switch
ng-model="options.characterPaths"
on-label="Show"
off-label="Hide"
class="pull-right">
</toggle-switch>
</li>
<li class="list-group-item">
House Heraldry
<toggle-switch
ng-model="options.houseHeraldry"
on-label="Show"
off-label="Hide"
class="pull-right">
</toggle-switch>
</li><li class="list-group-item">
Geographic Regions
<toggle-switch
ng-model="options.geographicRegions"
on-label="Show"
off-label="Hide"
class="pull-right">
</toggle-switch>
</li><li class="list-group-item">
Political Allegiances
<toggle-switch
ng-model="options.politicalAllegiances"
on-label="Show"
off-label="Hide"
class="pull-right">
</toggle-switch>
</li>
</ul>
</div>
<div id="about" ng-show="state=='about'" qmList>
<h1>
About Quatrermaester.info
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<p>This is a map of the world depicted in the novel series <a target="_blank" href="http://www.georgerrmartin.com/bibliography.html">A Song of Ice & Fire</a> and the TV adaptation, <a target="_blank" href="http://www.hbo.com/game-of-thrones">A Game of Thrones</a>. The website is designed to display useful information on top of the map layer and link to additional details on the <a target="_blank" href="http://awoiaf.westeros.org">Westeros.org wiki site</a>.</p>
<p>If you haven't finished reading the novels or watching the shows, you can hide any details that might spoil the plot. Simply drag the slider in the top-right corner to the last chapter or episode that you've completed. You can move the slider with arrow buttons in order to animate the characters' paths. Keep in mind that the slider only controls this map; any page you may open on <span style="font-style:italic;">the wiki site may contain spoilers</span>.</p>
<!-- <p>If you'd like to share this map with others and point them to a specific location, hold down the Ctrl button while you click on the map. You will be given a URL that will automatically center the map on that point. (e.g. <a id="lightboxLink" href="#@Winterfell">Winterfell</a>)</p> -->
<p>The map layer used in this website was drawn by <a target="_blank" href="http://www.sermountaingoat.co.uk/map">theMountainGoat</a>, based on previous work by <a target="_blank" href="http://www.cartographersguild.com/finished-maps/6683-westeros-fan-project.html">Tear of the Cartographer's Guild</a>. The map interface is built on the <a target="_blank" href="http://developers.google.com/maps/documentation/javascript/">Google Maps API</a>, through the <a target="_blank" href="http://angular-ui.github.io/angular-google-maps/">angular-google-maps directive</a>. It displays custom tiles generated by <a target="_blank" href="http://www.bartlett.ucl.ac.uk/casa/latest/software/gmap-image-cutter">GMap Image Cutter Version 1.42</a>. Intellectual property of <span style="font-style:italic;">A Song of Ice and Fire</span>, this map and all locations belong to <a target="_blank" href="http://www.georgerrmartin.com">George R.R. Martin</a>. If you find any errors in the map data, please <a target="_blank" href="mailto:ryan@rslc.us">let me know</a>.</p>
<p>You may notice that this map is contradicted, in places, by the maps shown in <a target="_blank" href="http://www.randomhouse.com/book/221316/the-lands-of-ice-and-fire-a-game-of-thrones-by-george-rr-martin/other">The Lands of Ice and Fire</a>. Since the maps in that collection are clearly copyrighted material, I have no intention of copying them directly and I'm going to remain cautious in pulling details from them to correct this website. You can find low-resolution versions of the official maps on <a target="_blank" href="http://www.fantasticmaps.com/the-lands-of-ice-and-fire/">the artist's website</a> or in Random House's <a target="_blank" href="https://itunes.apple.com/hk/app/george-r.-r.-martins-world/id570015223">iOS</a> & <a target="_blank" href="https://play.google.com/store/apps/details?id=com.randomhouse.woiaf">Android</a> apps.</p>
<h1>Other Resources</h1>
<ul>
<li>
<a target="_blank" href="http://joeltronics.github.io/got-book-show/bookshow.html">Game of Thrones episode chapter coverage</a>
</li>
<li>
<a target="_blank" href="https://www.reddit.com/r/gameofthrones/comments/1g1yvk/s03e10_narrative_chart_seasons_13_completed/">Game of Thrones (S1-3) Narrative Chart</a>
</li>
<li>
The Wars of Westeros Mapped Out - Parts
<a target="_blank" href="https://www.reddit.com/r/asoiaf/comments/4sg7cn/spoilers_everything_the_wars_of_westeros_mapped/">1</a>,
<a target="_blank" href="https://www.reddit.com/r/asoiaf/comments/4ss3hp/spoilers_everything_the_wars_of_westeros_mapped/">2</a>,
<a target="_blank" href="https://www.reddit.com/r/asoiaf/comments/4t11n8/spoilers_everything_the_wars_of_westeros_mapped/">3</a>,
<a target="_blank" href="https://www.reddit.com/r/asoiaf/comments/4tckjy/spoilers_everything_the_wars_of_westeros_mapped/#">4</a>,
<a target="_blank" href="https://www.reddit.com/r/asoiaf/comments/4tofm3/spoilers_everything_the_wars_of_westeros_mapped/">5</a>,
</li>
<!-- <li>
<a target="_blank" href="#">Something</a>
</li>
<li>
<a target="_blank" href="#">Something</a>
</li>
<li>
<a target="_blank" href="#">Something</a>
</li>
<li>
<a target="_blank" href="#">Something</a>
</li>
<li>
<a target="_blank" href="#">Something</a>
</li> -->
<li>
<a target="_blank" href="http://viewers-guide.hbo.com/game-of-thrones/season-1/episode-1/map/location/27/kings-landing">HBO Viewers' Guide</a>
</li>
</ul>
</div>
<div id="edit" ng-show="state=='edit'">
<h1>
Editor
<i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
</h1>
<table>
<tbody ng-repeat="path in mapModels.editablePaths">
<tr ng-repeat="point in path.path">
<td>{{path.key}}</td>
<td>{{point.location}}</td>
<td>{{point.latitude | number:4}}</td>
<td>{{point.longitude | number:4}}</td>
</tr>
</tbody>
</table>
<hr>
<table>
<tbody ng-repeat="polygon in mapModels.editableLoyaltyRanges">
<tr ng-repeat="point in polygon.path">
<td>{{polygon.key}}</td>
<td>{{point.latitude | number:4}}</td>
<td>{{point.longitude | number:4}}</td>
</tr>
</tbody>
</table>
<hr>
<table>
<tbody>
<tr ng-repeat="point in clickHistory">
<!-- <td></td>
<td></td> -->
<td>{{point.latitude | number:4}}</td>
<td>{{point.longitude | number:4}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="legend" ng-if="options.politicalAllegiances">
<h1>Ruling Sovereigns</h1>
<ul class="list-group" >
<li class="list-group-item" ng-repeat="belligerent in belligerents">
<a ng-href="{{belligerent.houseUrl}}" class="hasimg" target="_blank">
<img ng-src="{{belligerent.houseImg}}">
</a>
<a ng-href="{{belligerent.url}}" >{{belligerent.title}} {{belligerent.name}}</a>
<span class="legend-color" style="background-color: {{belligerent.color}};"></span>
</li>
</ul>
</div>
</body>
</html>