Added notice for new map
This commit is contained in:
parent
2b62222edd
commit
3bb2003c08
@ -1,17 +0,0 @@
|
|||||||
pipeline:
|
|
||||||
build:
|
|
||||||
# Use the official jekyll build container
|
|
||||||
image: node
|
|
||||||
secrets: [ cbtoken, cbmail ]
|
|
||||||
commands:
|
|
||||||
# Avoid permission denied errors
|
|
||||||
- chmod -R a+w .
|
|
||||||
# Set up git in a working way
|
|
||||||
- git config --global --add safe.directory /woodpecker/src/git.ttnrtsite.me/SSP6904/radarmap.git/public
|
|
||||||
- git config --global user.email "$CBMAIL"
|
|
||||||
- git config --global user.name "CI Builder"
|
|
||||||
# clone and move the target repo
|
|
||||||
- git clone https://git.ttnrtsite.me/SSP6904/radarmap.git
|
|
||||||
- mv radarmap public
|
|
||||||
- chmod -R a+w .
|
|
||||||
- npx @getmeli/cli upload --url https://meli.ttnrtsite.me --site 38bcb4c8-43f3-4232-9389-7ab62a4238da --token b2dded6629cedc119113223ae0583280a24deda1104f78b8cb9586ff7fbc8728 public
|
|
@ -1,3 +1,7 @@
|
|||||||
# radarmap
|
# radarmap
|
||||||
|
|
||||||
A radar map in html
|
A radar map in html
|
||||||
|
|
||||||
|
> Notice!
|
||||||
|
>
|
||||||
|
> Please use the us map website, as it has the radar overlay on it!
|
56
index.html
56
index.html
@ -4,22 +4,7 @@
|
|||||||
<title>Radar application</title>
|
<title>Radar application</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">
|
<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>
|
<script>
|
||||||
// Set theme to the user's preferred color scheme
|
// Set theme to the user's preferred color scheme
|
||||||
function updateTheme() {
|
function updateTheme() {
|
||||||
@ -35,24 +20,29 @@ updateTheme()
|
|||||||
// Update theme when the preferred scheme changes
|
// Update theme when the preferred scheme changes
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript">
|
</head>
|
||||||
var map = L.map("map").setView([42.378836,-83.560764], 5);
|
<body>
|
||||||
|
<div class="p-2 container-fluid">
|
||||||
var osmAttribution =
|
<h1>Notice!</h1>
|
||||||
'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
|
<p>
|
||||||
var leafletRadarAttribution =
|
I have migrated the radar site to the us map site!
|
||||||
'<a href="https://github.com/rwev/leaflet-radar">Radar</a>';
|
<br>
|
||||||
|
Consider using that for the best experience!
|
||||||
L.tileLayer(
|
<br>
|
||||||
"https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png",
|
Thank you for understanding! 😉
|
||||||
{
|
</p>
|
||||||
attribution: [
|
<br>
|
||||||
osmAttribution,
|
<p class="fw-bold fst-italic text-primary">You will be redirected in <span id="timred"></span> to the website!</p>
|
||||||
leafletRadarAttribution
|
</div>
|
||||||
].join(" | ")
|
<script>
|
||||||
}
|
var count = 25;
|
||||||
).addTo(map);
|
setInterval(function(){
|
||||||
L.control.radar({}).addTo(map);
|
count--;
|
||||||
|
document.getElementById('timred').innerHTML = count;
|
||||||
|
if (count == 0) {
|
||||||
|
window.location = 'https://ssp6904.ttnrtsite.io/usmap/';
|
||||||
|
}
|
||||||
|
},1000);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,15 +0,0 @@
|
|||||||
.leaflet-radar {
|
|
||||||
|
|
||||||
/* from leaflet-control-layers */
|
|
||||||
border-radius: 5px;
|
|
||||||
background: #fff;
|
|
||||||
border: 2px solid rgba(0, 0, 0, 0.2);
|
|
||||||
background-clip: padding-box;
|
|
||||||
color: black;
|
|
||||||
padding: 5px;
|
|
||||||
height: 67.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-radar .leaflet-radar-timestamp {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
@ -1,229 +0,0 @@
|
|||||||
// TODO add refresh (reload time layers)
|
|
||||||
// TODO add buffer time to load layers where radar turned on
|
|
||||||
|
|
||||||
L.Control.Radar = L.Control.extend({
|
|
||||||
|
|
||||||
NEXRAD_URL: `https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0q.cgi`,
|
|
||||||
NEXRAD_LAYER: `nexrad-n0q-900913`,
|
|
||||||
|
|
||||||
isPaused: false,
|
|
||||||
timeLayerIndex: 0,
|
|
||||||
timeLayers: [],
|
|
||||||
|
|
||||||
options: {
|
|
||||||
position: `topright`,
|
|
||||||
opacity: 0.575,
|
|
||||||
zIndex: 200,
|
|
||||||
transitionMs: 750,
|
|
||||||
playHTML: `►`,
|
|
||||||
pauseHTML: `▐`,
|
|
||||||
},
|
|
||||||
|
|
||||||
onRemove: function () {
|
|
||||||
L.DomUtil.remove(this.container);
|
|
||||||
},
|
|
||||||
|
|
||||||
onAdd: function (map) {
|
|
||||||
this.map = map;
|
|
||||||
|
|
||||||
// setup control container
|
|
||||||
this.container = L.DomUtil.create(`div`, "leaflet-radar");
|
|
||||||
|
|
||||||
L.DomEvent.disableClickPropagation(this.container);
|
|
||||||
L.DomEvent.on(this.container, `control_container`, function (e) {
|
|
||||||
L.DomEvent.stopPropagation(e);
|
|
||||||
});
|
|
||||||
L.DomEvent.disableScrollPropagation(this.container);
|
|
||||||
|
|
||||||
// add control elements within container
|
|
||||||
checkbox_div = L.DomUtil.create(
|
|
||||||
`div`,
|
|
||||||
`leaflet-radar-toggle`,
|
|
||||||
this.container
|
|
||||||
);
|
|
||||||
|
|
||||||
this.checkbox = document.createElement(`input`);
|
|
||||||
this.checkbox.id = `leaflet-radar-toggle`;
|
|
||||||
this.checkbox.type = `checkbox`;
|
|
||||||
this.checkbox.checked = false;
|
|
||||||
this.checkbox.onclick = () => this.toggle();
|
|
||||||
|
|
||||||
checkbox_div.appendChild(this.checkbox);
|
|
||||||
|
|
||||||
let checkbox_label = document.createElement(`span`);
|
|
||||||
checkbox_label.innerText = `Radar`;
|
|
||||||
|
|
||||||
checkbox_div.appendChild(checkbox_label);
|
|
||||||
|
|
||||||
let slider_div = L.DomUtil.create(
|
|
||||||
`div`,
|
|
||||||
`leaflet-radar-slider`,
|
|
||||||
this.container
|
|
||||||
);
|
|
||||||
|
|
||||||
this.slider = document.createElement(`input`);
|
|
||||||
this.slider.id = `leaflet-radar-slider`;
|
|
||||||
this.slider.type = `range`;
|
|
||||||
this.slider.min = 0;
|
|
||||||
|
|
||||||
slider_div.appendChild(this.slider);
|
|
||||||
|
|
||||||
this.timestamp_div = L.DomUtil.create(
|
|
||||||
`div`,
|
|
||||||
`leaflet-radar-timestamp`,
|
|
||||||
this.container
|
|
||||||
);
|
|
||||||
|
|
||||||
this.setDisabled(true);
|
|
||||||
this.isPaused = true;
|
|
||||||
|
|
||||||
return this.container;
|
|
||||||
},
|
|
||||||
|
|
||||||
hideLayerByIndex: function (index) {
|
|
||||||
this.timeLayers[index].tileLayer.setOpacity(0);
|
|
||||||
this.timestamp_div.innerHTML = ``;
|
|
||||||
},
|
|
||||||
|
|
||||||
showLayerByIndex: function (index) {
|
|
||||||
this.timeLayers[index].tileLayer.setOpacity(
|
|
||||||
this.options.opacity
|
|
||||||
);
|
|
||||||
this.timestamp_div.innerHTML = this.timeLayers[index].timestamp;
|
|
||||||
},
|
|
||||||
|
|
||||||
setDisabled: function (disabled) {
|
|
||||||
this.slider.disabled = disabled;
|
|
||||||
this.timestamp_div.innerText = ``;
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle: function () {
|
|
||||||
if (!this.checkbox.checked) {
|
|
||||||
this.setDisabled(true);
|
|
||||||
this.removeLayers();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setDisabled(false);
|
|
||||||
|
|
||||||
this.timeLayers = this.generateLayers();
|
|
||||||
this.addLayers(this.timeLayers);
|
|
||||||
|
|
||||||
this.slider.max = `${this.timeLayers.length - 1}`;
|
|
||||||
|
|
||||||
this.timeLayerIndex = 0;
|
|
||||||
|
|
||||||
this.isPaused = false;
|
|
||||||
|
|
||||||
this.slider.oninput = () => {
|
|
||||||
|
|
||||||
this.hideLayerByIndex(this.timeLayerIndex);
|
|
||||||
this.timeLayerIndex = +this.slider.value;
|
|
||||||
this.showLayerByIndex(this.timeLayerIndex);
|
|
||||||
|
|
||||||
this.isPaused = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.setTransitionTimer();
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
setTransitionTimer: function () {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (this.isPaused) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.timeLayers.forEach(timeLayer => {
|
|
||||||
timeLayer.tileLayer.setOpacity(0);
|
|
||||||
timeLayer.tileLayer.addTo(this.map);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.checkbox.checked) {
|
|
||||||
|
|
||||||
this.hideLayerByIndex(this.timeLayerIndex);
|
|
||||||
this.incrementLayerIndex();
|
|
||||||
this.showLayerByIndex(this.timeLayerIndex);
|
|
||||||
|
|
||||||
this.slider.value = `${this.timeLayerIndex}`;
|
|
||||||
|
|
||||||
this.setTransitionTimer();
|
|
||||||
} else {
|
|
||||||
this.setDisabled(true);
|
|
||||||
this.removeLayers();
|
|
||||||
}
|
|
||||||
}, this.options.transitionMs);
|
|
||||||
},
|
|
||||||
|
|
||||||
incrementLayerIndex: function () {
|
|
||||||
this.timeLayerIndex++;
|
|
||||||
if (this.timeLayerIndex > this.timeLayers.length - 1) {
|
|
||||||
this.timeLayerIndex = 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
addLayers: function () {
|
|
||||||
this.timeLayers.forEach(timeLayer => {
|
|
||||||
timeLayer.tileLayer.setOpacity(0);
|
|
||||||
timeLayer.tileLayer.addTo(this.map);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
removeLayers: function () {
|
|
||||||
this.timeLayers.forEach(timeLayer =>
|
|
||||||
timeLayer.tileLayer.removeFrom(this.map)
|
|
||||||
);
|
|
||||||
this.timeLayers = [];
|
|
||||||
this.timeLayerIndex = 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
generateLayers: function () {
|
|
||||||
let timeLayers = [];
|
|
||||||
|
|
||||||
const TOTAL_INTERVALS = 10;
|
|
||||||
const INTERVAL_LENGTH_HRS = 5;
|
|
||||||
|
|
||||||
const currentTime = new Date();
|
|
||||||
|
|
||||||
for (let i = 0; i <= TOTAL_INTERVALS; i++) {
|
|
||||||
|
|
||||||
const timeDiffMins =
|
|
||||||
TOTAL_INTERVALS * INTERVAL_LENGTH_HRS -
|
|
||||||
INTERVAL_LENGTH_HRS * i;
|
|
||||||
|
|
||||||
const suffix = (function(time) {
|
|
||||||
switch(time) {
|
|
||||||
case 0:
|
|
||||||
return '';
|
|
||||||
case 5:
|
|
||||||
return '-m05m';
|
|
||||||
default:
|
|
||||||
return '-m' + time + 'm';
|
|
||||||
}
|
|
||||||
})(timeDiffMins);
|
|
||||||
|
|
||||||
const layerRequest = this.NEXRAD_LAYER + suffix;
|
|
||||||
|
|
||||||
const layer = L.tileLayer.wms(this.NEXRAD_URL, {
|
|
||||||
layers: layerRequest,
|
|
||||||
format: `image/png`,
|
|
||||||
transparent: true,
|
|
||||||
opacity: this.options.opacity,
|
|
||||||
zIndex: this.options.zIndex
|
|
||||||
});
|
|
||||||
|
|
||||||
const timeString = new Date(
|
|
||||||
currentTime.valueOf() - timeDiffMins * 60 * 1000
|
|
||||||
).toLocaleTimeString();
|
|
||||||
timeLayers.push({
|
|
||||||
timestamp: `${timeString} (-${timeDiffMins} min)`,
|
|
||||||
tileLayer: layer
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return timeLayers;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
L.control.radar = function (options) {
|
|
||||||
return new L.Control.Radar(options);
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user