api_app.py

@@ -122,7 +122,31 @@ def index():
 
 @api_app.route('/map')
 def map():
-    return render_template('map.html')
+
+    # Get the default list of frames from the API
+    frames = json.loads(requests.get(config['Settings']['base_url']+"/packets").text)['data']
+
+    # Make markers for all the frames
+    id_counter = 0
+    markers = ''
+    for frame in frames:
+        if frame['latitude'] != None:
+            # Create unique ID for each marker
+            idd = 'frame' + str(id_counter)
+            id_counter += 1
+
+            # Create the marker and its pop-up for each shop
+            markers += "var {idd} = L.marker([{latitude}, {longitude}]);\
+                        {idd}.addTo(map).bindPopup('{from_ssid}');".format(idd=idd, latitude=frame['latitude'],\
+                                                                                    longitude=frame['longitude'],
+                                                                                    from_ssid=frame['from'],
+                                                                                    created=frame['created'])
+
+
+    return render_template('map.html',
+                           station_lat = config['Settings']['station_lat'],
+                           station_lon = config['Settings']['station_lon'],
+                           markers = markers)
 
 class Packets(Resource):
     def get(self):

templates/map.html

@@ -16,8 +16,11 @@
     <div id="map"></div>
 
     <script>
-        var map = L.map('map').setView([51.505, -0.09], 13);
+        var map = L.map('map').setView([{{station_lat}}, {{station_lon}}], 10);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'}).addTo(map);
+
+        {{markers|safe}}
+
     </script>
 </body>
 </html>