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

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