125 lines
7.7 KiB
HTML
125 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/x-icon" href="././static/bicycle-solid.svg" />
|
|
<title>Freewheeling</title>
|
|
</head>
|
|
<body>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
<h1 id="freewheeling-header">Freewheeling</h1>
|
|
<div id="notloadedcontainer">
|
|
<p>
|
|
This web page allows you to calculate how far you can roll on a bicycle without using the pedals. It uses road data for
|
|
all of Norway, downloaded from <a href="https://kartkatalog.geonorge.no/metadata/elveg-20/77944f7e-3d75-4f6d-ae04-c528cc72e8f6">Kartkatalogen at Geonorge</a>.
|
|
Since I don't have a very powerful server, all calculations are done locally in your browser.
|
|
</p>
|
|
<p>
|
|
These calculations require a data file containing road data for Norway. Since this is a large data file (of about
|
|
700 MB), this file is not downloaded automatically when the page is loaded. Instead, it can be manually downloaded from
|
|
<a href="./roads.dat">here.</a> Once the file is downloaded, use the file browser below to provide it to the web page.
|
|
Note that this does not upload the file anywhere, it just tells the browser to load this file.
|
|
</p>
|
|
<label for="data-file-chooser">File containing road data: </label><input id="data-file-chooser" type="file" />
|
|
</div>
|
|
<div id="loadingcontainer">
|
|
<p>Loading data...</p>
|
|
<p>This might take a few seconds.</p>
|
|
</div>
|
|
<div id="mapcontainer">
|
|
<div id="map"></div>
|
|
<br />
|
|
<button id="search-button">Start search</button>
|
|
<button id="export-route-button">Export KML route</button>
|
|
<br />
|
|
<label for="reverse-search-input">Reverse search:</label><input type="checkbox" id="reverse-search-input" />
|
|
<br />
|
|
<p id="search-status-paragraph"></p>
|
|
<table id="search-result-table" style="display: none;">
|
|
<thead>
|
|
<tr>
|
|
<th>Distance</th><th class="hidable">Latitude</th><th class="hidable">Longitude</th><th>Show in map</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="search-result-table-body">
|
|
</tbody>
|
|
</table>
|
|
<br />
|
|
<button id="settings-button">Settings</button>
|
|
<div id="settings-div" style="display: none;">
|
|
<div class="settings-line">
|
|
<label for="minimum-speed-input">Minimum speed (km/h):</label><input id="minimum-speed-input" type="number" min="0" step="1" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="maximum-speed-input">Maximum speed (km/h):</label><input id="maximum-speed-input" type="number" min="0" step="1" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="maximum-speed-limit-input">Maximum speed of road (km/h):</label><input id="maximum-speed-limit-input" type="number" min="0" step="10" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="allow-motorways-input">Allow motorways:</label><input id="allow-motorways-input" type="checkbox" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="allow-tunnels-input">Allow tunnels:</label><input id="allow-tunnels-input" type="checkbox" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="allow-wrong-way-input">Allow going the wrong way down one-way roads:</label><input id="allow-wrong-way-input" type="checkbox" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="limit-corner-speed-input">Limit speed on sharp corners</label><input id="limit-corner-speed-input" type="checkbox" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="drag-coefficient-input">Drag coeffient (0.005 is a good default):</label><input id="drag-coefficient-input" type="number" min="0" step="0.001" />
|
|
</div>
|
|
<div class="settings-line">
|
|
<label for="cutoff-distance-input">Cut-off distance when searching (m):</label><input id="cutoff-distance-input" type="number" min="0" step="1000" />
|
|
</div>
|
|
</div>
|
|
<h2>Instructions:</h2>
|
|
<p>
|
|
Click anywhere on the map to calculate where it is possible to freewheel from that point. A set of possible
|
|
end points will then appear on the map. The farthest possible end point is shown with a red marker, while other possible
|
|
end points are shown as purple circles. Click an endpoint to see the calculated route that leads from the start point
|
|
to the end point.
|
|
</p>
|
|
<p>
|
|
It is also possible to reverse the search, to find the farthest start point from a given end point. When this is done,
|
|
farthest possible start point is shown in green, and other candidate start points are shown in orange. Due to the way the
|
|
reverse search works, many starting points will require you to start near the top speed (as opposed to normal search, where
|
|
you are always assumed to start at the minimum speed).
|
|
</p>
|
|
<p>
|
|
It is possible to mark areas on the map you would like to avoid. Click the "Draw areas that should not be
|
|
entered" button at the top left of the map. It is marked with this icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --> <path d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>.
|
|
Any routes calculated will then avoid the areas drawn.
|
|
</p>
|
|
<p>
|
|
It is also possible to search for the longest path that starts within an area. In order to do that, click the
|
|
"Define the search area for the longest route" button with the icon <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path d="M128 32l32 0c17.7 0 32 14.3 32 32l0 32L96 96l0-32c0-17.7 14.3-32 32-32zm64 96l0 320c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32l0-59.1c0-34.6 9.4-68.6 27.2-98.3C40.9 267.8 49.7 242.4 53 216L60.5 156c2-16 15.6-28 31.8-28l99.8 0zm227.8 0c16.1 0 29.8 12 31.8 28L459 216c3.3 26.4 12.1 51.8 25.8 74.6c17.8 29.7 27.2 63.7 27.2 98.3l0 59.1c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-320 99.8 0zM320 64c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 32-96 0 0-32zm-32 64l0 160-64 0 0-160 64 0z"/></svg>
|
|
at the top left of the map. After you've drawn the search area on the map, click the "Start search" button.
|
|
A table will show a running tally of the longest routes found.
|
|
</p>
|
|
<p>The source code for this web site can be found <a href="https://gitea.martinserver.no/martin/Freewheeling">here.</a></p>
|
|
|
|
<h2>Attributions:</h2>
|
|
<p>
|
|
This library uses the <a href="https://leafletjs.com/">leaflet</a> library, which is licensed under the
|
|
<a href="https://opensource.org/license/bsd-2-clause">2-clause BSD license</a>. It also uses
|
|
the <a href="https://geoman.io/docs/leaflet/">leaflet-geoman-free</a>, <a href="https://github.com/giraugh/hue-map">hue-map</a>, and
|
|
<a href="http://proj4js.org/">proj4</a> libraries, which are licensed under the
|
|
<a href="https://opensource.org/license/mit">MIT license</a>.
|
|
</p>
|
|
<p>
|
|
The icons used for creating and deleting map areas, as well as the favicon for the webiste, are copied, unaltered, from
|
|
<a href="https://fontawesome.com">Font Awesome</a>, and are licensed under the
|
|
<a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a>
|
|
license. The colored map markers are from the
|
|
<a href="https://github.com/pointhi/leaflet-color-markers">leaflet-color-markers</a> library, and are
|
|
licensed under the <a href="https://opensource.org/license/bsd-2-clause">2-clause BSD license</a>.
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|