diff -r b8467d51f1b8 -r b736478416d4 templates/trip.html
--- a/templates/trip.html	Wed Sep 12 08:27:27 2018 +0300
+++ b/templates/trip.html	Thu Sep 13 21:32:30 2018 +0300
@@ -3,7 +3,18 @@
 	<link rel="icon" type="image/png" href="../static/favicon.png" />
 	<link rel="stylesheet" type="text/css" href="../static/style.css" />
 	<meta charset='UTF-8' />
-	<meta http-equiv='refresh' content='60'>
+	<!--<meta http-equiv='refresh' content='60'>-->
+	<link
+	rel="stylesheet"
+	href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
+	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+	crossorigin=""
+	/>
+	<script
+		src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
+		integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+		crossorigin=""
+	></script>
 	<style>
 	.sarake-alue
 	{
@@ -42,6 +53,14 @@
 	{
 		text-align: right;
 	}
+	.bus_stop_ref
+	{
+		padding: 2px;
+		border: 1px solid #888;
+		background-color: #e0e0e0;
+		border-radius: 3px;
+	}
+	#mapid { height: 50vh; }
 	</style>
 	<script>
 	function toggle_fold(id)
@@ -80,6 +99,13 @@
 		</tr>
 	</thead>
 	<tbody>
+	<tr>
+	<td colspan="9100">
+	<div id="mapid"></div>
+	</td>
+	</tr>
+	</tbody>
+	<tbody>
 		{% for entry in schedule %}
 		<tr>
 			<td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td>
@@ -99,5 +125,53 @@
 		{% endfor %}
 	</tbody>
 	</table>
+<script>
+function openBusStop(event) {
+	window.open(this.options._my_bus_stop_url);
+}
+var route = [{{shape}}];
+var mymap = L.map('mapid').setView([60.45175, 22.26705], 13);
+var myIcon = L.icon({
+    iconUrl: '/static/favicon.png',
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+    popupAnchor: [-3, -76],
+});
+L.tileLayer(
+	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+	//'http://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg',
+	{
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+		maxZoom: 18,
+	}
+).addTo(mymap);
+var polyline = L.polyline(route, {
+	color: 'black',
+	dashArray: [3, 5],
+}).addTo(mymap);
+// zoom the map to the polyline
+mymap.fitBounds(polyline.getBounds());
+
+{% for entry in schedule %}
+{% for halt in entry['stops'] %}
+marker = L.circleMarker([{{halt["location"]}}], {
+	radius: 6,
+	color: 'black',
+	fillColor: 'yellow',
+	fillOpacity: 1,
+	title: "{{halt['ref']}} {{halt['name']}}",
+	_my_bus_stop_url: "/stop/{{halt['ref']}}",
+}).addTo(mymap);
+popupmsg = "<h3><a href='/stop/{{halt['ref']}}'><span class='bus_stop_ref'>{{halt['ref']}}</span> {{halt['name']}}</a></h3>";
+	
+{% if halt['arrival_time'] != halt['departure_time'] %}
+	popupmsg += "<p><ul><li>Saapuu: {{halt['arrival_time']}}</li><li>Lähtee: {{halt['departure_time']}}</li></ul></p>";
+{% else %}
+	popupmsg += "<p><ul><li>Pysähtyy: {{halt['arrival_time']}}</li></ul></p>";
+{% endif %}
+marker.bindPopup(popupmsg);
+{% endfor %}
+{% endfor %}
+</script>
 </body>
 </html>