340 lines
9.2 KiB
HTML
340 lines
9.2 KiB
HTML
<!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 © Esri'
|
|
});
|
|
|
|
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri — 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 © Esri — 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <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>
|