sstent/StuTracker
1
0
Fork 0
mirror of https://github.com/sstent/StuTracker.git synced 2026-02-16 12:25:35 +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

47
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 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Include Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Include KML plugin for Leaflet -->
<script src="https://unpkg.com/leaflet-omnivore"></script>
</head>
<body>
<div id="map"></div>
<script> <script>
function initMap() { // Initialize the map
// Create the map centered at a specific location var map = L.map('map').setView([0, 0], 2);
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0}, // Add OpenStreetMap tiles
zoom: 2 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 // Load the KML file
var kmlLayer = new google.maps.KmlLayer({ omnivore.kml('https://share.garmin.com/Feed/Share/NDB92').addTo(map);
url: 'https://share.garmin.com/Feed/Share/NDB92',
map: map
});
// Handle KML layer errors // Optionally, handle any errors (omnivore doesn't have built-in error handling)
kmlLayer.addListener('status_changed', function() { omnivore.kml('https://share.garmin.com/Feed/Share/NDB92').on('ready', function() {
if (kmlLayer.getStatus() !== 'OK') { console.log('KML loaded successfully');
alert('Failed to load KML: ' + kmlLayer.getStatus()); }).on('error', function() {
} alert('Failed to load KML');
}); });
}
</script> </script>
</head>
<body onload="initMap()">
<div id="map"></div>
</body> </body>
</html> </html>