forked from waagsociety/scholen
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (95 loc) · 3.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
---
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ site.title }}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
<link href='{{ site.baseurl }}/css/leaflet.css' rel='stylesheet' />
<script src='{{ site.baseurl }}/js/leaflet.js'></script>
<script src="{{ site.baseurl }}/js/d3.v3.min.js"></script>
<script src='{{ site.baseurl }}/js/leaflet-hash.js'></script>
<script src='{{ site.baseurl }}/js/OTPALayer.js'></script>
<script src='{{ site.baseurl }}/js/LocationLayer.js'></script>
</head>
<body>
<ul id="menu">
<li><div class="container">
<h1>{{ site.title }}</h1>
<span>Verplaats marker naar uw adres</span>
</div></li>
{% for filter in site.data.filters %}
<li><div class="container">
<span class="label">{{ filter.title }}</span>
{% if filter.type == 'range' %}
<input id="filter-{{ filter.name }}" type="{{ filter.type }}" name="filter-{{ filter.name }}"
value="{{ filter.config.value }}" min="{{ filter.config.min }}" max="{{ filter.config.max }}" step="{{ filter.config.step }}">
<label for="filter-{{ filter.name }}">{{ filter.config.value }}</label> <span>{{ filter.config.units }}</span>
{% elsif filter.type == 'checkbox' %}
<div class="buttonset">
{% for option in filter.config.options %}
<input type="{{ filter.type }}" name="filter-{{ filter.name }}" checked="checked" id="filter-{{ filter.name }}{{ forloop.index }}" value="{{ option.value }}">
<label for="filter-{{ filter.name }}{{ forloop.index }}">{{ option.title }}</label>
{% endfor %}
</div>
{% endif %}
</div></li>
{% endfor %}
</ul>
<div id="map"></div>
<script>
var endpoint = '{{ site.data.otpa.endpoint }}',
pointset = '{{ site.data.otpa.pointset }}',
indicator = '{{ site.data.otpa.indicator }}',
indicators = {};
var map = L.map('map', {
zoomControl: false,
minZoom: 10,
maxZoom: 18
});
map.setView([52.37278, 4.90032], 13);
var hash = new L.Hash(map);
var tileUrl = '{{ site.data.map.tiles }}',
tileLayer = L.tileLayer(tileUrl, {attribution: '{{ site.data.map.attribution }}'}).addTo(map);
// // TODO: make sure order of on() and addTo() does not matter
var otpaLayer = L.otpaLayer(endpoint, {
cutoffMinutes: d3.select("#filter-traveltime").attr("max"),
isochroneMinutes: d3.select("#filter-traveltime").attr("value"),
colors: ['{{ site.data.style.1st_color }}', '{{ site.data.style.2nd_color }}', '{{ site.data.style.3rd_color }}'],
isochroneStep: {{ site.data.filters.first.config.step }},
pointset: pointset,
location: [52.37278, 4.90032]
}).on('pointsets', function(e) {
}).on('change', function(e) {
//update(indicators, range.value * 60);
}).addTo(map);
{% for filter in site.data.filters %}
{% if filter.type == 'range' %}
d3.select("#filter-{{ filter.name }}").on("input", function() {
var value = d3.select(this).property("value");
filterInput(this, value);
d3.select("label[for=filter-{{ filter.name }}]").html(value);
});
{% endif %}
{% endfor %}
function filterInput(filter, value) {
if (filter.id === 'filter-traveltime') {
otpaLayer.setTimeLimit(value);
}
}
function update(data, seconds) {
}
</script>
<svg>
<defs>
<pattern id="isochrone-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
<g>
<path d="M0,0 L8,8"/>
<path d="M8,0 L-8,8"/>
</g>
</pattern>
</defs>
</svg>
</body>
</html>