sstent/StuTracker
1
0
Fork 0
mirror of https://github.com/sstent/StuTracker.git synced 2026-02-10 13:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
sstent
2024-06-03 12:13:00 -04:00
committed by GitHub
parent 6fc2126604
commit 2a4c42dba6
1 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -7,18 +7,26 @@
<style> <style>
/* Ensure the map container takes up the full page */ /* Ensure the map container takes up the full page */
#map { #map {
height: 100%; height: 90%;
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 10%;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
html, body { /* Style for the banner */
height: 100%; #banner {
margin: 0; position: absolute;
padding: 0; top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px; /* Adjust as needed */
font-size: 24px; /* Adjust as needed */
} }
</style> </style>
<!-- Include Leaflet CSS --> <!-- Include Leaflet CSS -->
@@ -31,9 +39,10 @@
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script> <script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
</head> </head>
<body> <body>
<div id="banner">StuTracker</div>
<div id="map"></div> <div id="map"></div>
<script> <script>
// Initialize the map centered on New York City // Initialize the map centered on the specified coordinates and zoom level
var map = L.map('map').setView([40.9734, -73.9256], 11); var map = L.map('map').setView([40.9734, -73.9256], 11);
// Add OpenStreetMap tiles // Add OpenStreetMap tiles
@@ -44,20 +53,22 @@
// 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
// Use CorsProxy.io to handle CORS for the KML file
var corsProxy = 'https://corsproxy.io/?'; var corsProxy = 'https://corsproxy.io/?';
var proxyKmlUrl = corsProxy + encodeURIComponent(kmlUrl); var proxyKmlUrl = corsProxy + encodeURIComponent(kmlUrl);
// Load the KML file // Load the KML file
omnivore.kml(proxyKmlUrl).addTo(map); omnivore.kml(proxyKmlUrl).addTo(map);
// Optionally, handle any errors // Optionally, handle any errors
omnivore.kml(kmlUrl).on('ready', function() { omnivore.kml(proxyKmlUrl).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 // GPX URL - Change 'croton.gpx' to the filename of your GPX file
var gpxUrl = 'croton.gpx'; var gpxUrl = 'croton.gpx';
// Load the GPX file // Load the GPX file