{% extends "base_template.html" %}

{% block head %}
	<!-- my css -->
	<link rel="stylesheet" type="text/css" href="/static/map.css">

	<!-- leaflet css -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
	       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin=""/>

	<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />

	<!-- leaflet js -->
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
		integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
	crossorigin=""></script>
{% endblock %}

{% block body %}
	<div id="mapid">
	</div>

	<!-- my js -->
	<script src="/static/js/map.js"></script>

	{% for town in towns %}
		<script type="text/javascript">addPin("{{town|safe}}")</script>
	{% endfor %}
	<script type="text/javascript">
		resizePins();
		recenterMap();
	</script>
	<div id="mapstops"><a href="stops">See the Stops.</a></div>
{% endblock %}