windelsis
Version:
`Windelsis` is a JavaScript library that visualizes weather data on interactive maps using Leaflet. It provides tools to render temperature, precipitation, and wind velocity layers, as well as utilities for grid-based weather data management.
81 lines (78 loc) • 4.03 kB
HTML
<html lang="en">
<head>
<title>Windelsis Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../src/css/windelsis.css" />
<link rel="shortcut icon" href="#">
</head>
<body class="dark-theme">
<div id="mapControls">
<div class="input-group">
<div class="checkbox-group">
<label for="randomData">
<input type="checkbox" id="randomData" class="input-style" checked>Random Data</input>
</label>
</div>
<button id="testRecreate" class="button-style">ReCreate</button><hr>
<button id="toggleUpdates" class="button-style">Pause Updates</button><hr>
<button id="testCurrent" class="button-style">Current Data</button><hr>
<button id="testForecast" class="button-style">Forecast Data</button><hr>
<button id="testForecastHour" class="button-style">Forecast Data Hourly</button><hr>
<!--
<label for="pointDistance">Point Distance:</label>
<input type="number" id="pointDistance" class="input-style" value="1" step="0.0625" />
<label for="mapAdjustment">Map Adjustment:</label>
<input type="number"
id="mapAdjustment"
class="input-style"
placeholder="Set map arrangement"
value="1"
step="1" />
-->
<div class="label-group">
<label for="forecastDate">Fetching Date:</label>
<input type="date"
id="forecastDate"
class="input-style"
min="2016-01-01"
step="1" />
<input type="number"
id="forecastTime"
class="input-style"
min="0"
placeholder="Set an hour (0-23)"
step="1" />
</div>
</div>
<hr class="separator">
<div class="input-group">
<button id="updateWindyParams" class="button-style">Update Windy Parameters</button>
<div class="label-group"><label for="maxVelocity">Max Velocity:</label>
<input type="number" class="input-style" id="maxVelocity" value="10" step="1" />
</div><div class="label-group"><label for="minVelocity">Min Velocity:</label>
<input type="number" class="input-style" id="minVelocity" value="0" step="1" />
</div><div class="label-group"><label for="velocityScale">Velocity Scale:</label>
<input type="number" class="input-style" id="velocityScale" value="0.005" step="0.01" />
</div><div class="label-group"><label for="particleAge">Particle Age:</label>
<input type="number" class="input-style" id="particleAge" value="90" step="10" />
</div><div class="label-group"><label for="lineWidth">Line Width:</label>
<input type="number" class="input-style" id="lineWidth" value="2.5" step="1" />
</div><div class="label-group"><label for="particleMultiplier">Particle Multiplier:</label>
<input type="number" class="input-style" id="particleMultiplier" value="0.00075" step="0.005" />
</div><div class="label-group"><label for="frameRate">Frame Rate:</label>
<input type="number" class="input-style" id="frameRate" value="20" step="1" /></div>
</div>
</div>
<div id="map"></div>
<!--leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!--windelsis-->
<link rel="stylesheet" href="../dist/windelsis.css" />
<script src="../dist/windelsis.js"></script>
<!--demo-->
<script type="module" src="./demo.js"></script>
</body>
</html>