Generate map from json

This commit is contained in:
clerie 2020-04-07 14:03:49 +02:00
parent bd0ecbafb1
commit 0309bb0a65
4 changed files with 33 additions and 14 deletions

View File

@ -1,3 +0,0 @@
{% for station in stations %}
L.marker([{{ station.lat }}, {{ station.lon }}]).addTo(mymap).bindPopup("<b>{{ station.name }}</b><br><a href=\"/station/{{ station.dwd_id }}/\">Mehr</a>");
{% endfor %}

View File

@ -30,7 +30,7 @@
{% block foot %}
<script src="/static/leaflet-1.6.0/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([52, 10], 6);
mymap = L.map('mapid').setView([52, 10], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
@ -41,6 +41,14 @@
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
$.getJSON("/api/station", (stations) => {
if(stations.length == 1) {
mymap.setView([stations[0]["lat"], stations[0]["lon"]], 6);
}
stations.forEach((station, i, j) => {
L.marker([station["lat"], station["lon"]]).addTo(mymap).bindPopup("<h3>" + station["name"] + "</h3><a href=\"/station/" + station["dwd_id"] + "/\" class=\"btn btn-primary\">Mehr</a>");
})
});
</script>
<script src="/dyn/stations.js"></script>
{% endblock %}

View File

@ -56,7 +56,7 @@
{% block foot %}
<script src="/static/leaflet-1.6.0/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([52, 10], 6);
mymap = L.map('mapid').setView([52, 10], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
@ -67,6 +67,14 @@
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
$.getJSON("/api/station?s={{ station.dwd_id }}", (stations) => {
if(stations.length == 1) {
mymap.setView([stations[0]["lat"], stations[0]["lon"]], 6);
}
stations.forEach((station, i, j) => {
L.marker([station["lat"], station["lon"]]).addTo(mymap).bindPopup("<h3>" + station["name"] + "</h3><a href=\"/station/" + station["dwd_id"] + "/\" class=\"btn btn-primary\">Mehr</a>");
})
});
</script>
<script src="/dyn/stations.js?s={{ station.dwd_id }}"></script>
{% endblock %}

View File

@ -3,7 +3,7 @@
from wetter import app
from wetter.models import Stations, Climate
from wetter.utils import fromisoformat
from flask import request, make_response, render_template
from flask import request, make_response, render_template, jsonify
from datetime import datetime
@app.route('/')
@ -69,17 +69,23 @@ def export_target_dwd_txt_render(dwd_id):
return r
@app.route('/dyn/stations.js')
def dyn_stations_js():
@app.route('/api/station')
def api_station():
s = request.args.get('s')
if s:
station = Stations.query.filter_by(dwd_id=s).first_or_404()
stations = [station]
else:
stations = Stations.query.order_by(Stations.dwd_id.asc()).all()
stations = Stations.query.order_by(Stations.lon.asc()).order_by(Stations.lat.desc()).all()
r = make_response(render_template('dyn/stations.js', stations=stations))
r.headers['Content-Type'] = 'application/javascript; charset=utf-8'
out = []
for s in stations:
out.append({
"name": s.name,
"lat": s.lat,
"lon": s.lon,
"dwd_id": s.dwd_id,
})
return r
return jsonify(out)