Widget:LeafletSMWMap - Versionsgeschichte

HorstR am 20. Dezember 2025 um 16:48 Uhr

2025-12-20T16:48:22Z

← Nächstältere Version		Version vom 20. Dezember 2025, 16:48 Uhr
Zeile 1:		Zeile 1:
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>


	<script>		<script>

Christopher am 17. Dezember 2025 um 20:32 Uhr

2025-12-17T20:32:12Z

← Nächstältere Version		Version vom 17. Dezember 2025, 20:32 Uhr
Zeile 10:		Zeile 10:
	}		}

	const ~~jsonUrl~~ = el.dataset.json;		const ask = el.dataset.query;
			const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);

	const posProp = el.dataset.position \|\| 'Position';		const posProp = el.dataset.position \|\| 'Position';
	const typeProp = el.dataset.type \|\| 'Schultyp';		const typeProp = el.dataset.type \|\| 'Schultyp';

Christopher am 17. Dezember 2025 um 20:30 Uhr

2025-12-17T20:30:32Z

← Nächstältere Version		Version vom 17. Dezember 2025, 20:30 Uhr
Zeile 39:		Zeile 39:
	const data = await resp.json();		const data = await resp.json();

	//debug		// debug

	console.log('SMW JSON keys:', Object.keys(data \|\| {}));		console.log('SMW JSON keys:', Object.keys(data \|\| {}));
	console.log('SMW meta:', data?.query?.meta);		console.log('SMW meta:', data?.query?.meta);
	console.log('Results count:', data?.query?.meta?.count, 'Result keys sample:', Object.keys(data?.query?.results \|\| {}).slice(0, 5));		console.log('Results count:', data?.query?.meta?.count, 'Result keys sample:', Object.keys(data?.query?.results \|\| {}).slice(0, 5));
	~~//Ende debug~~

			// Ende debug

			// Leaflet initialisieren (el ist bereits die Map-DIV)

	// Leaflet initialisieren (el ist bereits die Map-DIV)
	const map = L.map(el);		const map = L.map(el);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
Zeile 55:		Zeile 54:
	}).addTo(map);		}).addTo(map);

	const bounds = [];		const bounds = [];
	const results = data?.query?.results \|\| {};		const results = data?.query?.results \|\| {};

	~~//debug~~
	~~const firstKey = Object.keys(results)[0];~~
	~~console.log('First result key:', firstKey);~~
	~~console.log('First result printouts keys:', firstKey ? Object.keys(results[firstKey].printouts \|\| {}) : 'n/a');~~
	~~//Ende debug~~


			for (const key in results) {
			const r = results[key]; // r wird hier definiert
			const po = r.printouts \|\| {}; // erst danach benutzen

	~~for (const key in results) {~~		// OPTIONAL: Debug ohne r-vorher-Fehler
	//Debug		// console.log('Printouts keys:', Object.keys(po));
	console.log('~~Row~~:', r.~~fulltext, 'posProp=', posProp, 'posArr=',~~ (po~~[posProp] \|\| null~~));
	~~//Ende Debug~~

			const posArr = po[posProp] \|\| [];
			if (!Array.isArray(posArr) \|\| !posArr.length) continue;

	const r = ~~results[key];~~		const pos = posArr[0];
	~~const po = r.printouts \|\| {};~~		if (!pos \|\| typeof pos.lat !== 'number' \|\| typeof pos.lon !== 'number') continue;
	~~const~~ posArr ~~= po[posProp] \|\|~~ [];
	if (!~~Array~~.~~isArray(posArr)~~ \|\| !~~posArr.length~~) continue;

	const ~~pos~~ = ~~posArr~~[0];		const typeArr = po[typeProp] \|\| [];
	if (~~!pos \|\| typeof pos~~.~~lat !== 'number' \|\| typeof pos~~.~~lon !==~~ '~~number~~'~~) continue~~;		const typ = (Array.isArray(typeArr) && typeArr.length) ? String(typeArr[0]) : '';

	const ~~typeArr~~ = po[~~typeProp~~] \|\| [];		const iconUrl = iconMap[typ] \|\| defaultIcon;
	const ~~typ~~ = ~~(Array~~.~~isArray~~(~~typeArr) && typeArr.length) ? String(typeArr~~[0]) ~~: ''~~;		const icon = L.icon({ iconUrl, iconSize: [24, 24], iconAnchor: [12, 24] });

	~~const iconUrl = iconMap~~[~~typ~~] ~~\|\| defaultIcon;~~		L.marker([pos.lat, pos.lon], { icon })
	~~const icon~~ = L.~~icon(~~{ ~~iconUrl, iconSize~~: ~~[24, 24], iconAnchor: [12, 24]~~ });		.addTo(map)
			.bindPopup(`<a href="${r.fullurl}">${r.fulltext}</a><br><b>${typeProp}:</b> ${typ \|\| '-'}`);

	L.~~marker~~([pos.lat, pos.lon]~~, { icon })~~		bounds.push([pos.lat, pos.lon]);
	~~.addTo(map~~)		}
	~~.bindPopup(`<a href="${r.fullurl}">${r.fulltext}</a><br><b>${typeProp}:</b> ${typ \|\| '-'~~}~~`);~~

	~~bounds.push([pos.lat, pos.lon]);~~
	}

	if (bounds.length) map.fitBounds(bounds, { padding: [20, 20] });		if (bounds.length) map.fitBounds(bounds, { padding: [20, 20] });

Christopher am 17. Dezember 2025 um 20:13 Uhr

2025-12-17T20:13:54Z

@@ Zeile 38: / Zeile 38: @@
    if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
    const data = await resp.json();
    // Leaflet initialisieren (el ist bereits die Map-DIV)
@@ Zeile 48: / Zeile 57: @@
    const bounds = [];
    const results = data?.query?.results || {};
    for (const key in results) {
      const r = results[key];
      const po = r.printouts || {};

Christopher am 17. Dezember 2025 um 20:08 Uhr

2025-12-17T20:08:13Z

← Nächstältere Version		Version vom 17. Dezember 2025, 20:08 Uhr
Zeile 1:		Zeile 1:
	~~<div id="smwmap" style="width:100%; height:500px;"></div>~~

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
Zeile 6:		Zeile 4:
	<script>		<script>
	(async function () {		(async function () {
	~~// Pflichtparameter~~		const el = document.getElementById('smwmap');
	const ~~jsonUrl~~ = '~~{{{json}}}~~';		if (!el) {
	console.log('~~jsonUrl=~~'~~, jsonUrl~~); ~~//Debug~~		console.log('LeafletSMWMap: #smwmap nicht gefunden');
	~~const posProp = '{{{position\|Position}}}'~~;		return;
	~~const typeProp = '{{{type\|Schultyp~~}~~}}';~~		}

	~~// Optionale Parameter~~		const jsonUrl = el.dataset.json;
	const ~~iconSpec~~ = '~~{{{iconMap\|}}}~~'; ~~// "Gymnasium~~=~~Marker 13 rot~~.~~png~~;~~Grundschule~~=~~Marker 11 rot~~.~~png"~~		const posProp = el.dataset.position \|\| 'Position';
	const defIcon = '~~{{{defaultIcon\|~~Marker 11 rot.png~~}}}~~';		const typeProp = el.dataset.type \|\| 'Schultyp';
			const iconSpec = el.dataset.iconmap \|\| '';
			const defIcon = el.dataset.defaulticon \|\| 'Marker 11 rot.png';

			console.log('jsonUrl=', jsonUrl);

	// Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"		// Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"
	const iconMap = {};		const iconMap = {};
	if (~~iconSpec &&~~ iconSpec.trim().length) {		if (iconSpec.trim().length) {
	iconSpec.split(';').forEach(pair => {		iconSpec.split(';').forEach(pair => {
	const parts = pair.split('=');		const parts = pair.split('=');
	if (parts.length >= 2) {		if (parts.length >= 2) {
	const k = parts[0].trim();		const k = parts[0].trim();
	const v = parts.slice(1).join('=').trim(); ~~// falls Dateiname '=' enthält~~		const v = parts.slice(1).join('=').trim();
	if (k && v) {		if (k && v) {
	iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);		iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);
Zeile 32:		Zeile 34:
	const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);		const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);

	// JSON laden ~~(defensiv: erst text, dann parse für bessere Diagnose)~~		// JSON laden
	const resp = await fetch(jsonUrl, { credentials: 'same-origin' });		const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
	if (!resp.ok) {		if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
	throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);		const data = await resp.json();
	}
	const ~~text~~ = await resp.~~text~~();
	~~let data;~~
	~~try {~~
	~~data = JSON.parse(text);~~
	~~} catch (e) {~~
	~~console.log('JSON-URL:', jsonUrl);~~
	~~console.log('RAW RESPONSE (erste 500 Zeichen):', text.slice(0, 500));~~
	~~throw e;~~
	}

	// Leaflet initialisieren		// Leaflet initialisieren (el ist bereits die Map-DIV)
	const map = L.map(~~'smwmap'~~);		const map = L.map(el);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,		maxZoom: 19,
Zeile 55:		Zeile 47:

	const bounds = [];		const bounds = [];
			const results = data?.query?.results \|\| {};
	~~// Ergebnisse (SMW ask API)~~
	const results = data ~~&& data~~.query ~~&& data.query.results~~ ? ~~data.query~~.results : {};

	for (const key in results) {		for (const key in results) {
	const r = results[key];		const r = results[key];
	const po = r.printouts \|\| {};		const po = r.printouts \|\| {};
			const posArr = po[posProp] \|\| [];
			if (!Array.isArray(posArr) \|\| !posArr.length) continue;

	~~// Position holen (Array mit {lat, lon})~~		const pos = posArr[0];
	~~if (!Array.isArray(po[posProp]) \|\| !po[posProp].length) continue;~~

	const pos = ~~po[posProp]~~[0];
	if (!pos \|\| typeof pos.lat !== 'number' \|\| typeof pos.lon !== 'number') continue;		if (!pos \|\| typeof pos.lat !== 'number' \|\| typeof pos.lon !== 'number') continue;

	~~// Typ holen~~		const typeArr = po[typeProp] \|\| [];
	const ~~type~~ =		const typ = (Array.isArray(typeArr) && typeArr.length) ? String(typeArr[0]) : '';
	Array.isArray(~~po[typeProp]~~) && ~~po[typeProp]~~.length
	? String(~~po[typeProp]~~[0])
	: '';

	~~// Icon wählen~~		const iconUrl = iconMap[typ] \|\| defaultIcon;
	const iconUrl = iconMap[~~type~~] \|\| defaultIcon;		const icon = L.icon({ iconUrl, iconSize: [24, 24], iconAnchor: [12, 24] });
	const icon = L.icon({
	~~iconUrl:~~ iconUrl,
	iconSize: [24, 24],
	iconAnchor: [12, 24]
	});

	~~// Popup~~
	~~const title = r.fulltext \|\| key;~~
	~~const url = r.fullurl \|\| ('/wiki/' + encodeURIComponent(title)~~);

	L.marker([pos.lat, pos.lon], { icon })		L.marker([pos.lat, pos.lon], { icon })
	.addTo(map)		.addTo(map)
	.bindPopup(		.bindPopup(`<a href="${r.fullurl}">${r.fulltext}</a><br><b>${typeProp}:</b> ${typ \|\| '-'}`);
	`<a href="${~~url~~}">${~~title~~}</a><br><b>${typeProp}:</b> ${~~type~~ \|\| '-'}`
	);

	bounds.push([pos.lat, pos.lon]);		bounds.push([pos.lat, pos.lon]);
	}		}

	~~// Zoom/Extent~~		if (bounds.length) map.fitBounds(bounds, { padding: [20, 20] });
	if (bounds.length) {		else map.setView([50.94, 6.96], 12);
	map.fitBounds(bounds, { padding: [20, 20] });
	} else {
	~~// Fallback: Köln grob~~
	map.setView([50.94, 6.96], 12);
	}
	})();		})();
	</script>		</script>

Christopher am 17. Dezember 2025 um 20:01 Uhr

2025-12-17T20:01:25Z

← Nächstältere Version		Version vom 17. Dezember 2025, 20:01 Uhr
Zeile 8:		Zeile 8:
	// Pflichtparameter		// Pflichtparameter
	const jsonUrl = '{{{json}}}';		const jsonUrl = '{{{json}}}';
			console.log('jsonUrl=', jsonUrl); //Debug
	const posProp = '{{{position\|Position}}}';		const posProp = '{{{position\|Position}}}';
	const typeProp = '{{{type\|Schultyp}}}';		const typeProp = '{{{type\|Schultyp}}}';

Christopher am 17. Dezember 2025 um 19:53 Uhr

2025-12-17T19:53:59Z

Änderungen zeigen

Christopher am 17. Dezember 2025 um 19:49 Uhr

2025-12-17T19:49:52Z

← Nächstältere Version		Version vom 17. Dezember 2025, 19:49 Uhr
Zeile 31:		Zeile 31:
	'/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);		'/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);

	~~const data = await (await fetch(jsonUrl, { credentials:'same-origin' })).json();~~

	//temporäres Debugging		//temporäres Debugging einschl. const data
	const resp = await fetch(jsonUrl, { credentials: 'same-origin' });		const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
	const text = await resp.text();		const text = await resp.text();

	console.log('JSON-URL:', jsonUrl);		console.log('JSON-URL:', jsonUrl);
	console.log('RAW JSON (erste 500 Zeichen):', text.slice(0, 500));		console.log('RAW JSON (erste 500 Zeichen):', text.slice(0, 500));

Christopher am 17. Dezember 2025 um 19:47 Uhr

2025-12-17T19:47:02Z

← Nächstältere Version		Version vom 17. Dezember 2025, 19:47 Uhr
Zeile 32:		Zeile 32:

	const data = await (await fetch(jsonUrl, { credentials:'same-origin' })).json();		const data = await (await fetch(jsonUrl, { credentials:'same-origin' })).json();

			//temporäres Debugging
			const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
			const text = await resp.text();
			console.log('JSON-URL:', jsonUrl);
			console.log('RAW JSON (erste 500 Zeichen):', text.slice(0, 500));

			const data = JSON.parse(text);
			console.log('PARSED DATA:', data);
			//Ende temporäres Debugging








	const map = L.map('smwmap');		const map = L.map('smwmap');

Christopher am 17. Dezember 2025 um 19:43 Uhr

2025-12-17T19:43:44Z

← Nächstältere Version		Version vom 17. Dezember 2025, 19:43 Uhr
Zeile 9:		Zeile 9:

	// const jsonUrl = '{{{json}}}';		// const jsonUrl = '{{{json}}}';
	const jsonUrl = '/api.php?action=ask&format=json&query=~~%5B%5BKategorie%3ASchule%5D%5D~~'; //nur testweise!		const ask = '[[Kategorie:Schule]] [[Position::+]]\|?Position\|?Schultyp\|limit=50';//nur testweise
			const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);//nur testweise



	const posProp = '{{{position}}}';		const posProp = '{{{position}}}';