| <!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> |
| </head> |
| <body> |
| <div style="width: 100vw; height: 100vh" id="map"></div> |
| <script type="text/javascript"> |
| |
| 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, ' ')); |
| } |
| |
| |
| const kmlUrl = getParameterByName('kml_url'); |
| |
| if (kmlUrl) { |
| |
| const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 }); |
| |
| |
| const osm = new L.TileLayer('http://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'); |
| map.addLayer(osm); |
| |
| |
| 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); |
| |
| |
| 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> |
|
|
