68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
|
|
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
|
|
|
|
<h2>{{ community_name }}</h4>
|
|
|
|
<div id="map" style="width: 500px; height: 300px"></div>
|
|
<br>
|
|
|
|
<h3>Monthly Temperatures</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-condensed table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Year<br> </th>
|
|
<th>January<br>°C</th>
|
|
<th>February<br>°C</th>
|
|
<th>March<br>°C</th>
|
|
<th>April<br>°C</th>
|
|
<th>May<br>°C</th>
|
|
<th>June<br>°C</th>
|
|
<th>July<br>°C</th>
|
|
<th>August<br>°C</th>
|
|
<th>September<br>°C</th>
|
|
<th>October<br>°C</th>
|
|
<th>November<br>°C</th>
|
|
<th>December<br>°C</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for temp in temps %}
|
|
<tr>
|
|
<td>{{ temp[0]|int }}</td>
|
|
<td>{{ temp[1]|round(2) }}</td>
|
|
<td>{{ temp[2]|round(2) }}</td>
|
|
<td>{{ temp[3]|round(2) }}</td>
|
|
<td>{{ temp[4]|round(2) }}</td>
|
|
<td>{{ temp[5]|round(2) }}</td>
|
|
<td>{{ temp[6]|round(2) }}</td>
|
|
<td>{{ temp[7]|round(2) }}</td>
|
|
<td>{{ temp[8]|round(2) }}</td>
|
|
<td>{{ temp[9]|round(2) }}</td>
|
|
<td>{{ temp[10]|round(2) }}</td>
|
|
<td>{{ temp[11]|round(2) }}</td>
|
|
<td>{{ temp[12]|round(2) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
|
<script>
|
|
var map = L.map('map').setView([{{ lat }}, {{ lon }}], 5);
|
|
|
|
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', {
|
|
maxZoom: 18,
|
|
attribution: '{{ community_name }}, AK'
|
|
}).addTo(map);
|
|
|
|
var marker_1 = L.marker([{{ lat }}, {{ lon }}]);
|
|
marker_1.bindPopup("{{ community_name }}, AK<br>{{ lat }}° N, {{ lon }}° W");
|
|
map.addLayer(marker_1)
|
|
</script>
|
|
|
|
{% endblock %}
|