leaflet maps working

rowers/interactiveplots.py

@@ -686,6 +686,65 @@ def interactive_histoall(theworkouts):
     script, div = components(plot)
     return [script,div]
 
+def leaflet_chart(lat,lon,name=""):
+    if lat.empty or lon.empty:
+        return [0,"invalid coordinate data"]
+
+    latmean = lat.mean()
+    lonmean = lon.mean()
+    latbegin = lat[lat.index[0]]
+    longbegin = lon[lon.index[0]]
+    latend = lat[lat.index[-1]]
+    longend = lon[lon.index[-1]]
+
+    coordinates = zip(lat,lon)
+
+    scoordinates = "["
+
+    for x,y in coordinates:
+        scoordinates += """[{x},{y}],
+        """.format(
+            x=x,
+            y=y
+            )
+
+    scoordinates += "]"
+    
+    script = """
+    <script>
+      
+    var mymap = L.map('map_canvas').setView([{latmean},{lonmean}], 13);
+      
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{{id}}/{{z}}/{{x}}/{{y}}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {{
+		maxZoom: 18,
+		id: 'mapbox.streets'
+    }}).addTo(mymap);
+
+    var marker = L.marker([{latbegin}, {longbegin}]).addTo(mymap);
+    marker.bindPopup("<b>Start</b>");
+    var emarker = new L.marker([{latend}, {longend}]).addTo(mymap);
+    emarker.bindPopup("<b>End</b>");
+      
+    var latlongs = {scoordinates}
+    var polyline = L.polyline(latlongs, {{color:'red'}}).addTo(mymap)
+    mymap.fitBounds(polyline.getBounds())
+
+    </script>
+      """.format(
+          latmean=latmean,
+          lonmean=lonmean,
+          latbegin = latbegin,
+          latend=latend,
+          longbegin=longbegin,
+          longend=longend,
+          scoordinates=scoordinates,
+          )
+
+    div = """
+    <div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>"""
+
+    return script,div
+
 def googlemap_chart(lat,lon,name=""):
     if lat.empty or lon.empty:
         return [0,"invalid coordinate data"]

rowers/templates/workout_form.html

@@ -225,36 +225,12 @@
       #map_canvas {position: relative; top: 0; right: 0; bottom: 0; left: 0;}
       
     </style>
-    <div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>
+
+
+    {{ mapdiv|safe }}
+
     
-     <script>
-      
-      var mymap = L.map('map_canvas').setView([{{ latmean }}, {{ longmean }}], 13);
-      
-      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FuZGVycm9vc2VuZGFhbCIsImEiOiJjajY3aTRkeWQwNmx6MzJvMTN3andlcnBlIn0.MFG8Xt0kDeSA9j7puZQ9hA', {
-		maxZoom: 18,
-		id: 'mapbox.streets'
-      }).addTo(mymap);
-
-      var marker = L.marker([{{ latbegin }}, {{ longbegin }}]).addTo(mymap);
-      marker.bindPopup("<b>Start</b>");
-      var emarker = L.marker([{{ latend }}, {{ longend }}]).addTo(mymap);
-      emarker.bindPopup("<b>End</b>");
-      var coordinates = {{ coordinates|safe }};
-
-
-      var latlongs = [];
-      
-      coordinates.forEach(function(entry){
-        var xy = [entry.x,entry,y];
-        latlongs.push(xy);
-      });
-
-      var line = L.PolyLine(latlongs, {color: 'blue'}).addTo(mymap);      
-      mymap.fitBounds(line.getBounds());
-
-    </script>
-   
+    {{ mapscript|safe }}
 
     </div>
   </div>

rowers/views.py

@@ -6220,36 +6220,19 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
 
 
     if hascoordinates:
+        mapscript,mapdiv = leaflet_chart(rowdata.df[' latitude'],
+                                         rowdata.df[' longitude'],
+                                         row.name)
+                                        
         #res = googlemap_chart(rowdata.df[' latitude'],
         #                      rowdata.df[' longitude'],
         #                      row.name)
         #gmscript = res[0]
         #gmdiv = res[1]
-        latmean = rowdata.df[' latitude'].mean()
-        longmean = rowdata.df[' longitude'].mean()
-        latbegin = rowdata.df[' latitude'][rowdata.df.index[0]]
-        latend = rowdata.df[' latitude'][rowdata.df.index[-1]]
-        longbegin = rowdata.df[' longitude'][rowdata.df.index[0]]
-        longend = rowdata.df[' longitude'][rowdata.df.index[1]]
-        coordinates = pd.DataFrame({
-            'x':rowdata.df[' latitude'].values,
-            'y':rowdata.df[' longitude'].values,
-                           }).to_json()
 
     else:
-        latmean = 51.505
-        longmean = -0.09
-        latbegin = 0
-        latend = 0 
-        longbegin = 0
-        longend = 0
-        coordinates = pd.DataFrame({
-            'x':[0,0],
-            'y':[0,0]
-                           }).to_json()
-
-        #gmscript = ""
-        #gmdiv = ""
+        mapscript = ""
+        mapdiv = ""
 
 
     # render page
@@ -6259,11 +6242,8 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
                        'workout':row,
                        'teams':get_my_teams(request.user),
                        'graphs1':g[0:3],
-                       'latmean':latmean,
-                       'longmean':longmean,
-                       'latbegin':latbegin,
-                       'longbegin':longbegin,
-                       'coordinates':coordinates,
+                       'mapscript':mapscript,
+                       'mapdiv':mapdiv,
                        })
 
     else:
@@ -6273,11 +6253,8 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
                        'workout':row,
                        'graphs1':g[0:3],
                        'graphs2':g[3:6],
-                       'latmean':latmean,
-                       'longmean':longmean,
-                       'latbegin':latbegin,
-                       'longbegin':longbegin,
-                       'coordinates':coordinates,
+                       'mapscript':mapscript,
+                       'mapdiv':mapdiv,
                        })