File size: 2,561 Bytes
5262418 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html>
<html>
<head>
<title>Dynamic KML Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="./L.KML.js"></script> <!-- Make sure this file is in the repo -->
</head>
<body>
<div style="width: 100vw; height: 100vh" id="map"></div>
<script type="text/javascript">
// Helper function to get URL parameters
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// Get the KML URL from the URL parameter
const kmlUrl = getParameterByName('kml_url');
if (kmlUrl) {
// Initialize map
const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 });
//const osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//const osm = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
const osm = new L.TileLayer('http://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}');
map.addLayer(osm);
// Load the KML file from the given URL
fetch(kmlUrl)
.then(res => res.text())
.then(kmltext => {
const parser = new DOMParser();
const kml = parser.parseFromString(kmltext, 'text/xml');
const track = new L.KML(kml);
map.addLayer(track);
// Adjust map to show the KML
const bounds = track.getBounds();
map.fitBounds(bounds);
})
.catch(error => {
console.error('Error loading KML:', error);
alert('Failed to load KML file. Please check the URL.');
});
} else {
alert('No KML URL provided. Please use the "kml_url" parameter in the URL.');
}
</script>
</body>
</html>
|