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.
101 lines (98 loc) • 5.55 kB
HTML
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./test.css" />
<link rel="shortcut icon" href="#">
</head>
<body class="dark-theme">
<div id="map"></div>
<button id="toggleButton" class="button-style">show/hide controls</button>
<fieldset id="mapControls">
<legend> Map Controls </legend>
<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>
<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>
<hr class="separator">
<div class="input-group">
<div class="label-group"><label for="maxVelocity">Max Latitude:</label>
<input type="number" class="input-style" id="minLat" value="10" step="1" />
</div>
<div class="label-group"><label for="maxVelocity">Min Longitude:</label>
<input type="number" class="input-style" id="minLon" value="10" step="1" />
</div>
<div class="label-group"><label for="maxVelocity">Max Latitude:</label>
<input type="number" class="input-style" id="maxLat" value="10" step="1" />
</div>
<div class="label-group"><label for="maxVelocity">Max Longitude:</label>
<input type="number" class="input-style" id="maxLon" value="10" step="1" />
</div>
<button id="changeGridOptions" class="button-style">Update Grid Options</button>
</div>
<hr class="separator">
<div class="input-group">
<label for="pointDistance">Point Distance:</label>
<input type="number" id="pointDistance" class="input-style" min="0.01" step="0.01" placeholder="e.g. 0.2" />
<label for="pointDistance">Max Grid Points:</label>
<input type="number" id="maxGridPoints" class="input-style" step="100" placeholder="e.g. 600" />
<label for="boundsLat1">Bounds Lat1 / Lng1:</label>
<input type="number" id="boundsLat1" class="input-style" step="0.01" placeholder="Lat1" />
<input type="number" id="boundsLng1" class="input-style" step="0.01" placeholder="Lng1" />
<label for="boundsLat2">Bounds Lat2 / Lng2:</label>
<input type="number" id="boundsLat2" class="input-style" step="0.01" placeholder="Lat2" />
<input type="number" id="boundsLng2" class="input-style" step="0.01" placeholder="Lng2" />
<button id="applyConfig" class="button-style">Apply</button>
</div>
</fieldset>
<!--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-->
<script src="../dist/windelsis.js"></script>
<!--demo-->
<script type="module" src="./test.js"></script>
</body>
</html>