Generate map from json

wetter/templates/dyn/stations.js

@@ -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 %}

wetter/templates/index.html

@@ -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 %}

wetter/templates/station.html

@@ -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 %}

wetter/views.py

@@ -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')
+@app.route('/api/station')
-def dyn_stations_js():
+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))
+    out = []
-    r.headers['Content-Type'] = 'application/javascript; charset=utf-8'
+    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)