Widget:Leaflet - Versionsgeschichte

HorstR am 10. Dezember 2025 um 00:07 Uhr

2025-12-10T00:07:44Z

HorstR am 8. Dezember 2025 um 00:16 Uhr

2025-12-08T00:16:08Z

← Nächstältere Version		Version vom 8. Dezember 2025, 00:16 Uhr
Zeile 1:		Zeile 1:
	<~~map id="map"~~ style="width:100%; height:~~600px~~;"></~~map~~>		<widget>
	<~~div id~~="~~log~~" ~~style~~="~~display~~:~~none;~~"></~~div~~>		<!-- CSS für Karte -->
			<style>
			#leafmap {
			width: 100%;
			height: 500px;
			}
			</style>

			<div id="leafmap"></div>

			<!-- Leaflet laden -->
			<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>		<script>
	(function(){		// Helpers
			function parseCoordinates(c) {
	~~function debug~~(~~msg~~) {		if (!c) return null;
	~~var dbg~~=~~document~~.~~getElementById~~("~~debug~~");		let parts = c.split(",");
	if(~~dbg) dbg~~.~~textContent +~~= ~~"\n" + msg~~;		if (parts.length !== 2) return null;
	}		return {
			lat: parseFloat(parts[0].trim()),
			lng: parseFloat(parts[1].trim())
			};
			}

	~~var rawEl~~ = document.getElementById("smw-data");		function loadSMWData() {
	if (!~~rawEl~~) {		let el = document.getElementById("smw-data");
	~~debug~~("~~FEHLER:~~ smw-data ~~nicht~~ gefunden!");		if (!el) {
	return;		console.warn("⚠ Kein smw-data Element gefunden.");
			return [];
	}		}

	~~var raw = rawEl.textContent.trim();~~
	~~debug("ROHDATEN:\n" + raw);~~

	~~var schools=[];~~
	try {		try {
	~~schools =~~ JSON.parse(~~raw);~~		return JSON.parse(el.textContent);
	~~debug("JSON erfolgreich geparst ("+schools~~.~~length+" Einträge)"~~);		} catch (e) {
	} catch(e) {		console.error("JSON-Fehler:", e);
	~~debug~~("JSON ~~PARSE FEHLER~~: "+e);		return [];
	return;
	}		}
			}

	~~var~~ map = L.map(~~"map"~~).setView([50.94, 6.97], 12);		// Initialisierung Leaflet
	L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {		const map = L.map('leafmap').setView([50.94, 6.95], 12);
	~~maxZoom~~:19		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	}).addTo(map);		attribution: '© OSM'
			}).addTo(map);

	~~var markerGroup~~ = ~~L.markerClusterGroup~~();		let data = loadSMWData();

	~~schools~~.forEach(~~function(s)~~{		data.forEach(entry => {
	if(!s.coords) ~~return~~;		const pos = parseCoordinates(entry.coords);
	~~var parts=s.coords.split(",");~~		if (pos) {
	if(~~parts.length !== 2~~) ~~return;~~		L.marker([pos.lat, pos.lng])
			.addTo(map)
	~~var lat=parseFloat(parts[0]);~~		.bindPopup(entry.name \|\| "(keine Bezeichnung)");
	~~var lon=parseFloat(parts[1]);~~		}
	~~if(isNaN(lat)\|\|isNaN(lon)) return;~~		});

	~~var marker=~~L.marker([lat,~~lon~~]).~~bindPopup~~(
	~~"<b>"+~~(s.name\|\|"~~Unbekannt"~~)~~+"</b><br>~~"+
	~~(s.type\|\|"")~~
	);
	~~markerGroup.addLayer(marker~~);
	});

	~~map.addLayer(markerGroup);~~

	})();
	</script>		</script>
			</widget>

HorstR am 7. Dezember 2025 um 23:11 Uhr

2025-12-07T23:11:32Z

← Nächstältere Version		Version vom 7. Dezember 2025, 23:11 Uhr
Zeile 1:		Zeile 1:
	<~~!-- Widget:Leaflet (keine #ask im Widget) -->~~		<map id="map" style="width:100%; height:600px;"></map>
	~~<div~~ id="map" style="width:100%; height:600px;"></div>		<div id="log" style="display:none;"></div>

	<~~link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/~~>		<script>
	~~<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>~~		(function(){

	~~<link rel~~="~~stylesheet~~" ~~href="https://unpkg.com/leaflet.markercluster@1~~.~~5.3/dist/MarkerCluster.css"/>~~		function debug(msg) {
	~~<link rel~~="~~stylesheet~~" ~~href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>~~		var dbg=document.getElementById("debug");
	~~<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>~~		if(dbg) dbg.textContent += "\n" + msg;
			}

	~~<script>~~		var rawEl = document.getElementById("smw-data");
	~~(function(){~~
	~~// raw JSON aus dem Seiten-Skriptblock holen~~
	var rawEl = document.getElementById('smw-data');
	if (!rawEl) {		if (!rawEl) {
	~~console.error~~("~~Kein Element mit id='~~smw-data' gefunden~~. Bitte #ask auf der Seite einbinden.~~");		debug("FEHLER: smw-data nicht gefunden!");
	return;		return;
	}		}
	~~var raw = rawEl.textContent.replace(/<\/?p>/g,'').trim(); // p-Tags entfernen, falls vorhanden~~
	~~// optional: debug in Konsole~~
	~~console.log("raw SMW output:", raw);~~

	var ~~schoolData~~;		var raw = rawEl.textContent.trim();
			debug("ROHDATEN:\n" + raw);

			var schools=[];
	try {		try {
	~~schoolData~~ = JSON.parse(raw);		schools = JSON.parse(raw);
	} catch (e) {		debug("JSON erfolgreich geparst ("+schools.length+" Einträge)");
	~~console.error~~("~~Fehler beim Parsen der SMW-Daten~~:", e);		} catch(e) {
			debug("JSON PARSE FEHLER: "+e);
	return;		return;
	}		}

	var map = L.map('map').setView([50.94, 6.96], 11);		var map = L.map("map").setView([50.94, 6.97], 12);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:~~18, attribution:'© OSM'~~ }).addTo(map);		L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
			maxZoom:19
			}).addTo(map);

			var markerGroup = L.markerClusterGroup();

			schools.forEach(function(s){
			if(!s.coords) return;
			var parts=s.coords.split(",");
			if(parts.length !== 2) return;

	var ~~clusters~~ = {		var lat=parseFloat(parts[0]);
	~~Grundschule: L.markerClusterGroup~~(),		var lon=parseFloat(parts[1]);
	~~Gymnasium: L.markerClusterGroup~~(),		if(isNaN(lat)\|\|isNaN(lon)) return;
	~~Gesamtschule: L.markerClusterGroup~~(),
	~~Berufskolleg: L.markerClusterGroup~~(),
	~~Förderschule: L.markerClusterGroup~~(),
	~~Unbekannt: L.markerClusterGroup(~~)
	};

	~~var bounds = [];~~		var marker=L.marker([lat,lon]).bindPopup(
	~~schoolData.forEach(function(s){~~		"<b>"+(s.name\|\|"Unbekannt")+"</b><br>"+
	~~if (!s.coords) return;~~		(s.type\|\|"")
	~~var parts = s.coords.split(',');~~		);
	~~if (parts.length !== 2) return;~~		markerGroup.addLayer(marker);
	~~var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);~~
	~~if (isNaN(lat) \|\| isNaN(lon)) return;~~
	~~var type = s.type \|\| "Unbekannt";~~
	var marker = L.marker([lat, lon]).bindPopup('<~~strong~~>' + (s.name\|\|'') + '</~~strong~~><br>' + ~~type);~~
	(~~clusters[~~type] \|\| ~~clusters.Unbekannt~~)~~.addLayer(marker~~);
	~~bounds~~.~~push~~(~~[lat, lon]~~);
	});		});

	~~Object.values(clusters).forEach(function(g){~~ map.addLayer(~~g); });~~		map.addLayer(markerGroup);

	~~L.control.layers(null, {~~
	~~"Grundschulen": clusters.Grundschule,~~
	~~"Gymnasien": clusters.Gymnasium,~~
	~~"Gesamtschulen": clusters.Gesamtschule,~~
	~~"Berufskollegs": clusters.Berufskolleg,~~
	~~"Förderschulen": clusters.Förderschule,~~
	~~"Sonstige": clusters.Unbekannt~~
	~~}, {collapsed:false}).addTo(map~~);

	~~if (bounds.length) map.fitBounds(bounds);~~
	})();		})();
	</script>		</script>

HorstR am 7. Dezember 2025 um 19:55 Uhr

2025-12-07T19:55:02Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:55 Uhr
Zeile 1:		Zeile 1:
	<!-- ~~Debug-Ausgabe~~ (~~temporär~~) -->		<!-- Widget:Leaflet (keine #ask im Widget) -->
	~~<pre id="debug" style="white-space: pre-wrap; max-height:200px; overflow:auto; border:1px solid #ccc; padding:6px;"></pre>~~

	<div id="map" style="width:100%; height:600px;"></div>		<div id="map" style="width:100%; height:600px;"></div>


	~~<!-- SMW-Daten als JSON array -->~~
	~~<script id="smw-data" type="application/json">~~
	~~{{#ask:~~
	~~[[Kategorie:Schule]]~~
	~~\|?Koordinaten.Latitude=lat~~
	~~\|?Koordinaten.Longitude=lon~~
	~~\|?Name=name~~
	~~\|?Schultyp=type~~
	~~\|format=json~~
	~~\|plain=yes~~
	~~\|api=yes~~
	}}
	~~</script>~~

	~~<!-- Leaflet & Cluster Libs -->~~
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
Zeile 29:		Zeile 11:
	<script>		<script>
	(function(){		(function(){
			// raw JSON aus dem Seiten-Skriptblock holen
			var rawEl = document.getElementById('smw-data');
			if (!rawEl) {
			console.error("Kein Element mit id='smw-data' gefunden. Bitte #ask auf der Seite einbinden.");
			return;
			}
			var raw = rawEl.textContent.replace(/<\/?p>/g,'').trim(); // p-Tags entfernen, falls vorhanden
			// optional: debug in Konsole
			console.log("raw SMW output:", raw);

	~~// JSON aus Scriptblock holen~~		var schoolData;
	~~var raw = document.getElementById('smw-data').textContent.trim();~~

	~~// Debug: zeige den rohen SMW-Output auf der Seite~~
	~~document.getElementById('debug').textContent = raw;~~


	~~// JSON sicher parsen~~
	var schoolData ~~= []~~;
	try {		try {
	schoolData = JSON.parse(raw);		schoolData = JSON.parse(raw);
	} catch(e) {		} catch (e) {
	console.error("~~JSON~~-~~Fehler~~:", e~~, raw~~);		console.error("Fehler beim Parsen der SMW-Daten:", e);
	return;		return;
	}		}

	~~// Karte erstellen~~
	var map = L.map('map').setView([50.94, 6.96], 11);		var map = L.map('map').setView([50.94, 6.96], 11);
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:18, attribution:'© OSM' }).addTo(map);

	~~L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {~~
	~~maxZoom: 18,~~
	~~attribution:'© OpenStreetMap contributors'~~
	~~}).addTo(map);~~

	~~// Cluster Gruppen~~
	var clusters = {		var clusters = {
	Grundschule: L.markerClusterGroup(),		Grundschule: L.markerClusterGroup(),
	Gymnasium: L.markerClusterGroup(),		Gymnasium: L.markerClusterGroup(),
	Gesamtschule: L.markerClusterGroup(),		Gesamtschule: L.markerClusterGroup(),
	Berufskolleg: L.markerClusterGroup(),		Berufskolleg: L.markerClusterGroup(),
	Förderschule: L.markerClusterGroup(),		Förderschule: L.markerClusterGroup(),
	Unbekannt: L.markerClusterGroup()		Unbekannt: L.markerClusterGroup()
	};		};

	var bounds = [];		var bounds = [];

	~~// Marker erzeugen~~
	schoolData.forEach(function(s){		schoolData.forEach(function(s){
	if (!s.coords) return;		if (!s.coords) return;

	var parts = s.coords.split(',');		var parts = s.coords.split(',');
	if (parts.length !== 2) return;		if (parts.length !== 2) return;
			var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
	var lat = parseFloat(parts[0]);
	~~var~~ lon = parseFloat(parts[1]);

	if (isNaN(lat) \|\| isNaN(lon)) return;		if (isNaN(lat) \|\| isNaN(lon)) return;

	var type = s.type \|\| "Unbekannt";		var type = s.type \|\| "Unbekannt";
			var marker = L.marker([lat, lon]).bindPopup('<strong>' + (s.name\|\|'') + '</strong><br>' + type);
	var marker = L.marker([lat, lon])		(clusters[type] \|\| clusters.Unbekannt).addLayer(marker);
	.bindPopup('<strong>' + s.name + '</strong><br>' + type);

	~~var group =~~ clusters[type] \|\| clusters.Unbekannt;
	~~group~~.addLayer(marker);

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

	~~// Alle Cluster zur Karte hinzufügen~~		Object.values(clusters).forEach(function(g){ map.addLayer(g); });
	Object.values(clusters).forEach(function(g){
	map.addLayer(g);
	});

	~~// Layer-Steuerung~~
	L.control.layers(null, {		L.control.layers(null, {
	"Grundschulen": clusters.Grundschule,		"Grundschulen": clusters.Grundschule,
	"Gymnasien": clusters.Gymnasium,		"Gymnasien": clusters.Gymnasium,
	"Gesamtschulen": clusters.Gesamtschule,		"Gesamtschulen": clusters.Gesamtschule,
	"Berufskollegs": clusters.Berufskolleg,		"Berufskollegs": clusters.Berufskolleg,
	"Förderschulen": clusters.Förderschule,		"Förderschulen": clusters.Förderschule,
	"Sonstige": clusters.Unbekannt		"Sonstige": clusters.Unbekannt
	}, {collapsed:false}).addTo(map);		}, {collapsed:false}).addTo(map);

	~~// Kartenausschnitt automatisch anpassen~~		if (bounds.length) map.fitBounds(bounds);
	if (bounds.length) {
	map.fitBounds(bounds);
	}

	})();		})();
	</script>		</script>

HorstR am 7. Dezember 2025 um 19:50 Uhr

2025-12-07T19:50:11Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:50 Uhr
Zeile 42:		Zeile 42:
	schoolData = JSON.parse(raw);		schoolData = JSON.parse(raw);
	} catch(e) {		} catch(e) {
	console.error("Fehler ~~beim Parsen der SMW Daten~~:", e, raw);		console.error("JSON-Fehler:", e, raw);
	return;		return;
	}		}

HorstR am 7. Dezember 2025 um 19:46 Uhr

2025-12-07T19:46:47Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:46 Uhr
Zeile 9:		Zeile 9:
	{{#ask:		{{#ask:
	[[Kategorie:Schule]]		[[Kategorie:Schule]]
	\|?Koordinaten		\|?Koordinaten.Latitude=lat
	\|?~~Schultyp~~		\|?Koordinaten.Longitude=lon
	\|?Name		\|?Name=name
	~~\|format~~=~~list~~		\|?Schultyp=type
	\|~~template~~=~~SchulJSON~~		\|format=json
	\|~~sep=,~~
	~~\|headers=hide~~
	~~\|link~~=~~none~~
	\|plain=yes		\|plain=yes
			\|api=yes
	}}		}}
	</script>		</script>

HorstR am 7. Dezember 2025 um 19:45 Uhr

2025-12-07T19:45:10Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:45 Uhr
Zeile 7:		Zeile 7:
	<!-- SMW-Daten als JSON array -->		<!-- SMW-Daten als JSON array -->
	<script id="smw-data" type="application/json">		<script id="smw-data" type="application/json">
	[
	{{#ask:		{{#ask:
	[[Kategorie:Schule]]		[[Kategorie:Schule]]
Zeile 20:		Zeile 19:
	\|plain=yes		\|plain=yes
	}}		}}
	]
	</script>		</script>

HorstR am 7. Dezember 2025 um 19:35 Uhr

2025-12-07T19:35:40Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:35 Uhr
Zeile 1:		Zeile 1:
			<!-- Debug-Ausgabe (temporär) -->
			<pre id="debug" style="white-space: pre-wrap; max-height:200px; overflow:auto; border:1px solid #ccc; padding:6px;"></pre>

	<div id="map" style="width:100%; height:600px;"></div>		<div id="map" style="width:100%; height:600px;"></div>


	<!-- SMW-Daten als JSON array -->		<!-- SMW-Daten als JSON array -->
Zeile 32:		Zeile 36:
	// JSON aus Scriptblock holen		// JSON aus Scriptblock holen
	var raw = document.getElementById('smw-data').textContent.trim();		var raw = document.getElementById('smw-data').textContent.trim();
	document.getElementById('debug').textContent = raw;
			// Debug: zeige den rohen SMW-Output auf der Seite
			document.getElementById('debug').textContent = raw;

HorstR am 7. Dezember 2025 um 19:30 Uhr

2025-12-07T19:30:30Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:30 Uhr
Zeile 31:		Zeile 31:

	// JSON aus Scriptblock holen		// JSON aus Scriptblock holen
	// var raw = document.getElementById('smw-data').textContent.trim();		var raw = document.getElementById('smw-data').textContent.trim();
	~~var raw =~~ document.getElementById('debug').textContent = raw;		document.getElementById('debug').textContent = raw;

HorstR am 7. Dezember 2025 um 19:26 Uhr

2025-12-07T19:26:17Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:26 Uhr
Zeile 31:		Zeile 31:

	// JSON aus Scriptblock holen		// JSON aus Scriptblock holen
	var raw = document.getElementById('smw-data').textContent.trim(),		// var raw = document.getElementById('smw-data').textContent.trim();
	var raw = document.getElementById('debug').textContent = raw;		var raw = document.getElementById('debug').textContent = raw;


	// JSON sicher parsen		// JSON sicher parsen