Wikivoyage

Wikivoyage:Gadget-MapTools.js

Index > Dokumentation > Software-Pakete > Map Package > Gadget-MapTools.js

Dieser Artikel enthält technische Hintergrundinformationen zum Skript Gadget-MapTools.js.

Das Skript fügt mehrere Erweiterungen zu den Kartendarstellung hinzu. Dazu gehört, dass mit dem GeoData-Indikator eine Karte in den Artikel eingefügt werden kann.

Benötigte Bibliotheken Bearbeiten

Verwendbarkeit Bearbeiten

Unterstützte Skins
alle.
Eignung für andere Wikis
geeignet nur für Wikivoyage. Internationalisierung ist vorbereitet.
Zwingend erforderlich
Das umschließende Tag der Marker (Wrapper-Tag, class: vcard) für {{Marker}} und {{vCard}} muss die spezifizierten Attribute data-color für die Farbe, data-symbol für den Symboltyp und data-name für den Namen der Einrichtung enthalten.
Für die Indikator-Karte muss es (mindestens) ein Tag mit der Klasse wv-coord-indicator geben, wobei das erste vorkommende Tag die Angaben data-lon, data-lat und data-zoom enthalten muss. Ein derartiges Tag wird z. B. durch die Vorlage {{GeoData}} erzeugt. Im Skin Minerva können keine Indikatoren angelegt werden.
Browser-Unterstützung
alle modernen Browser
Die Unterstützung für den Internet Explorer wurde am 4. Februar 2023 eingestellt. Der Hersteller Microsoft hat den Support für diesen Browser eingestellt.
Eignung für mobile Geräte
ja.

Aufruf Bearbeiten

  • Das Skript ist als Helferlein eingebunden.

Maximaler Zoom-Level Bearbeiten

In den Skripten:

definiert die Variable maxZoomLevel den deximal möglichen Zoom-Level. Er beträgt gegenwärtig 19.

Benötigte Dateien Bearbeiten

Funktionen Bearbeiten

Hauptfunktionen Bearbeiten 

var init = function()

Die Initialisierungsfunktion ruft nach dem Laden externer Kartendaten von OpenStreetMap und Wikimedia Commons über getKartographerLiveData(); nachfolgende Hauptfunktionen nacheinander auf.

Gemeldet in Phabricator (?)
Task T183770 
var getData = function()

Diese Funktion liest die Kartendaten aus dem Artikel. Zuerst wird versucht, die JavaScript-Variable wgKartographerLiveData auszulesen. Wenn diese Variable fehlt oder nur leere Arrays enthält, werden die Kartendaten aus den {{Marker}}- und {{vCard}}-Vorlagen entnommen. In letzterem Fall werden nur Einzelkoordinaten, aber keine Masken und Shapes erfasst, da diese nicht im HTML-Quelltext vorhanden sind.

Sind keine Kartendaten vorhanden, wird ein Marker auf den Kartenmittelpunkt gesetzt. 

var indicatorMap = function()

Diese Funktion sucht nach dem Geo-Indikator anhand des Klassenattributs wv-coord-indicator. Die Indikator-Abbildung, eine Erdkugel, mit dem Klassenattribut map-globe-default wird ausgeblendet und die Abbildung mit dem Klassenattribut map-globe-js eingeblendet. Die letztere Abbildung erhält einen Event-Handler zum Öffnen und Schließen einer Karte am Artikelanfang.

Für die Karte wird dazu ein Container mit der id wv-topMap angelegt. 

var nearbyMap = function()

Diese Funktion versieht HTML-span-Codes der Art: 

<span class="wv-open-nearby-map" data-lat="..." data-lon="..." data-dialog="true" data-zoom="[0...19]">Umgebungskarte</span>

mit einem Event-Handler zum Öffnen einer Umgebungskarte im Vollbildmodus. Zusätzlich wird das dazugehörige Eltern-Tag angezeigt, d.h., eine vorher gesetzte Stilvorlage display: none; überschrieben.

data-lat und data-lon stellen die Koordinate des Kartenzentrums dar, data-zoom ist der gewünschte Zoom-Wert. Mit data-dialog="true/false" wird festgelegt, ob die Karte den Kartendialog (Fußzeile, Sidebar) nutzen soll.

Den genannten HTML-Code erzeugt die Vorlage {{Maps}}.

Diese Funktion ersetzt die veraltete Vorlage PoiMap2.

Gemeldet in Phabricator (?)
Task T180909 
var replaceMaplinks = function()

Diese Funktion ersetzt alle vom Tag <maplink> erzeugten Links durch einen neuen Event-Handler. Die erzeugten Karten besitzen dann die Wikivoyage-Controls Nearby und Layers.

Bei automatisch nummerierten Markern wird als Titel nicht nur die Markernummer, sondern auch die zugehörige Ortsbezeichnung mit angegeben.

Wenn JavaScript abgeschaltet ist, bleibt das Standardaufrufverhalten der Karten als Fallback erhalten. 

var articlesMap = function()

Diese Funktion fügt in bereits bestehende <div>-Container mit der id wv-articles-map eine Karte mit allen Artikeln ein: 

<div id="wv-articles-map"></div>

Von dieser Funktion machte der Artikel Wikivoyage:Artikelübersicht Gebrauch. Die Höhe des Containers wird mit CSS-Stilvorlagen festgelegt. Die Höhe lässt sich so an das Ausgabemedium anpassen.

Diese Funktion ersetzt das Serverskript:

[{{Mapserver}}/w/artmap.php?lang=de Weltweit] 

var addMagnifyButton = function()

Diese Funktion fügt an jede mit dem Tag <mapframe> erzeugte Karte einen Vergrößerungs-Schalter hinzu. Die Vergrößerung erfolgt um mindestens eine Zoom-Stufe, falls der Zoom der Karte noch nicht den Wert 19 besitzt. Aus dem Verhältnis zwischen Karten und Bildschirmgröße kann die Zoomstufe auch um zwei oder drei, falls möglich, erhöht werden.

Hilfsfunktionen Bearbeiten 

var createMap = function( id, center, zoom, caption, options )

Diese Funktion erzeugt eine Karte. Dies können sowohl in den Artikel eingebettete Karten als auch Vollbildkarten sein.

  • id ist die id des Karten-Containers.
  • center ist ein Array mit der Koordinate des Kartenmittelpunkts in der Form [ lat, lon ]
  • zoom ist die gewünschte Zoomstufe.
  • caption ist die Kartenunterschrift.
  • options ist ein Objekt mit verschiedenen Kartenspezifikationen:
var options = {
	withClose: true,
	withControls: true,
	withData: true,
	withDialog: false,
	toggleNearby: false,
	allowFullScreen: true,
	isFullScreen: false,
	featureType: 'mapframe'
};
  • withClose legt einen Schließen-Schalter an, wenn true gesetzt.
  • withControls legt die Wikivoyage-Schalter Nearby und Layers an, wenn true gesetzt.
  • withData benutzt die Kartendaten aus dem Artikel für die Kartendarstellung, wenn true gesetzt.
  • withDialog benutzt den Kartographer-Dialog mit Sidebar und Fußzeile im Vollbildmodus, wenn true gesetzt.
  • toggleNearby aktiviert den Nearby-Schalter bereits beim Aufbau der Karte, wenn true gesetzt. Hierzu ist eine Anpassung des Skripts Mediawiki:Kartographer.js nötig.
  • allowFullScreen aktiviert den Vollbild-Schalter, wenn true gesetzt.
  • isFullScreen legt fest, ob die Karte im Vollbildmodus angelegt wird, wenn true gesetzt.
  • featureType legt fest, ob die Karte eingebettet (mapframe) oder als Vollbildkarte über einen Link/Event-Handler (maplink) erzeugt wird.
Gemeldet in Phabricator (?)
Task T181604

Der Kartendarstellung kommt zugute, dass der GeoJSON-Code des Daten-Arrays nicht auf das GeoJSON+simplestyle-Schema geprüft wird. Wenn die Daten dem simplestyle entsprechen, sind die automatisch gültige GeoJSON-Daten. Somit gibt es die Beschränkung auf einstellige Zahlenangaben nicht. 

var singleDataset = function( color, symbol, title, lat, lon, description, group )

Die Funktion fügt einen einzelnen Datensatz (ein Kartenfeature) in das GeoJSON-Array ein. Sie wird von der Funktion getData() aufgerufen.

  • color legt die Markerfarbe fest.
  • symbol legt die Symbolart fest. Dies sind MAKI-Bezeichner, Kleinbuchstaben oder Zahlen.
  • title legt den Markertitel fest.
  • lat legt den Breitengrad des Marker-Pins fest.
  • long legt den Längengrad des Marker-Pins fest.
  • description enthält eine Beschreibung zum Marker-Pin. Dies ist üblicherweise eine Abbildung.
  • group legt die Marker-Gruppe fest.

Stilvorlagen Bearbeiten 

/* Indicator map */
#wv-topMap {
	height: 400px;
	border: 1px solid #c8ccd1;
	margin-bottom: 1em;
}

#wv-articles-map {
	height: 600px;
	border: 1px solid #c8ccd1;
}
@media (max-width: 1300px) { /* laptop and smartphone support */
	#wv-articles-map {
		height: 450px;
	}
}
@media (max-width: 800px) {
	#wv-articles-map {
		height: 350px;
	}
}
@media (max-width: 600px) {
	#wv-articles-map {
		height: 300px;
	}
}

#wv-topMap .closeControl, #wv-fullScreenMap .closeControl, #wv-articles-map .closeControl {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E");
	background-position: center center;
}

/* Minerva skin support*/
.mw-kartographer-container .magnify { /* magnify button of Minerva skin */
	float: right;
	margin-left: 3px;
	margin-right: 0;
	display: block !important;
}
.mw-kartographer-container div.magnify a {
	background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.png?4f704);
	background-image: linear-gradient( transparent,transparent ),url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22 standalone=%22no%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 11 15%22 width=%2215%22 height=%2211%22%3E%0A %3Cg id=%22magnify-clip%22 fill=%22%23fff%22 stroke=%22%23000%22%3E%0A %3Cpath id=%22bigbox%22 d=%22M1.509 1.865h10.99v7.919h-10.99z%22/%3E%0A %3Cpath id=%22smallbox%22 d=%22M-1.499 6.868h5.943v4.904h-5.943z%22/%3E%0A %3C/g%3E%0A%3C/svg%3E%0A");
	display: block;
	text-indent: 15px;
	white-space: nowrap;
	overflow: hidden;
	width: 15px;
	height: 11px;
	text-decoration: none;
}

Karteneinbindung Bearbeiten

Kategorien Bearbeiten

  • Wartungskategorie: Keine
Abgerufen von „https://de.wikivoyage.org/w/index.php?title=Wikivoyage:Gadget-MapTools.js&oldid=1550864“