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

Update index.html

Browse Source
This commit is contained in:
sstent
2024-06-03 11:23:20 -04:00
committed by GitHub
parent c627b3d1eb
commit 7f8dc6c27e
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@@ -1,7 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Google Map with KML Data</title> <title>OpenStreetMap with KML Data</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
/* Ensure the map container takes up the full page */ /* Ensure the map container takes up the full page */
#map { #map {
@@ -19,31 +21,34 @@
padding: 0; padding: 0;
} }
</style> </style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <!-- Include Leaflet CSS -->
<script> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
function initMap() { <!-- Include Leaflet JavaScript -->
// Create the map centered at a specific location <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
var map = new google.maps.Map(document.getElementById('map'), { <!-- Include KML plugin for Leaflet -->
center: {lat: 0, lng: 0}, <script src="https://unpkg.com/leaflet-omnivore"></script>
zoom: 2
});
// Load the KML file
var kmlLayer = new google.maps.KmlLayer({
url: 'https://share.garmin.com/Feed/Share/NDB92',
map: map
});
// Handle KML layer errors
kmlLayer.addListener('status_changed', function() {
if (kmlLayer.getStatus() !== 'OK') {
alert('Failed to load KML: ' + kmlLayer.getStatus());
}
});
}
</script>
</head> </head>
<body onload="initMap()"> <body>
<div id="map"></div> <div id="map"></div>
<script>
// Initialize the map
var map = L.map('map').setView([0, 0], 2);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Load the KML file
omnivore.kml('https://share.garmin.com/Feed/Share/NDB92').addTo(map);
// Optionally, handle any errors (omnivore doesn't have built-in error handling)
omnivore.kml('https://share.garmin.com/Feed/Share/NDB92').on('ready', function() {
console.log('KML loaded successfully');
}).on('error', function() {
alert('Failed to load KML');
});
</script>
</body> </body>
</html> </html>