qsomap/views/index.tpl

43 lines
2.3 KiB
Smarty

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Azimuthal-equidistant map generator.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QSOMap: Azimuthal-equidistant SVG map generator</title>
<link rel="stylesheet" href="static/style.css">
<script defer src="static/map.js" type="text/javascript"></script>
</head>
<body>
<h1>QSOMap: Azimuthal-equidistant SVG map generator</h1>
<p>Here you can generate a map in <a href="https://en.wikipedia.org/wiki/Azimuthal_equidistant_projection">azimuthal-equidistant projection</a> for any point on Earth. You get a map where the specified coordinate is in the center, and all other locations are projected such that locations with the same physical distance from the given coordinate are also the same distance from the center on the map.</p>
<p>You can optionally upload an ADIF file. All QSOs that have a QTH locator attached are then marked on the map.</p>
<p>The generated output is a Scalable Vector Graphics (SVG) image that can be edited as needed. I recommend <a href="https://inkscape.org">Inkscape</a> as an SVG editor.</p>
<p><strong>Data volume warning:</strong> Each generated map will be about 25 MiB (11-15 MiB with automatic gzip compression). Take that into account if you have limited data volume.</p>
<p><strong>Please note:</strong> It may take a few seconds to generate the map. Please give it some time. The map will appear below the form along with a download link. If you have JavaScript disabled, the map will replace this page.</p>
<div class="form">
<form id="mapinfo" action="/render/map.svg" onsubmit="update_map(event);">
<div>
<label for="lat">Map center latitude:</label>
<input type="text" id="lat" name="lat" value="49.585">
</div>
<div>
<label for="lon">Map center longitude:</label>
<input type="text" id="lon" name="lon" value="11.015">
</div>
<div>
<label for="adif">ADIF file (optional):</label>
<input type="file" id="adif" name="adif">
</div>
<div>
<input type="submit" value="Generate!">
</div>
</form>
</div>
<div id="downloadlink">Download-Link will appear here.</div>
<div id="svgcontainer">Map will appear here.</div>
<p>This map generator was built by Thomas DL5TKL.</p>
</body>
</html>