docs/map.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<title>Die Verhinderung der Windenergie</title>

	<script src="maplibre-gl.js"></script>
	<script src="autoComplete.min.js"></script>
	<link href="maplibre-gl.css" rel="stylesheet" />
	<link href="autoComplete.css" rel="stylesheet" />
	<style>
		html {
			height: -webkit-fill-available;
			overflow: hidden;
			overflow-x: hidden;
			overflow-y: hidden;
		}

		body {
			width: 100vw;
			min-height: 100vh;
			min-height: -webkit-fill-available;
			margin: 0;
			padding: 0;
			overflow: hidden;
			overflow-x: hidden;
			overflow-y: hidden;
			position: relative;
		}

		#map {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.maplibregl-cooperative-gesture-screen {
			padding-bottom: 131px;
		}
		.maplibregl-ctrl-attrib-inner {
			line-height: 1.2em;
			padding: 5px 5px 5px 0px;
		}

		.maplibregl-ctrl-attrib {
			box-shadow: 0 0 5px #000;
		}

		.maplibregl-ctrl-bottom-left {
			width: 100%;
			z-index: 10;
		}

		.maplibregl-ctrl-bottom-right {
			bottom: 115px;
		}

		.search-container input {
			border-radius: 5px;
			padding: 2px 3px;
			border: 1px solid #888;
			position: relative;
		}

		.slider-container {
			float: left;
			background-color: #fff;
			width: 100%;
			padding: 0px;
			height: 115px;
			box-sizing: border-box;
			position: relative;
			user-select: none;
			pointer-events: all;
		}

		.slider-container * {
			position: absolute;
			pointer-events: none;
		}

		.slider-hint {
			text-align: center;
			left: 0px;
			right: 0px;
		}

		.slider-track {
			top: 45px;
			height: 3px;
			border-radius: 2px;
			background-color: #000;
			z-index: 100;
		}

		.slider-thumb {
			top: 19px;
			width: 50px;
			height: 36px;
			margin-left: -25px;
			cursor: pointer;
			pointer-events: all;
		}

		.slider-sign {
			top: 1px;
			left: 0px;
			width: 50px;
			background: #d50d2e;
			border-radius: 10px;
			color: #fff;
			font-size: 12px;
			text-align: center;
		}

		.slider-mark {
			top: 20px;
			left: 19px;
			width: 0px;
			height: 0px;
			background: transparent;
			border: 6px solid transparent;
			border-top: 6px solid #d50d2e;
		}

		.slider-label {
			top: 45px;
			border-left: 1px solid rgba(0, 0, 0, 0.25);
			border-right: 1px solid rgba(0, 0, 0, 0.25);
			line-height: 1em;
			padding: 0px;
		}

		.slider-label-text {
			font-size: 10px;
			padding: 0px 2px;
			white-space: nowrap;
			pointer-events: auto;
			cursor: pointer;
			background: rgba(255, 255, 255, 0.7);
			z-index: 100;
			color: rgba(0, 0, 0, 0.5);
		}

		.slider-label.highlight1 {
			border-left: 1px solid rgba(213, 13, 46, 0.5);
			border-right: 1px solid rgba(213, 13, 46, 0.5);
		}

		.slider-label.highlight1 .slider-label-text {
			color: rgba(213, 13, 46, 0.5);
		}

		.slider-label.highlight2 {
			border-left: 1px solid rgba(213, 13, 46, 1);
			border-right: 1px solid rgba(213, 13, 46, 1);
		}

		.slider-label.highlight2 .slider-label-text {
			color: rgba(213, 13, 46, 1);
		}
	</style>
</head>

<body>
	<div id="map"></div>
	<script>
		(() => {
			const maxDistance = 2500;
			const minDistance = 0;
			const distance = 1000;
			let container = document.getElementById('map');
			let map = new maplibregl.Map({
				container,
				//style: 'https://cdn.michael-kreil.de/map/style/positron/white.json',
				//style: 'https://static.datenhub.net/maps/styles/positron/white.json',
				style: 'https://cdn.michael-kreil.de/app/windradabstand/map-style.json',
				bounds: [5.86, 47.27, 15.04, 55.05],
				fitBoundsOptions: { padding: { top: 5, bottom: 120, left: 5, right: 5 } },
				maxBounds: [0.8, 43.7, 20.1, 57.1],
				maxZoom: 13,
				minPitch: 0,
				maxPitch: 0,
				hash: true,
				dragRotate: false,
				touchPitch: false,
				attributionControl: false,
				cooperativeGestures: true,
			});
			map.touchZoomRotate.disableRotation();

			let attributionControl = new maplibregl.AttributionControl({
				compact: true,
				customAttribution: [
					'Die Karte markiert alle Flächen in rot, auf denen nach einem vereinfachten Modell aktuell keine Windanlagen gebaut werden könnten.',
					'Mit dem Schieberegler unten kann im Rahmen dieses Modells der Mindestabstand zu Wohngebäuden verändert werden.',
					'Zusätzlich werden aber auch weitere bundesländereigene, feste Mindestabstandsregelungen berücksichtigt, wie z.B. zu Wohn-, Gewerbe-, Erholungsgebieten, Campingplätzen, Natur- und andere Schutzgebieten, Straßen, Bahnstrecken, Freileitungen, Gewässern, Flugplätzen, Verkehrsflächen und seismischem Messstationen.',
					'Da einige Bundesländer Mindestabstände vorschreiben, die von der Höhe der Anlagen abhängen, nehmen wir eine typische Höhe für Neuanlagen von 200 m an.',
					'<br><br>',
					'<b>Kartenhintergrund:</b><br>',
					'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap Mitwirkende</a><br>',
					'<b>Naturschutzgebiete etc.:</b><br>',
					'<a href="https://geodienste.bfn.de/schutzgebiete?lang=de&layers=LSG" target="_blank">© Bundesamt für Naturschutz</a><br>',
					'<b>Infrastruktur, Gebäudeumrisse, etc. (ALKIS):</b><br>',
					'<a href="https://adv-smart.de" target="_blank">© AdV Smart Mapping des Landesamtes für Digitalisierung, Breitband und Vermessung Bayern</a><br>',
					'<b>Quellcode für Berechnung und Frontend:</b><br>',
					'<a href="https://github.com/michaelkreil/windradabstand" target="_blank">github.com/michaelkreil/windradabstand</a>',
				].join(' '),
			});

			map.addControl(new maplibregl.FullscreenControl(), 'bottom-right');

			map.addControl(new SearchControl(), 'top-right');

			map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');

			const sdfLimit = (distance - minDistance) / (maxDistance - minDistance);
			const sdfWidth = 1 / (maxDistance - minDistance);

			map.on('load', async () => {
				map.getStyle().layers.forEach(l => {
					if (l['source-layer'] === 'place') map.setLayerZoomRange(l.id, 5, l.maxzoom);
				});
				map.addSource('tilesSource', {
					type: 'raster',
					tiles: ['https://cdn.michael-kreil.de/data/windradabstand/{z}/{y}/{x}.webp'],
					bounds: [5.8, 47.2, 15.1, 55.1],
					minzoom: 0,
					maxzoom: 13,
					tileSize: 256,
				});
				map.addLayer({
					id: 'tilesLayer',
					type: 'raster',
					source: 'tilesSource',
					paint: {
						'raster-sdf-limit': sdfLimit,
						'raster-sdf-width': sdfWidth,
						'raster-opacity': ['interpolate', ['linear'], ['zoom'], 6, 1.0, 8, 0.5],
					},
				});

				map.addControl(
					new SliderControl({
						minValue: 400,
						maxValue: 2000,
						handle: v => {
							//console.log(v);
							v = (v - minDistance) / (maxDistance - minDistance);
							if (v < 0) v = 0;
							if (v > 1) v = 1;
							map.setPaintProperty('tilesLayer', 'raster-sdf-limit', v);
							map.triggerRepaint();
						},
					}),
					'bottom-left'
				);
				map.addControl(attributionControl, 'bottom-left');
				attributionControl._updateCompactMinimize();
			});

			function loadViaAjax(url) {
				return new Promise((res, rej) => {
					let req = new XMLHttpRequest();
					req.open('GET', url, true);
					req.onload = () => {
						if (req.status < 200 || req.status >= 400) {
							console.log(req);
							return rej(req.status);
						}
						res(req.response);
					};
					req.send();
				});
			}

			function SliderControl(opt) {
				const labels = [
					{ value: 400, y: 4, text: 'Hamburg, Niedersachsen, Sachsen-Anhalt, Schleswig-Holstein' },
					{ value: 450, y: 3, text: 'Bremen' },
					{ value: 500, y: 2, text: 'Rheinland P.' },
					{ value: 600, y: 1, text: 'Thüringen' },
					{ value: 650, y: 0, text: 'Saarland' },
					{ value: 700, y: 3, text: 'Baden-Württemberg' },
					{ value: 800, y: 2, text: 'Mecklenburg-Vorpommern' },
					{ value: 1000, y: 1, text: 'Brandenburg, Hessen, NRW, Sachsen' },
					{ value: 2000, y: 0, text: 'Bayern', right: true },
				];
				let value = 1000;
				let map;
				return { onAdd };
				function onAdd(_map) {
					map = _map;

					const paddingHori = 25;

					const container = createDomNode('div', { className: 'slider-container' });
					const hint = createDomNode('div', { className: 'slider-hint' }, container);
					hint.innerHTML = 'Wählen Sie hier einen Mindestsabstand zu Wohngebäuden:'

					const track = createDomNode('div', { className: 'slider-track' }, container);
					const thumb = createDomNode('div', { className: 'slider-thumb' }, container);
					const sign = createDomNode('div', { className: 'slider-sign' }, thumb);
					const mark = createDomNode('div', { className: 'slider-mark' }, thumb);

					track.style.left = paddingHori + 'px';
					track.style.right = paddingHori + 'px';

					labels.forEach(label => {
						label.node = createDomNode('div', { className: 'slider-label' }, container);
						label.textNode = createDomNode(
							'div',
							{ className: 'slider-label-text' },
							label.node
						);
						label.textNode.innerText = label.text;

						label.pos = (label.value - opt.minValue) / (opt.maxValue - opt.minValue);

						if (label.right) {
							label.node.style.borderLeft = 'none';
							label.textNode.style.right = '0px';
						} else {
							label.node.style.borderRight = 'none';
						}
						label.offset = label.y * 13;
						label.node.style.height = 16 + label.offset + 'px';
						label.textNode.style.marginTop = 5 + label.offset + 'px';
						label.textNode.addEventListener('pointerdown', e => {
							e.preventDefault();
							e.stopPropagation();
							//console.log('click');
							value = label.value;
							updatePosition();
							opt.handle(value);
						});
					});

					let trackWidth, pointerX;

					updateSize();
					opt.handle(value);
					setTimeout(updateSize, 0);
					setTimeout(updateSize, 100);
					window.addEventListener('resize', updateSize);

					function updateSize() {
						trackWidth = container.offsetWidth - 2 * paddingHori;
						labels.forEach(label => {
							let x = Math.round(trackWidth * label.pos);
							if (label.right) {
								label.node.style.right = paddingHori + trackWidth - x + 'px';
							} else {
								label.node.style.left = paddingHori + x + 'px';
							}
						});
						updatePosition();
					}

					function updatePosition() {
						let x = Math.round(
							(trackWidth * (value - opt.minValue)) / (opt.maxValue - opt.minValue)
						);
						thumb.style.left = x + paddingHori + 'px';
						track.style.background =
							'linear-gradient(to right, #d50d2e, #d50d2e ' + x + 'px, #000 ' + x + 'px)';
						sign.innerText = value + 'm';

						labels.forEach(label => {
							if (value < label.value) {
								label.node.classList.remove('highlight1');
								label.node.classList.remove('highlight2');
							} else if (value > label.value) {
								label.node.classList.add('highlight1');
								label.node.classList.remove('highlight2');
							} else {
								label.node.classList.remove('highlight1');
								label.node.classList.add('highlight2');
							}
						});
					}

					container.addEventListener('pointerdown', e => {
						//console.log('pointerdown', e);
						dragTo(e.pageX);
					});
					container.addEventListener('pointermove', e => {
						//console.log('pointermove', e);
						if (e.buttons > 0) {
							dragTo(e.pageX);
							e.preventDefault();
						}
					});
					container.addEventListener('touchmove', e => {
						//console.log('touchmove', e);
						if (e.touches[0]) {
							dragTo(e.touches[0].pageX);
							e.preventDefault();
						}
					});

					function dragTo(x) {
						let v = (x - paddingHori) / trackWidth;
						if (v < 0) v = 0;
						if (v > 1) v = 1;
						v = opt.minValue + v * (opt.maxValue - opt.minValue);
						v = Math.round(v / 50) * 50;

						if (v === value) return;
						value = v;
						updatePosition();
						opt.handle(v);
					}

					return container;
				}
			}

			function SearchControl(opt) {
				return { onAdd };
				function onAdd(_map) {
					map = _map;

					const paddingHori = 0;

					const container = createDomNode('div', {
						className: 'search-container maplibregl-ctrl maplibregl-ctrl-group',
					});

					const input = createDomNode(
						'input',
						{ id: 'autoComplete', type: 'text', size: 30 },
						container
					);

					setTimeout(initAutoComplete, 100);

					return container;
				}
				function initAutoComplete() {
					let places;
					const autoCompleteJS = new autoComplete({
						placeHolder: 'Suche nach Ort',
						data: {
							src: async () => {
								if (!places) {
									try {
										// Fetch Data from external Source
										let data = await fetch('places.json');
										data = await data.json();
										data = data.map(e => ({ name: e[0], order: e[1], bbox: e[2] }));
										data.sort((a, b) => b.order - a.order);
										places = data;
									} catch (error) {
										return error;
									}
								}
								return places;
							},
							keys: ['name'],
							cache: true,
						},
						resultItem: {
							highlight: true,
						},
						events: {
							input: {
								selection: (event) => {
									const place = event.detail.selection.value;
									autoCompleteJS.input.value = place.name;
									let bounds = [
										[place.bbox[0] / 1000, place.bbox[1] / 1000],
										[place.bbox[2] / 1000, place.bbox[3] / 1000]
									];
									map.fitBounds(bounds);
								}
							}
						}
					});
				}
			}

			function createDomNode(tagName, attr, parent) {
				let node = document.createElement(tagName);
				if (attr) Object.assign(node, attr);
				if (parent) parent.append(node);
				return node;
			}
		})();
	</script>
</body>

</html>