58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Radar application</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<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-src.js"></script>
|
||
|
|
<link rel="stylesheet" href="src/leaflet-radar.css"></script>
|
||
|
|
<script src="src/leaflet-radar.js"></script>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-body-secondary">
|
||
|
|
<div class="p-3 container">
|
||
|
|
<h1>Radar application</h1>
|
||
|
|
<p>A simple radar application in HTML</p>
|
||
|
|
<div class="border rounded mb-3" style="height: 500px;" id="map"></div>
|
||
|
|
</div>
|
||
|
|
<footer class="py-3 my-4 border rounded container bg-body text-center">
|
||
|
|
<p><a href="https://git.ttnrtsite.me/SSP6904/radarmap">View source code</a></p>
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
// Set theme to the user's preferred color scheme
|
||
|
|
function updateTheme() {
|
||
|
|
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
|
||
|
|
"dark" :
|
||
|
|
"light";
|
||
|
|
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set theme on load
|
||
|
|
updateTheme()
|
||
|
|
|
||
|
|
// Update theme when the preferred scheme changes
|
||
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var map = L.map("map").setView([42.378836,-83.560764], 5);
|
||
|
|
|
||
|
|
var osmAttribution =
|
||
|
|
'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
|
||
|
|
var leafletRadarAttribution =
|
||
|
|
'<a href="https://github.com/rwev/leaflet-radar">Radar</a>';
|
||
|
|
|
||
|
|
L.tileLayer(
|
||
|
|
"https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png",
|
||
|
|
{
|
||
|
|
attribution: [
|
||
|
|
osmAttribution,
|
||
|
|
leafletRadarAttribution
|
||
|
|
].join(" | ")
|
||
|
|
}
|
||
|
|
).addTo(map);
|
||
|
|
L.control.radar({}).addTo(map);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|