Make the website actually useful

- coordinates are no longer hardcoded
- form submission works with and without javascript
This commit is contained in:
Thomas Kolb 2023-11-14 22:07:47 +01:00
parent f6d3536200
commit 9fbf437731
3 changed files with 24 additions and 12 deletions

View file

@ -1,7 +1,16 @@
function update_map() function update_map(event)
{ {
event.preventDefault();
var lat = document.getElementById('lat').value;
var lon = document.getElementById('lon').value;
request_url = new URL("/render/map.svg", document.URL);
request_url.searchParams.append("lat", lat);
request_url.searchParams.append("lon", lon);
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open("GET","/render/45/11.svg"); request.open("GET", request_url);
request.addEventListener('load', function(event) { request.addEventListener('load', function(event) {
if (request.status >= 200 && request.status < 300) { if (request.status >= 200 && request.status < 300) {

View file

@ -14,8 +14,8 @@
<h1>QSOMap: Azimuthal-equidistant SVG map generator</h1> <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>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>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> <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>
<form action="#" onsubmit="update_map();"> <form action="/render/map.svg" onsubmit="update_map(event);">
<label for="lat">Map center latitude:</label> <label for="lat">Map center latitude:</label>
<input type="text" id="lat" name="lat" value="49.585"><br> <input type="text" id="lat" name="lat" value="49.585"><br>
<label for="lon">Map center longitude:</label> <label for="lon">Map center longitude:</label>

19
web.py
View file

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