antonia/streckenkarte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add frontend

Browse source
This commit is contained in:
Antonia 2024-08-24 20:48:32 +02:00
commit e07050059d
3 changed files with 86 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/index.html Normal file
View file

@ -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>

47
frontend/map.js Normal file
View file

@ -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);
})

21
frontend/styles.css Normal file
View file

@ -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;
}