Add files via upload

BadlyDrawnBoy · Jul 13, 2023 · 19ffc12 · 19ffc12
1 parent 4509f46
commit 19ffc12
Show file tree

Hide file tree

Showing 42 changed files with 9,817 additions and 0 deletions.
diff --git a/Beispiel1.gpx b/Beispiel1.gpx
diff --git a/Beispiel1.html b/Beispiel1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html> 
+<html lang="de"> 
+	<head> 
+		<meta charset="utf-8"/> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+		<title>GPXViewer Beispiel 1</title>
+		<script src="GM_Utils/GPX2GM.js"></script>
+		<style>
+			html, body { padding-right:0 }
+			.map {width:100%;height:100vh}
+			footer { border-top: thin solid currentColor; padding-top: .5em; margin-top: .5em; }
+			@media screen and (min-width:700px) {
+				.text { display:inline-block; vertical-align: top; padding-right:1em; width:25%; margin:0 }
+				.map { display:inline-block; width: 72%; width:calc(75% - 25px); height:95vh; height:calc(100vh - 10px); margin:0; padding:0 }
+			}
+		</style>
+	</head>
+	<body>
+		<div class="text">
+			<h1>GPXViewer Beispiel 1 - nur eine Karte</h1>
+			<p>Das Beispiel zeigt den Track einer Radtour im Allgäu in der Nähe von Füssen.</p>
+		</div>
+		<div class="map gpxview:Beispiel1.gpx:Satellit"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+		<p><a href="Beispiel1.gpx">Download GPX-File</a>
+		<footer>2. 2. 2021 <a href="https://www.j-berkemeier.de/GPXViewer/">GPX-Viewer</a></footer>
+	</body>
+</html>
diff --git a/Beispiel10.html b/Beispiel10.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html> 
+<html lang="de"> 
+	<head> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta charset="utf-8"> 
+		<title>GPXViewer Beispiel 10</title>
+		<script>
+			var Fullscreenbutton = true;
+			var Unit = "airwater";
+			Hglattlaen = 2000;
+		</script>
+		<script src="GM_Utils/GPX2GM.js"></script>
+		<style>
+			body { width:calc(100% - 50px);padding: 10px 10px 10px 30px }
+			figure { margin:0;padding:0; }
+			#gpxviewer { display: grid; gap: .3em; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr	)); }
+			#map1 { height:100vh; }
+			#map1_profiles { height:100vh; }
+			#map1_hp { height:calc((100% + 64px)/3);margin-top:10px }
+			#map1_sp { height:calc((100% + 64px)/3);margin-top:-37px }
+			#map1_vp { height:calc((100% + 64px)/3);margin-top:-37px }
+			#map2 { width:100%;height:500px;height:69vh }
+			#map2_profiles { width:100%;height:100px;height:30vh;margin-top:1vh }
+			#map2_vp { width:100%;height:100% }
+		</style>
+	</head>
+	<body>
+	<body>
+		<h1>GPXViewer Beispiel 10 - Karten und Profile mit Seemeile und Fuß als Einheiten</h1>
+		<div id="gpxviewer">
+			<figure id="map1" class="gpxview:Flug.gpx:Karte"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></figure>
+			<figure id="map1_profiles">
+				<figure id="map1_hp" class="no_x"><noscript><p>Zum Anzeigen des Profils wird Javascript benötigt.</p></noscript></figure>
+				<figure id="map1_sp" class="no_x"><noscript><p>Zum Anzeigen des Profils wird Javascript benötigt.</p></noscript></figure>
+				<figure id="map1_vp"><noscript><p>Zum Anzeigen des Profils wird Javascript benötigt.</p></noscript></figure>
+			</figure>
+		</div>
+		<div id="map2" class="gpxview:Faehre.gpx:Open_Sea"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+		<div id="map2_profiles">
+			<div id="map2_vp"><noscript><p>Zum Anzeigen des Profils wird Javascript benötigt.</p></noscript></div>
+		</div>
+		<hr><p>6. 7. 2020 <a href="https://www.j-berkemeier.de/GPXViewer/">GPX-Viewer</a></p>
+	</body>
+</html>
diff --git a/Beispiel12.html b/Beispiel12.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="de"> 
+	<head> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="utf-8"> 
+		<title>Beispiel 12 - Ordner lesen</title>
+		<style>
+			#map { width:100%;height:500px;height:95vh;margin-top:2.5em }
+			#sel { position:absolute;right:1em }
+		</style>
+	</head>
+	<body>
+		<h1>Beispiel 12 - Ordner lesen</h1>
+		<p>In diesem Beispiel wird gezeigt, wie alle in einem Ordner auf dem Server abgelegten GPX-Dateien über ein Auswahlmenü angezeigt werden können. Dazu muss auf dem Webserver das <code>Dirctorylisting</code> eingeschaltet werden. Auf dem Apache-Server muss dazu in den Ordner mit den GPX-Dateien eine Datei mit Namen <code>.htaccess</code> und dem Inhalt <code>Options +Indexes</code> gelegt werden.</p>
+		<select id="sel" class="gpxview">
+		</select>		
+		<div id="map"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+
+		<script src="GM_Utils/GPX2GM.js?autoload=false"></script>
+		<script>
+			var Legende_fnm = false;
+			var ordner = "GPX/"; // in diesem Ordner werden die GPX-Dateien gesucht
+			var sel = document.getElementById("sel");
+			JB.loadFile({name:ordner},"a",function(result,status) { // Daten lesen
+				JB.Debug_Info("","Lese Ordner: "+ordner+", Status: "+status,false);
+				if(status == 200) { // Wenn OK, URLs suchen, in ein Array schreiben und Menüoptionen anlegen
+					var hrefs = result.asciidata.match(/href=".+?\.gpx"/g);  // ? wegen "genügsam".
+					for(var i=0;i<hrefs.length;i++) hrefs[i] = hrefs[i].replace('href="','').replace('"','');
+					JB.Debug_Info("",hrefs.join("\n"),false);
+					for(var i=0;i<hrefs.length;i++) {
+						var opt = document.createElement("option");
+						opt.value = 'map:'+ordner+hrefs[i]+':Karte';
+						var txt = document.createTextNode(decodeURI(hrefs[i]));
+						opt.appendChild(txt);
+						sel.appendChild(opt);
+					}
+					if(hrefs.length) { 
+						document.getElementById("map").className = 'gpxview:'+ordner+hrefs[0]+':Karte'; // Die erste Datei wird angezeigt
+						JB.GPX2GM.start();
+					}
+				}
+			});
+		</script>
+
+		<p>7. 5. 2019 <a href="https://www.j-berkemeier.de">Jürgen Berkemeier</a></p>
+	</body>
+</html>
diff --git a/Beispiel12b.html b/Beispiel12b.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="de"> 
+	<head> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="utf-8"> 
+		<title>Beispiel 12 - Ordner lesen</title>
+		<style>
+			#map { width:100%;height:500px;height:95vh }
+			#sel { position:absolute;right:1.7em }
+		</style>
+	</head>
+	<body>
+		<h1>Beispiel 12 - Ordner lesen und alles anzeigen</h1>
+		<p>In diesem Beispiel wird gezeigt, wie alle in einem Ordner auf dem Server abgelegten GPX-Dateien angezeigt werden können. Dazu muss auf dem Webserver das <code>Dirctorylisting</code> eingeschaltet werden. Auf dem Apache-Server muss dazu in den Ordner mit den GPX-Dateien eine Datei mit Namen <code>.htaccess</code> und dem Inhalt <code>Options +Indexes</code> gelegt werden.</p>
+		<div id="map"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+		<script src="GM_Utils/GPX2GM.js?autoload=false"></script>
+		<script>
+			var Legende_fnm = false;
+			var Arrowtrack = true;
+			var ordner = "GPX/"; // in diesem Ordner werden die GPX-Dateien gesucht
+			JB.loadFile({name:ordner},"a",function(result,status) { // Daten lesen
+				JB.Debug_Info("","Lese Ordner: "+ordner+", Status: "+status,false);
+				if(status == 200) { // Wenn OK, URLs suchen, in ein Array schreiben und Dateinamen ins DIV eintragen
+					var hrefs = result.asciidata.match(/href=".+?\.gpx"/g);  // ? wegen "genügsam".
+					for(var i=0;i<hrefs.length;i++) hrefs[i] = hrefs[i].replace('href="','').replace('"','');
+					JB.Debug_Info("",hrefs.join("\n"),false);
+					if(hrefs.length) { 
+						document.getElementById("map").className = 'gpxview:'+ordner+hrefs.join(","+ordner)+':Karte'; // Die erste Datei wird angezeigt
+						JB.GPX2GM.start();
+					}
+				}
+			});
+		</script>
+
+		<p>7. 5. 2019 <a href="https://www.j-berkemeier.de">Jürgen Berkemeier</a></p>
+	</body>
+</html>
diff --git a/Beispiel13.html b/Beispiel13.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html> 
+<html lang="de"> 
+	<head> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta charset="utf-8"> 
+		<title>GPXViewer Beispiel 13</title>
+	</head>
+	<body>
+		<h1>GPXViewer Beispiel 13 - Nachträgliches Setzen eines Wegpunktes an der aktuellen Position</h1>
+		<div id="map" class="gpxview::Karte" style="display:block;width:100%;height:99vh"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+		<p><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">&#x1f518;</span> </p>
+		<hr><p>14. 11. 2020 <a href="https://www.j-berkemeier.de/GPXViewer/">GPX-Viewer</a></p>
+		<script src="GM_Utils/GPX2GM.js"></script>
+		<script>
+			const Legende = false;
+			let wpid = null;
+			const getPos = false, watchPos = true;
+			const geoloc = function(map) {
+				if (navigator.geolocation) {
+					const marker = map.Marker({lat:0,lon:0},JB.icons.CP)[0];
+					const geolocpos = function(position) {
+						const lat = position.coords.latitude;
+						const lon = position.coords.longitude;
+						map.rescale({latmin:lat-.001,latmax:lat+.001,lonmin:lon-.001,lonmax:lon+.001});
+						if(marker.setPosition) marker.setPosition(new google.maps.LatLng(lat,lon));
+						else if(marker.setLatLng) marker.setLatLng([lat,lon]);
+						console.log(lat,lon);
+					}
+					const geolocerror = function() {
+						JB.Debug_Info("geolocation","Geolocation-Dienst fehlgeschlagen!",true);
+					}
+					if(watchPos) {
+						if(wpid) navigator.geolocation.clearWatch(wpid);
+						wpid = navigator.geolocation.watchPosition(geolocpos,geolocerror,{enableHighAccuracy:true});
+					}
+					else if(getPos)
+						navigator.geolocation.getCurrentPosition(geolocpos,geolocerror,{enableHighAccuracy:true});
+				}
+				else JB.Debug_Info("geolocation","Geolocation wird nicht unterstützt!",true);
+			}
+
+			document.getElementById("map").addEventListener("Map_n",function(event) {
+				const map = event.detail.Map;
+				geoloc(map);
+			});
+
+		</script>	
+	</body>
+</html>
diff --git a/Beispiel14.html b/Beispiel14.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+		<meta charset="utf-8"> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Beispiel 14</title>
+		<script src="GM_Utils/GPX2GM.js"></script>
+		<style>
+			body { height:100vh; padding: 0 }
+			#map { position:absolute;left:0;right:0;top:0;bottom:0 }
+			#map_wp { display: none }
+		</style>
+		<script>
+			var Legende = false;
+			var Usegpxbounds = true;
+		</script>
+	</head>
+	<body>
+		<div id="map" class="map gpxview::Cycling"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div>
+		<div id="map_wp" data-geo="centerlat:51.86,centerlon:7.48,radius:1.0"></div>
+	</body>
+</html>
diff --git a/Beispiel1b.html b/Beispiel1b.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html> 
+<html lang="de"> 
+	<head> 
+		<meta charset="utf-8"> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>GPXViewer Beispiel 1 Parametertest</title>
+		<link rel="stylesheet" href="../jb.css" type="text/css"/>
+		<script>
+			var GPXVIEW_Debuginfo = true;
+		</script>
+		<script src="GM_Utils/GPX2GM.js"></script>
+		<style>
+			html, body { height:100%; padding-right:0 }
+			.map {width:100%;height:30%}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="text">
+			<h1>GPXViewer Beispiel 1 Parametertest</h1>
+		</div>
+		<div 
+			data-legende_fnm_lm="d" 
+			data-arrowtrack=true 
+			data-fullscreenbutton=true
+			class="map gpxview:Beispiel1.gpx:Satellit"></div>
+		<div 
+			data-legende_fnm_lm="t" 
+			class="map gpxview:Beispiel1.gpx:Karte"></div>
+		<div 
+			data-legende_fnm_lm="dt" 
+			class="map gpxview:Beispiel1.gpx:OSMDE"></div>
+		<noscript><p>Zum Anzeigen der Karteen wird Javascript benötigt.</p></noscript>
+			<hr><p>15. 10. 2019 <a href="https://www.j-berkemeier.de/GPXViewer/">GPX-Viewer</a></p>
+		<p><button id="viewsource" type="button" style="position:absolute;top:0;right:0" onclick="JB.LoadScript('viewsource.js',function(){})">Quelltext anzeigen</button></p>
+	</body>
+</html>