sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

leaflet map - path not working

Browse Source
This commit is contained in:
Sander Roosendaal
2017-08-11 13:38:24 +02:00
parent 008e1ac2ee
commit 3a51c5c978
88 changed files with 32115 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
rowers/templates/basebase.html
View File

@@ -1,4 +1,5 @@
{% load cookielaw_tags %}
{% load leaflet_tags %}
{% load analytical %}
{% block filters %}
{% endblock %}
@@ -26,6 +27,8 @@
<link rel="stylesheet" href="/static/css/text.css" />
<link rel="stylesheet" href="/static/css/960_12_col.css" />
<link rel="stylesheet" href="/static/css/rowsandall.css" />
<link rel="stylesheet" href="/static/css/leaflet.css" />
<script src="/static/css/leaflet.js" ></script>
{% block meta %} {% endblock %}
{% analytical_head_bottom %}
</head>

382
rowers/templates/workout_form.html
View File

@@ -13,7 +13,7 @@
Please correct the error{{ form.errors|pluralize }} below.
</p>
{% endif %}
<h1>Edit Workout {{ workout.name }}</h1>
<div class="grid_6 alpha">
<div class="grid_2 alpha">
@@ -42,191 +42,221 @@
</p>
</div>
</div>
{% localtime on %}
<table width=100%>
<tr>
<th>Date/Time:</th><td>{{ workout.startdatetime }}</td>
</tr><tr>
<th>Distance:</th><td>{{ workout.distance }}m</td>
</tr><tr>
<th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
</tr><tr>
<th>Public link to this workout</th>
<td>
<a href="/rowers/workout/{{ workout.id }}">https://rowsandall.com/rowers/workout/{{ workout.id }}</a>
</td>
</tr><tr>
<th>Comments</th>
<td>
<a href="/rowers/workout/{{ workout.id }}/comment">Comment</a>
</td>
</tr><tr>
<th>Public link to interactive chart</th>
<td>
{% localtime on %}
<table width=100%>
<tr>
<th>Date/Time:</th><td>{{ workout.startdatetime }}</td>
</tr><tr>
<th>Distance:</th><td>{{ workout.distance }}m</td>
</tr><tr>
<th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
</tr><tr>
<th>Public link to this workout</th>
<td>
<a href="/rowers/workout/{{ workout.id }}">https://rowsandall.com/rowers/workout/{{ workout.id }}</a>
</td>
</tr><tr>
<th>Comments</th>
<td>
<a href="/rowers/workout/{{ workout.id }}/comment">Comment</a>
</td>
</tr><tr>
<th>Public link to interactive chart</th>
<td>
<a href="/rowers/workout/{{ workout.id }}/interactiveplot">https://rowsandall.com/rowers/workout/{{ workout.id }}/interactiveplot</a>
<td>
</tr>
</table>
{% endlocaltime %}
<form enctype="multipart/form-data" action="" method="post">
<table width=100%>
{{ form.as_table }}
</table>
{% csrf_token %}
<div class="grid_2 prefix_2 alpha tooltip">
{% if workout.privacy == 'visible' %}
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/setprivate">Set Private</a>
<span class="tooltiptext">Only you can see this workout</span>
{% else %}
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/makepublic">Make Public</a>
<span class="tooltiptext">Make this workout visible to your teams and followers</span>
{% endif %}
</div>
<div id="formbutton" class="grid_1 suffix_1 omega">
<input class="button green" type="submit" value="Save">
</div>
</form>
<td>
</tr>
</table>
{% endlocaltime %}
<form enctype="multipart/form-data" action="" method="post">
<table width=100%>
{{ form.as_table }}
</table>
{% csrf_token %}
<div class="grid_2 prefix_2 alpha tooltip">
{% if workout.privacy == 'visible' %}
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/setprivate">Set Private</a>
<span class="tooltiptext">Only you can see this workout</span>
{% else %}
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/makepublic">Make Public</a>
<span class="tooltiptext">Make this workout visible to your teams and followers</span>
{% endif %}
</div>
<div id="formbutton" class="grid_1 suffix_1 omega">
<input class="button green" type="submit" value="Save">
</div>
</form>
</div>
<div id="images" class="grid_6 omega">
<h1>Images linked to this workout</h1>
<div class="grid_6 alpha">
<div class="grid_2 alpha">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addtimeplot">Add Time Plot</a>
</p>
</div>
<div class="grid_2">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/adddistanceplot">Add Distance Plot</a>
</p>
</div>
<div class="grid_2 omega">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpiechart">Add Pie Chart</a>
</p>
</div>
<div class="grid_6 alpha">
<div class="grid_2 prefix_4 alpha">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpowerpiechart">Power Pie Chart</a>
</p>
</div>
<div class="grid_6">
<p>Generating images takes roughly 1 second per minute
of your workout's duration. Please reload after a minute or so.</p>
</div>
<h1>Images linked to this workout</h1>
<div class="grid_6 alpha">
<div class="grid_2 alpha">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addtimeplot">Add Time Plot</a>
</p>
</div>
<div class="grid_2">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/adddistanceplot">Add Distance Plot</a>
</p>
</div>
<div class="grid_2 omega">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpiechart">Add Pie Chart</a>
</p>
</div>
<div class="grid_6 alpha">
<div class="grid_2 prefix_4 alpha">
<p>
<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpowerpiechart">Power Pie Chart</a>
</p>
</div>
{% if graphs1 %}
<div class="grid_6">
<p>Generating images takes roughly 1 second per minute
of your workout's duration. Please reload after a minute or so.</p>
</div>
</div>
{% if graphs1 %}
{% for graph in graphs1 %}
{% if forloop.counter == 1 %}
<div id="thumb-container" class="grid_2 alpha">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% elif forloop.counter == 3 %}
<div id="thumb-container" class="grid_2 omega">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% else %}
<div id="thumb-container" class="grid_2">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% endif %}
{% endfor %}
{% for graph in graphs2 %}
{% if forloop.counter == 1 %}
<div id="thumb-container" class="grid_2 alpha">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% elif forloop.counter == 3 %}
<div id="thumb-container" class="grid_2 omega">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% else %}
<div id="thumb-container" class="grid_2">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% endif %}
{% endfor %}
{% for graph in graphs1 %}
{% if forloop.counter == 1 %}
<div id="thumb-container" class="grid_2 alpha">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% elif forloop.counter == 3 %}
<div id="thumb-container" class="grid_2 omega">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% else %}
<div id="thumb-container" class="grid_2">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% endif %}
{% endfor %}
{% for graph in graphs2 %}
{% if forloop.counter == 1 %}
<div id="thumb-container" class="grid_2 alpha">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% elif forloop.counter == 3 %}
<div id="thumb-container" class="grid_2 omega">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% else %}
<div id="thumb-container" class="grid_2">
<a href="/rowers/graph/{{ graph.id }}/">
<img src="/{{ graph.filename }}"
onerror="this.src='/static/img/waiting.png'"
alt="{{ graph.filename }}" width="120" height="100"></a>
</div>
{% endif %}
{% endfor %}
{% else %}
<p> No graphs found </p>
{% endif %}
</div>
<style>
{% else %}
<p> No graphs found </p>
{% endif %}
</div>
<style>
/* Need this to get the page in "desktop mode"; not having an infinite height.*/
html, body {height: 100%; margin:5px;}
</style>
<div id="summary" class="grid_6 omega">
<h1>Workout Summary</h1>
<p>
<pre>
{{ workout.summary }}
</pre>
</p>
<div class="grid_2 alpha">
<a class="button green small" href="recalcsummary">Update Summary</a>
</div>
</div>
<div id="interactiveplot" class="grid_6 omega">
<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
<script async="true" type="text/javascript">
Bokeh.set_log_level("info");
</script>
{{ gmscript |safe }}
</style>
<div id="summary" class="grid_6 omega">
<h1>Workout Summary</h1>
<p>
<pre>
{{ workout.summary }}
</pre>
</p>
<div class="grid_2 alpha">
<p>
<a class="button green small" href="recalcsummary">Update Summary</a>
</p>
</div>
</div>
<div id="interactiveplot" class="grid_6 omega">
<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
<script async="true" type="text/javascript">
Bokeh.set_log_level("info");
</script>
<style>
/* Need this to get the page in "desktop mode"; not having an infinite height.*/
html, body, #map_canvas {
height: 100%;
width: 100%;
margin:0;
padding: 0;
}
#map_canvas_container {position: relative; top:0; right:0; bottom:0; left:0;}
#map_canvas {position: relative; top: 0; right: 0; bottom: 0; left: 0;}
/* Need this to get the page in "desktop mode"; not having an infinite height.*/
html, body, #map_canvas {
height: 100%;
width: 100%;
margin:0;
padding: 0;
}
#map_canvas_container {position: relative; top:0; right:0; bottom:0; left:0;}
#map_canvas {position: relative; top: 0; right: 0; bottom: 0; left: 0;}
</style>
<div id="map_canvas">
{{ gmdiv|safe }}
<div id="map_canvas" style="width: 100%; height: 400px;"><p>&nbsp;</p></div>
<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>
</div>
</div>
</div>
{% endblock %}

50
rowers/views.py
View File

@@ -6220,14 +6220,36 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
if hascoordinates:
res = googlemap_chart(rowdata.df[' latitude'],
rowdata.df[' longitude'],
row.name)
gmscript = res[0]
gmdiv = res[1]
#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:
gmscript = ""
gmdiv = ""
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 = ""
# render page
@@ -6237,8 +6259,11 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
'workout':row,
'teams':get_my_teams(request.user),
'graphs1':g[0:3],
'gmscript': gmscript,
'gmdiv': gmdiv,
'latmean':latmean,
'longmean':longmean,
'latbegin':latbegin,
'longbegin':longbegin,
'coordinates':coordinates,
})
else:
@@ -6248,8 +6273,11 @@ def workout_edit_view(request,id=0,message="",successmessage=""):
'workout':row,
'graphs1':g[0:3],
'graphs2':g[3:6],
'gmscript': gmscript,
'gmdiv': gmdiv,
'latmean':latmean,
'longmean':longmean,
'latbegin':latbegin,
'longbegin':longbegin,
'coordinates':coordinates,
})