first working prototype

rowers/interactiveplots.py

@@ -2054,10 +2054,12 @@ def leaflet_chart_compare(course,workoutids,labeldict={},startenddict={}):
     for id in workoutids:
         w = Workout.objects.get(id=id)
         rowdata = rdata(w.csvfilename)
+        time = rowdata.df['TimeStamp (sec)']
         df = pd.DataFrame({
-            'id':id,
+            'workoutid':id,
             'lat':rowdata.df[' latitude'],
-            'lon':rowdata.df[' longitude']
+            'lon':rowdata.df[' longitude'],
+            'time':time-time[0],
         })
         data.append(df)
 
@@ -2072,15 +2074,24 @@ def leaflet_chart_compare(course,workoutids,labeldict={},startenddict={}):
     df = df.loc[(df!=0).any(axis=1)]
     df.fillna(method='bfill',axis=0,inplace=True)
     df.fillna(method='ffill',axis=0,inplace=True)
+
+
+
     lat = df['lat']
     lon = df['lon']
     if lat.empty or lon.empty:
         return [0,"invalid coordinate data"]
 
-    latbegin = lat[lat.index[0]]
-    longbegin = lon[lon.index[0]]
-    latend = lat[lat.index[-1]]
-    longend = lon[lon.index[-1]]
+    latbegin = lat.values[0]
+    longbegin = lon.values[0]
+    latend = lat.values[-1]
+    longend = lon.values[-1]
+
+    colors = itertools.cycle(palette)
+    try:
+        items = itertools.izip(workoutids,colors)
+    except AttributeError:
+        items = zip(workoutids,colors)
 
     coordinates = zip(lat,lon)
 
@@ -2166,16 +2177,8 @@ def leaflet_chart_compare(course,workoutids,labeldict={},startenddict={}):
         "Navionics":navionics,
     }}).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,
@@ -2186,6 +2189,51 @@ def leaflet_chart_compare(course,workoutids,labeldict={},startenddict={}):
           scoordinates=scoordinates,
           )
 
+    for id,color in items:
+        group = df[df['workoutid']==int(id)].copy()
+        try:
+            startsecond,endsecond = startenddict[id]
+        except KeyError:
+            startsecond = 0
+            endsecond = 0
+
+        group.sort_values(by='time',ascending=True,inplace=True)
+        group.dropna(axis=0,how='any',inplace=True)
+        if endsecond > 0:
+            group['time'] = group['time'] - startsecond
+            mask = group['time'] < 0
+            group.mask(mask,inplace=True)
+            mask = group['time'] > (endsecond-startsecond)
+            group.mask(mask,inplace=True)
+
+        lat = group['lat'].dropna()
+        lon = group['lon'].dropna()
+
+        coordinates = zip(lat,lon)
+
+        scoordinates = "["
+        for x,y in coordinates:
+            scoordinates += """[{x},{y}],
+            """.format(x=x,y=y)
+        scoordinates += "]"
+
+        script += """
+        var latlongs = {scoordinates}
+        var polyline = L.polyline(latlongs, {{color:'{color}'}}).addTo(mymap)
+        mymap.fitBounds(polyline.getBounds())
+        """.format(
+            scoordinates=scoordinates,
+            color=color,
+        )
+
+    script += """
+
+        </script>
+        """
+
+
+
+
     div = """
     <div id="map_canvas" style="width: 100%; height: 100%; min-height: 100vh"><p>&nbsp;</p></div>
     """

rowers/templates/mapcompare.html

@@ -1,6 +1,12 @@
 {% extends "newbase.html" %}
 {% load staticfiles %}
 {% load rowerfilters %}
+{% load leaflet_tags %}
+
+{% block meta %}
+{% leaflet_js %}
+{% leaflet_css %}
+{% endblock %}
 
 {% block title %}View Comparison {% endblock %}
 
@@ -11,32 +17,15 @@
   Bokeh.set_log_level("info");
 </script>
 
-{{ interactiveplot |safe }}
-
 <h1>Interactive Comparison</h1>
 
 
-<ul class="main-content">
-  <li class="grid_4">
-    <div>
-      {{ the_div|safe }}
+
+    <div class="mapdiv">
+      {{ mapdiv|safe }}
+      {{ mapscript|safe }}
     </div>
 
-  </li>
-  <li class="grid_4">
-    <form enctype="multipart/form-data" action="" method="post">
-      {% csrf_token %}
-      <table>
-        {{ chartform.as_table }}
-      </table>
-
-      <p>
-        <input name='workoutselectform' class="button green" type="submit" value="Submit">
-      </p>
-    </form>
-  </li>
-</ul>
-
 
 {% endblock %}
 

rowers/views/workoutviews.py

@@ -1571,8 +1571,8 @@ def virtualevent_mapcompare_view(request,id=0):
 
 
     return render(request,'mapcompare.html',
-                  {'interactiveplot':script,
-                   'the_div':div,
+                  {'mapscript':script,
+                   'mapdiv':div,
                    'breadcrumbs':breadcrumbs,
                    'rower':r,
                    'race':race,