Skip to content
This repository was archived by the owner on Apr 15, 2019. It is now read-only.

Init New GoT Map and Options

Maximilian Bandle edited this page Mar 26, 2016 · 5 revisions

#Example

var mymap = new gotmap("#map", {timeline:"#timeline"});

Initiates a map to a DOM element with the id="map" and the timeline into another DOM Element.

#Constructor

var mymap = new gotmap(mapContainer, options);

##mapContainer mapContainer either is a string like #map which is used to find the element using jQuery or a DOM node to insert the map.

Options

These are used overwrite the default map behavior:

Default Behavior


var defaultOptions = {
	'apiLocation':'http://api.got.show',
	'filter':false,
	'timeline':false,
	'characterBox':false,
	'cityDetails':function(modal, city) {...},
	'characterDetails':function(modal, character) {...},
	'defaultPersonImg':'http://map.got.show/mockup/img/persons/dummy.jpg',
	'deadPersonImg':'http://map.got.show/mockup/img/persons/skull.png',
	'personImageBaseUrl':'http://images.got.show',
	'cityDataSource':'/cities',
	'realmDataSource':'/regions',
	'pathDataSource':'/characters/paths',
	'episodeDataSource':'/episodes',
	'characterDataSource':'/characters',
	'pinDataSource':'/characters/locations',
	'bgTiles':'http://tiles.got.show/bg/{z}/y{y}x{x}.png',
	'labelTiles':'http://tiles.got.show/labels/{z}/y{y}x{x}.png',
	'errorTile':'http://tiles.got.show/blank.png',
	'characterColors':['#F44336', '#2196F3', ... , '#FF5722'],
	'episodesRange': [1,2]
};

###apiLocation This is the base URL for the API Location. All other options containing source like realmDataSource or pinDataSource will be prepended with this URL.

filter

A string like #filter which is used to find the element using jQuery or a DOM node to use as input element. The specified element should be a <input />

timeline

A string like #timeline which is used to find the element using jQuery or a DOM node to use as timeline container. GotMap automatically inserts the slider structure and adds the class gotmap-timeline:

<div id="timeline" class="gotmap-timeline">
  <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    ...
  </div>
  <p>S1E1: Winter Is Coming - S1E2: The Kingsroad (TV)</p>
</div>

###characterBox A string like #characters which is used to find the element using jQuery or a DOM node to use as character list. GotMap automatically adds the class gotmap-character:

###cityDetails You can provide a callback function which is invoked when clicking on a city

###episodesRange An array with the bounds of the displayed episodes: First element: first displayed episode Second element: last displayed episode

function (modal, city) {
  var body = modal.find(".modal-body"); // Body Element
  var name = city.name; // City Name (all DB attributes are accessible)
}

###characterDetails You can provide a callback function which is invoked when clicking on a character

function (modal, character) {
  var body = modal.find(".modal-body"); // Body Element
  var name = character.name; // Character Name (all DB attributes are accessible)
}

###defaultPersonImg This image is used when no image is specified in the DB.

###deadPersonImg This icon is displayed at the path marker when the person is dead.

###cityDataSource GoT Map loads all the city data from this url (apiLocation is prepended). The response must contain name, coordX, coordY, type and priority in JSON Format.

[{
  "name":"King's Landing", 
  "coordX":"-84.48536531890602",
  "coordY":"45.805474068515245",
  "type":"city",
  "priority":2
},...]

###realmDataSource GoT Map loads all the realm/region data from this url (apiLocation is prepended). The response must contain name, color, path in JSON Format.

[{
  "name":"The Lands of Always Winter", 
  "color":"#FFF",
  "path":[[84.99013259851141,-98.69138835608068], ... ]
},..]

###pathDataSource GoT Map loads all the paths data from this url (apiLocation is prepended). The resource must be able to handle GET request filtering for character names. The response must contain from, to, alive, path in JSON Format and must be ordered by from.

[{
  "from":1,
  "to":2,
  "path":[[78.60937753613514, -105.31330572428169, "Winterfell"],
          [78.87133549569842, -104.35496490808343, "Holdfast"],
          [78.60937753613514, -105.31330572428169, "Winterfell"]],
  "alive":true
},...]

###episodeDataSource GoT Map loads all the episode data from this url (apiLocation is prepended). The response must contain name, season, totalNr and nr in JSON Format.

[{
  "name":"The Kingsroad",
  "nr":"2",
  "season":"1",
  "totalNr":2,
},...]

###characterDataSource GoT Map loads all the character data from this url (apiLocation is prepended). The response must contain name in JSON Format. Additionally alias, imageLink, hasPath and house is processed.

[{
  "name":"Jon Snow",
  "imageLink":"/images/thumb/6/65/Jon_Snow_by_AniaEm.jpg/300px-Jon_Snow_by_AniaEm.jpg",
  "title":"Lord Commander of the Night's Watch",
  "house":"House Stark",
  "hasPath":true
},...]

###pinDataSource GoT Map loads all the character pins from this url (apiLocation is prepended) when no path is present.

###bgTiles This url is passed to leaflet and used to fetch the basemap tiles.

###labelTiles This url is passed to leaflet and used to fetch the label tiles.

###errorTile This url is passed to leaflet and shown in case a tile isn't accessible.

###characterColors These colors are used for markers and paths. After more than characterColors.count characters were added, Got Map starts over with the first.

Clone this wiki locally