commit e07050059dc7f682f63accb8c278f588c77df721 Author: Antonia Pérez-Cerezo Date: Sat Aug 24 20:48:32 2024 +0200 Add frontend diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..d316036 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + +
+ + + diff --git a/frontend/map.js b/frontend/map.js new file mode 100644 index 0000000..b0dbc91 --- /dev/null +++ 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 += '' + l[i]["name"] + "
"; + } + 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); + }) diff --git a/frontend/styles.css b/frontend/styles.css new file mode 100644 index 0000000..d756f67 --- /dev/null +++ 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; +}