Add files via upload

stadtentwicklung · May 5, 2022 · c122139 · c122139
1 parent b682a3f
commit c122139
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+        <html lang="en">
+          <head>
+            <meta charset="utf-8">
+            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
+            <title>SchwarzPlan</title>
+            <!-- JQUERY -->
+			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>			
+            <!-- Leaflet -->
+             <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+				integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+				crossorigin=""/>
+            <!-- Make sure you put this AFTER Leaflet's CSS -->
+			<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+				integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+				crossorigin=""></script>			
+			<!-- Loading-Control: https://github.com/ebrelsford/Leaflet.loading -->
+			<link rel="stylesheet" href="./src/Control.Loading.css" />
+			<script src="./src/Control.Loading.js"></script>			
+			<!-- GPX -->
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
+            <!-- Individual Styles -->
+			<link rel="stylesheet" href="main.css">
+        </head>
+        <body>
+		<input type="button" id="locateButton" value="Standort anzeigen oder erneut laden!" onClick="javascript:getLocationLeaflet();">
+        <div id="map"></div>
+		<script src="main.js"></script>
+        </body>
+        </html>
+
+
diff --git a/main.css 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;
+}
diff --git a/main.js 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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: "&copy; 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&auml;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});
+};