index.html

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

<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Proof of concept for Katja!</title>

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
		integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
		integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"
		type="text/css">

	<style>
		html,
		body {
			height: 100%;
			margin: 0;
		}

		.leaflet-container {
			height: 700px;
			width: 1000px;
			max-width: 100%;
			max-height: 100%;
		}
	</style>

	<style>
		#map {
			width: 1000px;
			height: 700px;
		}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255, 255, 255, 0.8);
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
		}

		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

		.legend {
			text-align: left;
			line-height: 18px;
			color: #555;
		}

		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>
</head>

<body>

	<h1>Hi Katja!</h1>
	<h2>Please use the slider on the top-left</h2>

	<div id='map'></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<!-- Include this library for mobile touch support  -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


	<script src="SliderControl.js"></script>

	<script type="text/javascript" src="happy_b.js"></script>

	<script type="text/javascript">

		const map = L.map('map').setView([48.81596, 9.293358], 14);

		const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		}).addTo(map);

		// control that shows state info on hover
		const info = L.control();

		info.onAdd = function (map) {
			this._div = L.DomUtil.create('div', 'info');
			this.update();
			return this._div;
		};

		info.update = function (props) {
			const contents = props ? `<b>${props.name}</b><br />Here some fake data:<br/>${props.density} l / ha` : 'Please use the slider on the top-left...';
			this._div.innerHTML = `<h2>Hello Katja!</h2>${contents}`;
		};

		info.addTo(map);


		// get color depending on population density value
		// From https://colorbrewer2.org/#type=sequential&scheme=RdPu&n=8
		// const colors = ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177'];
		const colors = ['#ffffcc','#ffeda0','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#b10026'];

		function getColor(d) {
			return d > 1000 ? colors[7] :
				d > 500 ? colors[6] :
					d > 200 ? colors[5] :
						d > 100 ? colors[4] :
							d > 50 ? colors[3] :
								d > 20 ? colors[2] :
									d > 10 ? colors[1] :
										colors[0];
		}

		function style(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.density)
			};
		}

		function highlightFeature(e) {
			const layer = e.target;

			layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

			layer.bringToFront();

			info.update(layer.feature.properties);
		}

		/* global statesData */
		const geojson = L.geoJson(happy_b, {
			style,
			onEachFeature
		});

		var sliderControl = L.control.sliderControl({ position: "topleft", layer: geojson, showAllOnStart: false, range: true });
		map.addControl(sliderControl);
		sliderControl.startSlider();

		function resetHighlight(e) {
			geojson.resetStyle(e.target);
			info.update();
		}

		function zoomToFeature(e) {
			map.fitBounds(e.target.getBounds());
		}

		function onEachFeature(feature, layer) {
			layer.on({
				mouseover: highlightFeature,
				mouseout: resetHighlight,
				click: zoomToFeature
			});
		}

		map.attributionControl.addAttribution('Fake Wasserverbrauch &copy; <a href="http://dwd.de/">DWD</a>');


		const legend = L.control({ position: 'bottomright' });

		legend.onAdd = function (map) {

			const div = L.DomUtil.create('div', 'info legend');
			const grades = [0, 10, 20, 50, 100, 200, 500, 1000];
			const labels = [];
			let from, to;

			for (let i = 0; i < grades.length; i++) {
				from = grades[i];
				to = grades[i + 1];

				labels.push(`<i style="background:${getColor(from + 1)}"></i> ${from}${to ? `&ndash;${to}` : '+'}`);
			}

			div.innerHTML = labels.join('<br>');
			return div;
		};

		legend.addTo(map);

	</script>


</body>

</html>