From c1221390960e990c1ff0bb79ea00094ec2354ad9 Mon Sep 17 00:00:00 2001
From: stadtentwicklung <59733721+stadtentwicklung@users.noreply.github.com>
Date: Thu, 5 May 2022 18:17:45 +0200
Subject: [PATCH] Add files via upload
---
index.html | 32 +++++++++++++++++++++
main.css | 19 +++++++++++++
main.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 133 insertions(+)
create mode 100644 index.html
create mode 100644 main.css
create mode 100644 main.js
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2e07092
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ SchwarzPlan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..c2a5e72
--- /dev/null
+++ b/main.css
@@ -0,0 +1,19 @@
+body { margin:0; padding:0; }
+body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
+#map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
+#locateButton { position: absolute; bottom:30px; right:10px; padding:10px; z-index:500; background: white; background: rgba(255,255,255,0.9); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; text-align: right }
+.ctl {
+ padding: 2px 10px 2px 10px;
+ background: white;
+ background: rgba(255,255,255,0.9);
+ box-shadow: 0 0 15px rgba(0,0,0,0.2);
+ border-radius: 5px;
+ text-align: right;
+}
+.title {
+ font-size: 18pt;
+ font-weight: bold;
+}
+.src {
+ font-size: 10pt;
+}
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..1819c30
--- /dev/null
+++ b/main.js
@@ -0,0 +1,82 @@
+/* **** Leaflet **** */
+
+// Base layers
+// .. OpenStreetMap
+var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors', minZoom: 12, maxZoom: 25});
+
+// .. White background
+//var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==", {minZoom: 12, maxZoom: 16});
+
+// Overlay layers (TMS)
+var lyr = L.tileLayer('./{z}/{x}/{y}.png', {tms: true, opacity: 1, attribution: "© Stadtentwicklung CB 2021", minZoom: 12, maxZoom: 25});
+
+// GPX-Track
+// Create Track with https://routing.openstreetmap.de/
+var gpx = 'https://raw.githubusercontent.com/stadtentwicklung/map4/main/track/route.gpx'; // URL to your GPX file or the GPX itself
+var track = new L.GPX(gpx, {
+ async: true,
+ marker_options: {
+ startIconUrl: 'https://raw.githubusercontent.com/mpetazzoni/leaflet-gpx/main/pin-icon-start.png',
+ endIconUrl: 'https://raw.githubusercontent.com/mpetazzoni/leaflet-gpx/main/pin-icon-end.png',
+ wptIconUrls: 'https://raw.githubusercontent.com/mpetazzoni/leaflet-gpx/main/pin-icon-wpt.png',
+ shadowUrl: 'https://raw.githubusercontent.com/mpetazzoni/leaflet-gpx/main/pin-shadow.png'
+ },
+ polyline_options: {
+ color: 'red',
+ opacity: 1,
+ weight: 6,
+ lineCap: 'round'
+ }
+}).on('loaded', function(e) {
+ map.fitBounds(e.target.getBounds());
+});
+
+// Map
+var map = L.map('map', {
+ center: [51.727501287145, 14.324939214489],
+ zoom: 12,
+ minZoom: 12,
+ maxZoom: 25,
+ layers: [osm, track],
+ loadingControl: true
+});
+
+var basemaps = {"OpenStreetMap": osm}
+var overlaymaps = {"Route": track}
+
+// Title
+var title = L.control();
+title.onAdd = function(map) {
+ this._div = L.DomUtil.create('div', 'ctl title');
+ this.update();
+ return this._div;
+};
+title.update = function(props) {
+ this._div.innerHTML = "Stadtteilrundgang Sachsendorf";
+};
+title.addTo(map);
+
+// Add base layers
+L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);
+
+// Fit to overlay bounds (SW and NE points with (lat, lon))
+//map.fitBounds([[51.73538626510637, 14.358582223434118], [51.78209881565247, 14.30522229550299]]);
+
+// LOCATING
+
+function onLocationFound(e) {
+ // var radius = e.accuracy / 2; /*Radius um den Marker*/
+ var location = e.latlng
+ L.marker(location).addTo(map).bindPopup("Du bist ungefähr hier.").openPopup();
+ // L.circle(location, radius).addTo(map); /*Kreis zeigen*/
+};
+
+function onLocationError(e) {
+ alert(e.message);
+};
+
+function getLocationLeaflet() {
+ map.on('locationfound', onLocationFound);
+ map.on('locationerror', onLocationError);
+ map.locate({setView: true, maxZoom: 25});
+};
\ No newline at end of file