sstent/StuTracker
1
0
Fork 0
mirror of https://github.com/sstent/StuTracker.git synced 2026-01-27 11:01:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
sstent
2024-06-03 12:01:48 -04:00
committed by GitHub
parent 40b4a3a102
commit fab441b055
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>OpenStreetMap with KML Data</title> <title>OpenStreetMap with KML and GPX Data</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
@@ -25,8 +25,8 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Include Leaflet JavaScript --> <!-- Include Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Include Leaflet Omnivore plugin --> <!-- Include Leaflet GPX plugin -->
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script> <script src="https://unpkg.com/leaflet-gpx/gpx.js"></script>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
@@ -43,20 +43,35 @@
// KML URL with username and password // KML URL with username and password
var kmlUrl = 'https://USERNAME:abodyinmotion@share.garmin.com/Feed/ShareLoader/NDB92'; var kmlUrl = 'https://USERNAME:abodyinmotion@share.garmin.com/Feed/ShareLoader/NDB92';
// Use CorsProxy.io
var corsProxy = 'https://corsproxy.io/?';
var proxyKmlUrl = corsProxy + encodeURIComponent(kmlUrl);
// Load the KML file // Load the KML file
omnivore.kml(proxyKmlUrl).addTo(map); omnivore.kml(kmlUrl).addTo(map);
// Optionally, handle any errors // Optionally, handle any errors
omnivore.kml(proxyKmlUrl).on('ready', function() { omnivore.kml(kmlUrl).on('ready', function() {
console.log('KML loaded successfully'); console.log('KML loaded successfully');
}).on('error', function() { }).on('error', function() {
alert('Failed to load KML'); alert('Failed to load KML');
}); });
// GPX URL - Replace 'your_file.gpx' with the filename of your GPX file
var gpxUrl = 'croton.gpx';
// Load the GPX file
new L.GPX(gpxUrl, {
async: true,
marker_options: {
startIconUrl: 'https://leafletjs.com/docs/images/marker-icon.png',
endIconUrl: 'https://leafletjs.com/docs/images/marker-icon.png',
shadowUrl: 'https://leafletjs.com/docs/images/marker-shadow.png'
}
}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
// Optionally, handle any errors
new L.GPX(gpxUrl).on('error', function(error) {
console.error('Failed to load GPX:', error);
});
</script> </script>
</body> </body>
</html> </html>