stoat/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
John Peck
2025-11-27 22:25:36 +00:00
commit c1667681e7
117 changed files with 91960 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
map.html Normal file
View File

@@ -0,0 +1,339 @@
<!DOCTYPE html>
<html>
<head>
<title>RLX Weather Camera Map</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body>
<style type="text/css">
/* #mapid { height: 800px; } */
body {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
#mapid {
height: calc(100% - 40px);
}
#bottombar {
height: 40px;
display: flex;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f8f8f8;
border-top: 1px solid #ccc;
padding: 0 10px;
z-index: 1000;
}
input[type=number] {
width: 50px;
}
input[type=text] {
width: 150px;
}
</style>
<div id="mapid">
</div>
<div id="bottombar">
<a href="cams.html" class="w3-button w3-black">Cam List</a>
<a href="admin.html" class="w3-button w3-black">Add Camera</a>
<a href="db.html" class="w3-button w3-black">WU obs</a>
<a href="5min.html" class="w3-button w3-black">5m ASOS obs</a>
<a href="outage.html" class="w3-button w3-black">Power Outages</a>
<a href="today.txt" class="w3-button w3-black">CoCoRaHS Remarks</a>
<a href="https://docs.google.com/forms/d/1-2rTBkNyyBVe08G1vN1hcSOEOvvLUcS1Vs2SmmaudlU" class="w3-button w3-black" target="_blank">Questions? Comments?</a>
<label for="numberofimages">Number of Frames for Loop</label>
<input type="number" id="numberofimages" name="numberofimages" onchange="setcams()">
</div>
<script>
var mymap = L.map('mapid').setView([38.332372, -81.652480], 8);
// Get the saved value from cookie, default to 20 if not found
var camimages = getCookie('camimages') || 20;
// Set the initial value of the input field
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('numberofimages').value = camimages;
});
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri'
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
var Stadia_StamenToner = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.{ext}', {
minZoom: 0,
maxZoom: 20,
attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
ext: 'png'
});
var USGS_USImageryTopo = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 20,
attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
});
// Function to set baselayer cookie
function setBaseLayerCookie(layerName) {
setCookie('baselayer', layerName, 365);
}
// Function to get baselayer cookie
function getBaseLayerCookie() {
return getCookie('baselayer');
}
var baselayers = {
"Esri Street Map": Esri_WorldStreetMap,
"Esri Satellite": Esri_WorldImagery,
"Esri Topo": Esri_WorldTopoMap,
"USGS Sat/Topo": USGS_USImageryTopo
};
var layerControl = L.control.layers(baselayers, null, {collapsed: false}).addTo(mymap);
// Get saved baselayer from cookie and set it
var savedBaseLayer = getBaseLayerCookie();
if (savedBaseLayer && baselayers[savedBaseLayer]) {
baselayers[savedBaseLayer].addTo(mymap);
} else {
// Default to Esri Street Map if no cookie found
Esri_WorldStreetMap.addTo(mymap);
setBaseLayerCookie("Esri Street Map");
}
// Listen for baselayer changes and save to cookie
mymap.on('baselayerchange', function(e) {
// Find the layer name from the baselayers object
for (var layerName in baselayers) {
if (baselayers[layerName] === e.layer) {
setBaseLayerCookie(layerName);
break;
}
}
});
function archive () {
archive = document.getElementById("archive").value;
archive=archive.trim().replace(/ /g, '%20');
}
// Function to set a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Function to get a cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function setcams() {
camimages = document.getElementById("numberofimages").value;
// Save the value to a cookie that expires in 365 days
setCookie('camimages', camimages, 365);
}
var counties = 'counties.json'
var exteriorStyle = {
"color": "#000000",
"weight": 1,
"fillOpacity": 0
};
fetch(
counties
).then(
res => res.json()
).then(
data => L.geoJSON(data, {style: exteriorStyle}).addTo(mymap)
)
var LeafIcon = L.Icon.extend({
options: {
iconSize: [40, 25],
shadowSize: [50, 64],
iconAnchor: [0, 0],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76],
className: 'cams'
}
});
camlayer = L.layerGroup();
$.getJSON('cam.php', function(data){
var wild = Math.random();
for(var i in data){
//var greenIcon = new LeafIcon({iconUrl: 'camdata/' + data[i].lastimage})
var greenIcon = new LeafIcon({iconUrl: 'camdata/' + data[i].camid + "/latest.jpg"}) // Use thumbnail instead of full image
//window['camsite'+data[i].camid] = L.marker([data[i].lat, data[i].lon], {icon: greenIcon}).on('click',onMarkerClick(data[i].camid)).on('mouseover',onMarkerHover(data[i].camid)).on('mouseout',onMarkerNotHover(data[i].camid)).addTo(mymap);
window['camsite'+data[i].camid] = L.marker([data[i].lat, data[i].lon], {icon: greenIcon}).on('click',onMarkerClick(data[i].camid)).addTo(mymap);
}
});
function onMarkerClick(itemsID){
return function(ev) {
window.open('one.php?camid=' + itemsID + '&camimages='+camimages,"name=_blank")
}
}
function onMarkerHover(itemsID){
return function(ev) {
console.log(itemsID);
}
}
function onMarkerNotHover(itemsID){
return function(ev) {
console.log(itemsID);
}
}
function updateIcon() {
var wild = Math.random();
$.getJSON('cam.php', function(data){
for(var i in data){
//var greenIcon = new LeafIcon({iconUrl: 'camdata/' + data[i].lastimage});
var greenIcon = new LeafIcon({iconUrl: 'camdata/' + data[i].camid + "/latest.jpg"})
//window['camsite'+data[i].camid] = L.marker([data[i].lat, data[i].lon], {icon: greenIcon}).on('click',onMarkerClick(data[i].camid)).addTo(mymap);
window['camsite'+data[i].camid].setIcon(greenIcon);
}
var currentZoom = mymap.getZoom();
if (currentZoom < 15) {
var zoomfactor = currentZoom*currentZoom/2;
var hnewzoom = '' + (zoomfactor) +'px';
var vnewzoom = '' + (zoomfactor*.70) +'px';
} else {
hnewzoom = '300px';
vnewzoom = '200px';
}
$('#mapid .cams').css({'width':hnewzoom,'height':vnewzoom});
});
}
window.setInterval(function(){
updateIcon()
}, 360000);
mymap.on('zoomend', function() {
var currentZoom = mymap.getZoom();
if (currentZoom < 15) {
var zoomfactor = currentZoom*currentZoom/2;
var hnewzoom = '' + (zoomfactor) +'px';
var vnewzoom = '' + (zoomfactor*.70) +'px';
} else {
hnewzoom = '300px';
vnewzoom = '200px';
}
$('#mapid .cams').css({'width':hnewzoom,'height':vnewzoom});
});
</script>
</body>
</html>