amateurfunk/qsomap
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Complete basic web implementation

Browse source
This commit is contained in:
Thomas Kolb 2023-11-13 22:58:46 +01:00
parent a93283d236
commit f6d3536200
3 changed files with 71 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
static/map.js Normal file
View file

@ -0,0 +1,30 @@
function update_map()
{
var request = new XMLHttpRequest();
request.open("GET","/render/45/11.svg");
request.addEventListener('load', function(event) {
if (request.status >= 200 && request.status < 300) {
var svgblob = new Blob([request.responseText], { type: "image/svg+xml" });
document.getElementById("svgcontainer").innerHTML = request.responseText;
link_container = document.getElementById("downloadlink");
link_container.innerHTML = '';
var blobUrl = URL.createObjectURL(svgblob);
var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blobUrl;
link.download = "map.svg";
link.innerHTML = "Download this map.";
link_container.appendChild(link); // Or append it whereever you want
URL.revokeObjectURL(blobUrl);
} else {
console.warn(request.statusText, request.responseText);
}
});
request.send();
}

28
views/index.tpl Normal file
View file

@ -0,0 +1,28 @@
<!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">
<link rel="me" href="https://chaos.social/@cfr34k">
<title>QSOMap: Azimuthal-equidistant SVG map generator</title>
<!--link rel="stylesheet" href="https://www.tkolb.de/main.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 azimuthal-equidistant projections 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>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>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.</p>
<form action="#" onsubmit="update_map();">
<label for="lat">Map center latitude:</label>
<input type="text" id="lat" name="lat" value="49.585"><br>
<label for="lon">Map center longitude:</label>
<input type="text" id="lon" name="lon" value="11.015"><br>
<input type="submit" value="Generate!">
</form>
<div id="downloadlink"></div>
<div id="svgcontainer"></div>
</body>
</html>

15
web.py
View file

@ -1,14 +1,25 @@
#!/usr/bin/env python3
from bottle import response, route, run, template
from bottle import response, route, run, template, static_file
from io import StringIO
import qsomap
@route('/render/<lat>/<lon>')
@route('/render/<lat>/<lon>.svg')
def render(lat, lon):
svg_stream = StringIO()
qsomap.render(float(lat), float(lon), svg_stream, None)
response.content_type = 'image/svg+xml'
return svg_stream.getvalue()
@route('/')
@route('/index.html')
def index():
return template('index')
@route('/static/<filename:path>')
def send_static(filename):
return static_file(filename, root='./static')
run(host='localhost', port=8080)