Add frontend

2024-08-24 20:48:32 +02:00 · 2024-08-24 20:48:32 +02:00 · e07050059d
commit e07050059d
3 changed files with 86 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+	<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>
+	 <script src="https://unpkg.com/protomaps-leaflet@4.0.0/dist/protomaps-leaflet.js"></script>
+	 <link rel="stylesheet" type="text/css" href="/common/styles.css" />
+	<meta charset="UTF-8">
+  </head>
+  <body>
+    <div id="map"></div>
+	<script src="/common/map.js"></script>
+  </body>
+</html>
--- a/frontend/map.js
+++ b/frontend/map.js
@ -0,0 +1,47 @@
+
+const rules = new Array;
+const l = new Array;
+var legend = L.control({position: 'bottomleft'});
+legend.onAdd = function (map) {
+		var div = L.DomUtil.create('div', 'legend');
+		for (var i = 0; i < l.length; i++) {
+			  div.innerHTML += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>";
+		}
+		return div;
+};
+
+
+var strecken = protomapsL.leafletLayer({
+    url: "strecken.pmtiles",
+		maxDataZoom: 10,
+		maxZoom: 19,
+    paintRules: rules,
+		
+});
+
+
+const map = L.map("map", {  center: [52,13], zoom: 3, minZoom: 0 });
+fetch("layers.json")
+		.then((response) => response.json())
+		.then((data) => {
+				document.title = data["name"]
+				layers = data["layers"]
+				for (let key in layers) {
+						l.push({ name: layers[key]["humanname"], color: layers[key]["color"] });
+						rules.push({
+								dataLayer: key,
+								symbolizer: new protomapsL.LineSymbolizer(layers[key])
+						});
+				}
+				const tiles = data["tilelayer"]
+				var osm = L.tileLayer(
+						tiles["url_template"],
+						{
+								maxZoom: 19,
+								attribution: tiles["attribution"]
+						}
+				)
+				osm.addTo(map);
+				legend.addTo(map);
+				strecken.addTo(map);
+		})
--- a/frontend/styles.css
+++ b/frontend/styles.css
@ -0,0 +1,21 @@
+body {
+	margin: 0;
+	padding: 0;
+}
+#map {
+    width: 100%;
+    height: 100vh;
+}
+.legend {
+	background-color: #fff;
+	border-radius: 0.5em;
+	border: 2px solid grey;
+	padding: 0.5em;
+}
+.dot {
+	height: 1em;
+	width: 1em;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 0.7em;
+}