Widget:Karte

Aus Guild Wars 2 Wiki
Zur Navigation springen Zur Suche springen

Zweck

Eine interaktive Karte auf Basis der API zum einbinden in Infoboxen und Artikel oder als eigenständige Seiten.

Hinweis Icon.png Hinweis: Dieses Widget wird mittels der API bereitgestellt und befindet sich noch in der Testphase. Diskussionen und Verbesserungsvorschläge hier: GW2Wiki Diskussion:Projekte/Interaktive Karten. Falls Du einen Fehler findest, welcher mit der Kartendarstellung zusammenhängt, melde diesen bitte dort. Danke!

Parameter

Allgemein

lang
Sprache (1=de, 2=en, 3=es, 4=fr), default: 1
disable_controls
(bool), blendet die Steuerelemente aus (sinnvoll bei kleinen Karten), default: 0
disable_eventdata
(bool), deaktiviert das Laden von Eventdaten, was normal einen weiteren API-Zugriff erfordert, default: 0

Kartenauswahl

continent_id
id des Kontinents (1=Tyria, 2=Die Nebel), default: 1
floor_id
id der Ebene, default: 2
region_id
id der Region
map_id
id der Karte, nur in Verbindung mit region_id
poi_id
id eines Punktes auf der Karte, nur in Verbindung mit region_id, map_id und poi_type
poi_type
Typ des Kartenpunktes (1=landmark, 2=sector, 3=skill, 4=task, 5=vista, 6=waypoint)

Größenkontrolle

width
Breite in Pixel, default 800
w_percent
(bool), Breitenangabe in %, default: 0
height
Höhe in Pixel, default: 450
h_percent
(bool), Höhenangabe in %, default: 0

Sonstiges

linkbox
Breite in Pixel, zeigt eine Liste der Kartenpunkte in der angegebenen Breite an, default: 0
polyline
Sammlung von Pixelkoordinaten zur Darstellung einer Polylinie nach dem Schema: X,Y<space>... Es können mehrere Polylinien mit einem Semikolon getrennt Dargestellt werden. Folgende Parameter können zum Ändern des Aussehens verwendet werden:
  • color: Farbe als 3- oder 6-Stelliger Hexadezimalwert (f0a oder ff00aa), default: ffe500
  • width: Dicke der Linie in Pixel, default: 3
  • opacity: Deckkraft der Linie in Prozent, default: 80
  • style: Style der Linie, momentan nur "dash", stellt die Linie als Strichpunktlinie dar
  • type: Typ der Liniendekoration: "arrow" zeichnet einen Richtungspfeil alle 150 Pixel, "marker" setzt ein Marker-Icon an den Anfang und ans Ende der Linie
Einen Editor für Polylinien gibt es unter Widget:Karte/Polyline-Editor.
markers
Sammlung von Pixelkoordinaten zur Darstellung von einzelnen Markern nach dem selben Schema wie Polylinien, momentan keine weiteren Parameter verfügbar.

Beispiel

{{#Widget:Karte|width=100|w_percent=1|height=250|region_id=4|map_id=15|poi_id=225|poi_type=4|linkbox=300|polyline=color=ff9c31 width=4 opacity=80 type=arrow 12418,12867 12410,12900 12410,12934...}}

Hast du Javascript deaktiviert oder verhindert irgendein Programm (Antivirus-Software, Werbeblocker, etc.) die Darstellung? Falls Du einen Scriptblocker wie etwa NoScript für Firefox oder ScriptSafe für Chrome benutzt, solltest Du neben http://wiki-de.guildwars2.com/ auch http://cdn.leafletjs.com/ und https://d1h9a8s8eodvjz.cloudfront.net/ auf die Whitelist setzen.

Bekannte Probleme

Die Links in der Liste sind völlig durcheinander
Das liegt daran, dass die Kartendaten in der API-Abfrage unsortiert sind, und innerhalb des Scripts bisher keine weitere Sortierung vorgenommen wird.
Die Skillpunkte und Vistas haben eine völlig wirre Beschriftung
Da Vistas keine Namen haben wird dort nur die zugehörige ID angezeigt. Für die Fertigkeitsherausforderungen werden momentan weder Namen noch eine ID von der API zurückgegeben, daher werden dort nur die Koordinaten angegeben.
Die Icons verdecken den Zonennamen
Das ist auch gut so. Man könnte zwar mittels der CSS-Eigenschaft "z-index" den Namen über die Icons "heben", was allerdings zur Folge hätte, dass man darunterliegende Icons nicht mehr anklicken kann.
Es wird nur ein Teil der Karte dargestellt, obwohl sie auf kleinerer Zoomstufe ins Fenster passen würde
Das mit dem Zoom ist gar nicht so einfach: leaflet.js stellt den automatisch anhand der Bildschirmgröße bzw. der daraus resultierenden Containergröße ein und positioniert die Karte anhand der "bounding box", welche die API vorgibt, auf einem möglichst großen Zoomlevel. Da die Karten alle unterschiedlich groß sind, kann man nicht einfach Zoomlevel X einstellen - das würde in vielen Fällen zu unerwünschten Ergebnissen führen.
Die Karte beginnt zu hüpfen, wenn ich weit herauszoome
Dieser Bug wurde mit leaflet v0.6.3 "eingebaut": vorher wurde die minimale Zoomstufe automatisch festgelegt (s.o.), sodass man nicht weiter herauszoomen konnte, sobald die "bounding box" kleiner als der Kartencontainer war - diese Beschränkung wurde nun aufgehoben und verursacht dafür das hüpfen.
Ich sehe überhaupt garkeine Karte o.O
Hast du Javascript deaktiviert oder verhindert irgendein Programm (Antivirus-Software, Werbeblocker, etc.) die Darstellung? Falls Du einen Scriptblocker wie etwa NoScript für Firefox oder ScriptSafe für Chrome benutzt, solltest Du neben http://wiki-de.guildwars2.com/ auch http://cdn.leafletjs.com/ und https://d1h9a8s8eodvjz.cloudfront.net/ auf die Whitelist setzen.

Code

Den vollständigen Code und eine Anleitung zur Implementation gibt es unter https://github.com/codemasher/Guild-Wars-2-WikiMaps (englisch).

Erzeugter HTML

<div class="gw2map" data-language="1" data-disable_controls="1" data-continent_id="1" data-floor_id="2" data-region_id="4" data-map_id="50" 
	data-poi_id="1057" data-poi_type="1" data-width="250" data-w_percent="0" data-height="250" data-h_percent="0" data-linkbox="0"></div>

MediaWiki:Common.js

jQuery(document).ready(function(){
	if($('.gw2map').length){
	        $.each([
			"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css",
			"https://d1h9a8s8eodvjz.cloudfront.net/fonts/menomonia/08-02-12/menomonia.css",
			"https://d1h9a8s8eodvjz.cloudfront.net/fonts/menomonia/08-02-12/menomonia-italic.css"
		], function(){
			var ref = document.createElement("link");
			ref.setAttribute("rel", "stylesheet");
			ref.setAttribute("href", this);
			document.getElementsByTagName("head")[0].appendChild(ref);
		});
		$.ajax("https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js", { cache: true, dataType: "script" }).done(function(){
			$.ajax("https://wiki-de.guildwars2.com/index.php?title=Widget:Karte/JS&action=raw&ctype=text/javascript", { cache: true, dataType: "script" }).done(function(){
				$(".gw2map").each(function(){
					GW2Maps.init(this);
				});
			});
		});
	}
});

MediaWiki:Common.css

.gw2map{
	width: 800px;
	height: 450px;
	background-color: #fff;
}

.sector_text{
	color: #fff;
	font-family: Menomonia,sans-serif;
	font-style: italic;
	font-size: 20px;
	white-space: nowrap;
	text-align: center;
}

.table-row{
	display: table-row;
}

.table-cell{
	display: table-cell;
	vertical-align: top;
}

.linkbox{
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	padding: 0 .25em 0 .25em;
}

.linkbox > div{
	white-space: nowrap;
	cursor: pointer;
}

.linkbox > div.header{
	cursor: default;
	font-size: 200%;
	font-weight: bold;
	padding: 0.25em 0 0.25em 0;
}

.linkbox > div.header.sub{
	font-size: 150%;
	padding: 0.25em 0 0.25em 0;
}

.linkbox > div:not(.header):not(.sub):hover{
	background-color: #ccc;
}
Abgerufen von „https://wiki-de.guildwars2.com/index.php?title=Widget:Karte&oldid=588824“