MediaWiki:Gadget-WikiMap.js: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Die Seite wurde neu angelegt: „/** * 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…“ |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 42: | Zeile 42: | ||
}; | }; | ||
var LEAFLET_MODUS = ' | var LEAFLET_MODUS = 'lokal'; // 'cdn' zum Testen, 'lokal' für Produktion | ||
var LEAFLET_LOKAL_BASIS = ' | var LEAFLET_LOKAL_BASIS = '/resources/lib/leaflet/'; | ||
var LEAFLET_QUELLEN = { | var LEAFLET_QUELLEN = { | ||
Version vom 22. Mai 2026, 21:27 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
* data-gemeinden "ja" => Gemeinde-Umrisse einblenden (Klick => Seite)
* data-hoehe Pixel-Höhe der Karte (optional, sonst CSS-Default)
*
* 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.5, 13.5 ],
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
* ==================================================================== */
function baueLayer() {
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 osmStandard = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ maxZoom: 19, attribution: '© OpenStreetMap-Mitwirkende' }
);
var luftbild = L.tileLayer(
'https://maps{s}.wien.gv.at/basemap/bmaporthofoto30cm/' +
'normal/google3857/{z}/{y}/{x}.jpeg',
{
maxZoom: 19,
subdomains: [ '', '1', '2', '3', '4' ],
attribution: 'Datenquelle: <a href="https://basemap.at">basemap.at</a>'
}
);
var overlay = L.tileLayer(
'https://maps{s}.wien.gv.at/basemap/bmapoverlay/' +
'normal/google3857/{z}/{y}/{x}.png',
{
maxZoom: 19,
subdomains: [ '', '1', '2', '3', '4' ],
attribution: 'Datenquelle: <a href="https://basemap.at">basemap.at</a>'
}
);
var gemischt = L.layerGroup( [ luftbild, overlay ] );
return {
basis: {
'OSM Relief': osmRelief,
'OSM Standard': osmStandard,
'Luftbild (basemap.at)': luftbild,
'Luftbild + Karte': gemischt
},
standard: osmRelief
};
}
/* ====================================================================
* 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 ) {
var aktivId = container.getAttribute( 'data-aktiv-ort' ) || null;
var filter = container.getAttribute( 'data-filter' ) || null;
var hoehe = container.getAttribute( 'data-hoehe' );
if ( hoehe ) {
container.style.height = parseInt( hoehe, 10 ) + 'px';
}
var layer = baueLayer();
var map = L.map( container, {
center: CONFIG.defaultCenter,
zoom: CONFIG.defaultZoom,
layers: [ layer.standard ],
fullscreenControl: true
} );
L.control.layers( layer.basis ).addTo( map );
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 = [];
orte.forEach( function ( ort ) {
if ( filter && ort.kategorie !== filter ) {
return;
}
if ( typeof ort.lat !== 'number' || typeof ort.lon !== 'number' ) {
return;
}
var istAktiv = aktivId && ort.id === aktivId;
var m = L.marker( [ ort.lat, ort.lon ], {
icon: icon( istAktiv ),
zIndexOffset: istAktiv ? 1000 : 0
} );
var link = mw.util.getUrl( ort.seite || ort.name );
m.bindPopup(
'<b>' + mw.html.escape( ort.name || '' ) + '</b><br>' +
'<a href="' + link + '">Zur Seite →</a>'
);
m.addTo( map );
sichtbare.push( [ ort.lat, ort.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 ) || [];
Array.prototype.forEach.call( container, function ( c ) {
try {
baueKarte( c, orte, gemeinden );
} 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
* ==================================================================== */
function stelleLeafletBereit( fertig ) {
if ( window.L && window.L.map ) {
fertig();
return;
}
var q = LEAFLET_QUELLEN[ LEAFLET_MODUS ];
q.css.forEach( function ( href ) {
var l = document.createElement( 'link' );
l.rel = 'stylesheet';
l.href = href;
document.head.appendChild( l );
} );
var i = 0;
( function next() {
if ( i >= q.js.length ) {
fertig();
return;
}
var s = document.createElement( 'script' );
s.src = q.js[ i++ ];
s.onload = next;
s.onerror = function () {
mw.log.error( 'WikiMap: Leaflet-Datei nicht ladbar: ' + s.src );
next();
};
document.head.appendChild( s );
}() );
}
mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {
$( function () {
if ( !document.querySelector( '.wikimap' ) ) {
return;
}
stelleLeafletBereit( init );
} );
} );
}() );