MediaWiki:Gadget-WikiMap.js: Unterschied zwischen den Versionen

Aktuelle Version vom 3. Juli 2026, 08:46 Uhr

/**
 * Gadget-WikiMap.js
 * ============================================================================
 * Zentrale Leaflet-Karten-Engine für das Wiki.
 *
 * KONZEPT
 * -------
 * EINE zentrale Datenquelle (MediaWiki:WikiMap-Orte.json) hält ALLE Orte.
 * Jede Wiki-Seite bindet nur einen leeren <div class="wikimap"> ein und sagt
 * über data-Attribute, welcher Ort gerade "aktiv" ist. Dieses Gadget zeichnet
 * dann die Karte, alle Pins, hebt den aktiven Pin hervor und zentriert ihn.
 *
 * Verschiebst du einen Ort, änderst du EINE Zeile in der zentralen JSON –
 * jede Karte im ganzen Wiki ist sofort aktuell.
 *
 * EINBINDUNG AUF EINER SEITE
 * --------------------------
 *   <div class="wikimap" data-aktiv-ort="gaestehaus-mustertal"></div>
 *
 * data-Attribute:
 *   data-aktiv-ort   ID des hervorgehobenen Ortes (rot, zentriert, Popup auf)
 *   data-filter      nur Orte dieser "kategorie" zeigen. Mehrere Kategorien
 *                    kommagetrennt moeglich, z.B. "asiatisch,gasthaus,imbiss"
 *   data-pin         Ad-hoc-Pin: "lat,lon" zeigt GENAU EINEN Pin an diesen
 *                    Koordinaten und KEINE Orte aus der zentralen JSON.
 *                    Fuer Veranstaltungsseiten (Eventform) gedacht.
 *   data-pin-name    Optional zum Pin: Text im Popup.
 *   data-gemeinden   "ja" => Gemeinde-Umrisse einblenden (Klick => Seite)
 *   data-hoehe       Pixel-Höhe der Karte (optional, sonst CSS-Default)
 *
 * ORTE-FELDER (WikiMap-Orte.json)
 * -------------------------------
 *   id         Pflicht. Anzeigename im Popup UND Ziel-Wikiseite beim Klick.
 *   geo        Koordinaten als String "lat,lon" – direkt aus OSM.org oder
 *              OrganicMaps kopierbar, Leerzeichen nach dem Komma erlaubt.
 *              Beispiel: "47.7073509,15.9933643"
 *   lat, lon   Alternative zu geo: Koordinaten als zwei Zahlenfelder.
 *   kategorie  Optional. Für Filter und Farben.
 *   seite      Optional. Übersteuert das Klick-Ziel. Wiki-Seitenname ODER
 *              externe Adresse (beginnend mit http:// oder https://).
 *
 * ABHÄNGIGKEIT: Leaflet 1.9.x + Leaflet.fullscreen. Dieses Gadget lädt sie
 * bei Bedarf selbst (siehe LEAFLET_QUELLEN unten).
 * ============================================================================
 */
( function () {
	'use strict';

	/* ====================================================================
	 * 1) KONFIGURATION
	 * ==================================================================== */
	var CONFIG = {
		orteSeite: 'MediaWiki:WikiMap-Orte.json',
		gemeindenSeite: 'MediaWiki:WikiMap-Gemeinden.json',
		defaultCenter: [ 47.6, 16.1 ],
		defaultZoom: 7,
		focusZoom: 14
	};

	var LEAFLET_MODUS = 'lokal'; // 'cdn' zum Testen, 'lokal' für Produktion
	var LEAFLET_LOKAL_BASIS = '/resources/lib/leaflet/';

	var LEAFLET_QUELLEN = {
		cdn: {
			css: [
				'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
				'https://unpkg.com/leaflet.fullscreen@5.3.1/dist/Control.FullScreen.css'
			],
			js: [
				'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
				'https://unpkg.com/leaflet.fullscreen@5.3.1/dist/Control.FullScreen.umd.js'
			]
		},
		lokal: {
			css: [
				LEAFLET_LOKAL_BASIS + 'leaflet.css',
				LEAFLET_LOKAL_BASIS + 'Control.FullScreen.css'
			],
			js: [
				LEAFLET_LOKAL_BASIS + 'leaflet.js',
				LEAFLET_LOKAL_BASIS + 'Control.FullScreen.umd.js'
			]
		}
	};

	/* ====================================================================
	 * 2) HINTERGRUNDKARTEN
	 *
	 * basemap.at: seit 2023 neue Service-URLs unter mapsneu.wien.gv.at.
	 * Quelle: https://cdn.basemap.at/basemap.at_URL_Umstellung_2023.pdf
	 *
	 * Tracestrack: API-Schlüssel auf Referer schwarzatal.org beschränkt.
	 * Quelle: https://console.tracestrack.com/
	 * ==================================================================== */
	function baueLayer() {
		var osmStandard = L.tileLayer(
			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			{ maxZoom: 19, attribution: '© OpenStreetMap-Mitwirkende' }
		);
		var osmRelief = L.tileLayer(
			'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
			{
				maxZoom: 17,
				attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | ' +
					'Darstellung: © OpenTopoMap (CC-BY-SA)'
			}
		);
		var tracestrack = L.tileLayer(
			'https://tile.tracestrack.com/topo__/{z}/{x}/{y}.png' +
			'?key=bc0464a46d41b1107569bd81112f05ab',
			{
				maxZoom: 19,
				attribution: '© <a href="https://www.tracestrack.com/">Tracestrack</a>, ' +
					'© OpenStreetMap-Mitwirkende'
			}
		);
		var luftbild = L.tileLayer(
			'https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/' +
			'normal/google3857/{z}/{y}/{x}.jpeg',
			{
				maxZoom: 19,
				attribution: 'Datenquelle: <a href="https://basemap.at">basemap.at</a>'
			}
		);
		var overlay = L.tileLayer(
			'https://mapsneu.wien.gv.at/basemap/bmapoverlay/' +
			'normal/google3857/{z}/{y}/{x}.png',
			{
				maxZoom: 19,
				attribution: 'Datenquelle: <a href="https://basemap.at">basemap.at</a>'
			}
		);
		// Zweite Luftbild-Instanz für die Gruppe, damit Layer-Wechsel nicht
		// zwischen Gruppe und Solo-Luftbild kollidieren (Race Condition).
		var luftbildKopie = L.tileLayer(
			'https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/' +
			'normal/google3857/{z}/{y}/{x}.jpeg',
			{
				maxZoom: 19,
				attribution: 'Datenquelle: <a href="https://basemap.at">basemap.at</a>'
			}
		);
		var gemischt = L.layerGroup( [ luftbildKopie, overlay ] );
		return {
			basis: {
				'Luftbild + Karte': gemischt,
				'Luftbild': luftbild,
				'Karte': osmStandard,
				'TopoKarte': osmRelief,
				'TopoKarte2': tracestrack
			},
			standard: gemischt
		};
	}

	/* ====================================================================
	 * 3) PIN-ICONS
	 * ==================================================================== */
	function icon( aktiv ) {
		return L.divIcon( {
			className: 'wikimap-pin' + ( aktiv ? ' wikimap-pin-aktiv' : '' ),
			iconSize: aktiv ? [ 28, 28 ] : [ 18, 18 ],
			iconAnchor: aktiv ? [ 14, 28 ] : [ 9, 18 ],
			popupAnchor: [ 0, aktiv ? -28 : -18 ]
		} );
	}

	/* ====================================================================
	 * 4) DATEN AUS WIKI-JSON-SEITE
	 * ==================================================================== */
	function ladeJson( seite ) {
		var api = new mw.Api();
		return api.get( {
			action: 'query',
			prop: 'revisions',
			titles: seite,
			rvprop: 'content',
			rvslots: 'main',
			formatversion: 2
		} ).then( function ( data ) {
			var page = data.query.pages[ 0 ];
			if ( !page || page.missing || !page.revisions ) {
				throw new Error( 'Seite fehlt: ' + seite );
			}
			return JSON.parse( page.revisions[ 0 ].slots.main.content );
		} );
	}

	/* ====================================================================
	 * 5) EINE EINZELNE KARTE BAUEN
	 * ==================================================================== */
	function baueKarte( container, orte, gemeinden, kategorien ) {
		var aktivId = container.getAttribute( 'data-aktiv-ort' ) || null;

		// Ad-hoc-Pin-Modus: data-pin="lat,lon" zeigt GENAU EINEN Pin an
		// diesen Koordinaten und KEINE Orte aus der zentralen JSON.
		// Gedacht z.B. für Veranstaltungsseiten (Eventform), deren Ort
		// nicht in WikiMap-Orte.json gepflegt wird.
		// Optional: data-pin-name für den Popup-Text.
		var pinAttr = container.getAttribute( 'data-pin' ) || '';
		var pinKoord = null;
		if ( pinAttr ) {
			var pinTeile = pinAttr.split( ',' );
			if ( pinTeile.length === 2 ) {
				var pLat = parseFloat( pinTeile[ 0 ] );
				var pLon = parseFloat( pinTeile[ 1 ] );
				if ( !isNaN( pLat ) && !isNaN( pLon ) ) {
					pinKoord = [ pLat, pLon ];
				}
			}
		}
		var pinName = container.getAttribute( 'data-pin-name' ) || '';

		// Filter: eine oder mehrere Kategorien, kommagetrennt.
		// "asiatisch,gasthaus" => nur Orte, deren kategorie EINE davon ist.
		// Leer/nicht gesetzt => alle Orte.
		var filterAttr = container.getAttribute( 'data-filter' ) || '';
		var filterListe = filterAttr
			.split( ',' )
			.map( function ( s ) { return s.trim(); } )
			.filter( function ( s ) { return s.length > 0; } );

		var hoehe = container.getAttribute( 'data-hoehe' );
		if ( hoehe ) {
			container.style.height = parseInt( hoehe, 10 ) + 'px';
		}

		var hatFullscreen = !!( L.Control && L.Control.FullScreen );

		var layer = baueLayer();
		var map = L.map( container, {
			center: CONFIG.defaultCenter,
			zoom: CONFIG.defaultZoom,
			layers: [ layer.standard ],
			fullscreenControl: hatFullscreen
		} );
		L.control.layers( layer.basis ).addTo( map );

		// Sicherheitsnetz: Knopf explizit hinzufügen, falls die Option oben
		// nicht gegriffen hat (z.B. Plugin kam minimal verspätet).
		if ( hatFullscreen && !map.fullscreenControl ) {
			map.addControl( new L.Control.FullScreen() );
		}

		if ( container.getAttribute( 'data-gemeinden' ) === 'ja' && gemeinden ) {
			L.geoJSON( gemeinden, {
				style: { color: '#3367d6', weight: 1.5, fillOpacity: 0.05 },
				onEachFeature: function ( feature, lyr ) {
					var p = feature.properties || {};
					var name = p.name || 'Gemeinde';
					var ziel = p.seite || name;
					lyr.bindTooltip( name );
					lyr.on( 'click', function () {
						window.location.href = mw.util.getUrl( ziel );
					} );
					lyr.on( 'mouseover', function () {
						lyr.setStyle( { fillOpacity: 0.25 } );
					} );
					lyr.on( 'mouseout', function () {
						lyr.setStyle( { fillOpacity: 0.05 } );
					} );
				}
			} ).addTo( map );
		}

		var aktiverMarker = null;
		var sichtbare = [];

		// Ad-hoc-Pin-Modus: nur dieser eine Pin, keine Orte aus der JSON.
		if ( pinKoord ) {
			var pinMarker = L.marker( pinKoord, {
				icon: icon( true ),
				zIndexOffset: 1000
			} );
			if ( pinName ) {
				pinMarker.bindPopup( '<b>' + mw.html.escape( pinName ) + '</b>' );
			}
			pinMarker.addTo( map );
			map.setView( pinKoord, CONFIG.focusZoom );
			if ( pinName ) {
				pinMarker.openPopup();
			}

			map.on( 'resize fullscreenchange', function () {
				setTimeout( function () {
					map.invalidateSize();
				}, 100 );
			} );
			return map;
		}

		orte.forEach( function ( ort ) {
			// Filter: wenn eine Filterliste gesetzt ist, muss die Kategorie
			// des Ortes in der Liste vorkommen. Sonst wird der Ort ausgelassen.
			if ( filterListe.length && filterListe.indexOf( ort.kategorie ) === -1 ) {
				return;
			}

			// Koordinaten: bevorzugt aus dem geo-Feld (String "lat,lon",
			// direkt aus OSM/OrganicMaps kopierbar, Leerzeichen egal),
			// sonst aus den klassischen lat/lon-Zahlenfeldern.
			var lat = ort.lat;
			var lon = ort.lon;
			if ( typeof ort.geo === 'string' ) {
				var teile = ort.geo.split( ',' );
				if ( teile.length === 2 ) {
					lat = parseFloat( teile[ 0 ] );
					lon = parseFloat( teile[ 1 ] );
				}
			}
			if ( typeof lat !== 'number' || typeof lon !== 'number' ||
				isNaN( lat ) || isNaN( lon ) ) {
				return;
			}
			var istAktiv = aktivId && ort.id === aktivId;
			// id ist Anzeigename und Ziel. seite (optional) übersteuert das
			// Ziel; beginnt sie mit http:// oder https://, wird direkt auf
			// die externe Adresse verlinkt statt auf eine Wiki-Seite.
			var ziel = ort.seite || ort.id || '';
			var istExtern = /^https?:\/\//i.test( ziel );
			var link = istExtern ? ziel : mw.util.getUrl( ziel );
			var m = L.marker( [ lat, lon ], {
				icon: icon( istAktiv ),
				zIndexOffset: istAktiv ? 1000 : 0
			} );

			// Kategorie-Farbe (nur für nicht-aktive Pins; aktiver bleibt rot).
			// Wird gesetzt, sobald das Marker-DOM-Element existiert.
			var farbe = kategorien && ort.kategorie ? kategorien[ ort.kategorie ] : null;
			if ( farbe && !istAktiv ) {
				m.on( 'add', function () {
					if ( this._icon ) {
						this._icon.style.background = farbe;
					}
				} );
			}

			m.bindPopup(
				'<b>' + mw.html.escape( ort.id || '' ) + '</b><br>' +
				'<a href="' + link + '"' +
				( istExtern ? ' target="_blank" rel="noopener"' : '' ) +
				'>Zur Seite →</a>'
			);
			m.addTo( map );
			sichtbare.push( [ lat, lon ] );
			if ( istAktiv ) {
				aktiverMarker = m;
			}
		} );

		if ( aktiverMarker ) {
			map.setView( aktiverMarker.getLatLng(), CONFIG.focusZoom );
			aktiverMarker.openPopup();
		} else if ( sichtbare.length ) {
			map.fitBounds( sichtbare, { padding: [ 30, 30 ] } );
		}

		map.on( 'resize fullscreenchange', function () {
			setTimeout( function () {
				map.invalidateSize();
			}, 100 );
		} );
		return map;
	}

	/* ====================================================================
	 * 6) EINSTIEG
	 * ==================================================================== */
	function init() {
		var container = document.querySelectorAll( '.wikimap' );
		if ( !container.length ) {
			return;
		}
		var brauchtGemeinden = Array.prototype.some.call(
			container,
			function ( c ) {
				return c.getAttribute( 'data-gemeinden' ) === 'ja';
			}
		);
		var aufgaben = [ ladeJson( CONFIG.orteSeite ) ];
		aufgaben.push(
			brauchtGemeinden ?
				ladeJson( CONFIG.gemeindenSeite ).catch( function () {
					return null;
				} ) :
				$.Deferred().resolve( null )
		);
		$.when.apply( $, aufgaben ).then( function ( orteData, gemeinden ) {
			var orte = ( orteData && orteData.orte ) || [];
			// Optionaler Farb-Block: Kategorie -> Farbe. Fehlt er, bleiben
			// die Pins in der Standardfarbe.
			var kategorien = ( orteData && orteData.kategorien ) || {};
			Array.prototype.forEach.call( container, function ( c ) {
				try {
					baueKarte( c, orte, gemeinden, kategorien );
				} catch ( e ) {
					c.textContent = 'Karte konnte nicht geladen werden.';
					mw.log.error( e );
				}
			} );
		} ).catch( function ( e ) {
			Array.prototype.forEach.call( container, function ( c ) {
				c.textContent = 'Ortsdaten konnten nicht geladen werden.';
			} );
			mw.log.error( e );
		} );
	}

	/* ====================================================================
	 * 7) LEAFLET SICHERSTELLEN, DANN STARTEN
	 * ==================================================================== */

	// Lädt EIN Skript nach. Wichtig: manche Leaflet-Plugins sind UMD-Module
	// und registrieren sich bei vorhandenem AMD-Loader (z.B. ResourceLoader)
	// NICHT am globalen L. Wir deaktivieren define.amd kurzzeitig, damit das
	// Plugin den globalen-L-Pfad nimmt.
	function ladeSkript( src ) {
		return $.Deferred( function ( d ) {
			var amd = window.define;
			var hatAmd = amd && amd.amd;
			if ( hatAmd ) {
				window.define = undefined; // AMD kurz ausblenden
			}
			var s = document.createElement( 'script' );
			s.src = src;
			s.onload = function () {
				if ( hatAmd ) {
					window.define = amd; // AMD wiederherstellen
				}
				d.resolve();
			};
			s.onerror = function () {
				if ( hatAmd ) {
					window.define = amd;
				}
				mw.log.error( 'WikiMap: Datei nicht ladbar: ' + src );
				d.resolve(); // trotzdem weitermachen
			};
			document.head.appendChild( s );
		} ).promise();
	}

	function ladeCss( href ) {
		var l = document.createElement( 'link' );
		l.rel = 'stylesheet';
		l.href = href;
		document.head.appendChild( l );
	}

	function stelleLeafletBereit( fertig ) {
		var q = LEAFLET_QUELLEN[ LEAFLET_MODUS ];

		// CSS immer einhängen (auch wenn L schon da ist, könnte Plugin-CSS fehlen).
		q.css.forEach( ladeCss );

		// JS-Dateien strikt nacheinander laden und ERST starten, wenn sowohl
		// L.map als auch L.Control.FullScreen existieren.
		var kette = $.Deferred().resolve().promise();
		q.js.forEach( function ( src ) {
			kette = kette.then( function () {
				// Leaflet-Core nur laden, wenn noch nicht da.
				if ( /leaflet\.js$/.test( src ) && window.L && window.L.map ) {
					return;
				}
				return ladeSkript( src );
			} );
		} );

		kette.then( function () {
			// Sicherheitsnetz: kurz warten, falls Plugin minimal verzögert ist.
			var versuche = 0;
			( function pruefe() {
				if ( window.L && window.L.map ) {
					fertig();
				} else if ( versuche++ < 50 ) {
					setTimeout( pruefe, 50 );
				} else {
					mw.log.error( 'WikiMap: Leaflet nicht verfügbar.' );
				}
			}() );
		} );
	}

	mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {
		$( function () {
			if ( !document.querySelector( '.wikimap' ) ) {
				return;
			}
			stelleLeafletBereit( init );
		} );
	} );

}() );