-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
183 lines (173 loc) · 12 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Leeds bin dates</title>
<link rel="icon" href="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='640' height='640' overflow='auto' viewBox='-32 -32 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='oi-person'%3E%3Cpath d='m-32-32h64v64h-12v-24a4 4 0 0 0 -4 -4h-8a4 4 0 0 0 -4 4v24h-36zm44 27m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0' fill='%23fff'%3E%3C/path%3E%3C/mask%3E%3Cg id='oi-logo' fill='%23F9BC26'%3E%3Ccircle r='32' mask='url(%23oi-person)'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E" />
<link rel="StyleSheet" href="resources/bins.css" type="text/css" />
<meta name="theme-color" content="#F9BC26">
<link rel="apple-touch-icon" href="odileeds.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ODILeeds">
<meta name="twitter:url" property="og:url" content="https://odileeds.github.io/bins/">
<meta name="twitter:title" property="og:title" content="Bin times">
<meta name="twitter:description" property="og:description" content="Find the rubbish bin collection times for Leeds">
<meta name="twitter:image" property="og:image" content="odileeds.png">
<meta name="keywords" content="bins,collection,refuse,Leeds" />
<link rel="manifest" href="manifest.webmanifest">
<script type="text/javascript" src="resources/bins.js?new"></script>
<style>
/* Spinner style */
.spinner {
margin: auto;
width: 50px;
height: 50px;
text-align: center;
}
.spinner > div {
height: 100%;
width: 6px;
margin-right: 1px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
</head>
<body class="b5-bg">
<input type="checkbox" id="hamburger" class="hamburger">
<label for="hamburger" class="hamburger"><span class="nv">Toggle menu (if not visible)</span></label>
<header class="c14-bg padded">
<div class="title">
<h1>Leeds bin dates</h1>
</div>
<div class="holder b5-bg">
<div class="banner"></div>
<nav>
<ul>
<li><a href="#locate" class="c14-bg">Find bin dates</a></li>
<li><a href="#recycling">Recycling</a></li>
<li><a href="#questions">Questions</a></li>
<li><a href="#about">Credits</a></li>
</ul>
</nav>
<p>Created by <a href="https://odileeds.org/">ODI Leeds</a> using open data <a href="https://datamillnorth.org/dataset/household-waste-collections">published</a> by Leeds City Council on <a href="https://datamillnorth.org/">Data Mill North</a>.</p>
</div>
</header>
<div class="bg"></div>
<div id="main">
<div class="holder">
<section id="locate" class="screen">
<div class="placesearch">
<div class="submit" href="#" title="Enter street name" role="button" aria-label="Enter street name"></div>
<form class="placeform layersearch" action="search" method="GET" autocomplete="off">
<label for="place-street" class="place-street">Enter street name</label>
<input class="place-street" id="place-street" name="place-street" value="" placeholder="e.g. Meanwood Road, Meanwood" type="text" />
<label for="place-number" class="place-number" style="display:none;">Enter house name/number</label>
<input id="place-number" name="place-number" class="place-number" style="display:none;" value="" placeholder="e.g. 29, Flat 2, or Airedale House" type="text" />
<div class="searchresults"></div>
</form>
</div>
<div class="spinner"><div class="rect1 c14-bg"></div><div class="rect2 c14-bg"></div><div class="rect3 c14-bg"></div><div class="rect4 c14-bg"></div><div class="rect5 c14-bg"></div></div>
</section>
<section id="results" class="screen">
</section>
<section id="recycling" class="screen">
<h2>Recycling</h2>
<ol>
<li><a href="http://whatgoeswhere.org.uk/phone/index.html?utm_source=mobile&utm_campaign=LeedsBinApp&utm_medium=web">What goes where?</a></li>
<li><a href="https://www.leeds.gov.uk/residents/bins-and-recycling/waste-permit-scheme?utm_source=mobile&utm_campaign=LeedsBinApp&utm_medium=web&utm_content=permits">Request a recycling site (tip) permit</a></li>
</ol>
</section>
<section id="questions" class="screen">
<h2>FAQ</h2>
<ul class="questions">
<li>
<h3>The council didn't collect my bin!</h3>
<p>This tool isn't made by the Council but relies on data they openly publish. However, you can <a href="https://www.leeds.gov.uk/residents/bins-and-recycling/your-bins/bin-collection-problems?utm_source=mobile&utm_campaign=LeedsBinApp&utm_medium=web&utm_content=collectionproblem">report a missed bin collection</a> to Leeds City Council on their website.</p>
</li>
<li>
<h3>I don't have a bin or it has gone missing!</h3>
<p>Oh no! You could <a href="https://www.leeds.gov.uk/residents/bins-and-recycling/new-or-replacement-bin">request a new or replacement bin from Leeds City Council</a>. Note that they now charge for replacements.</p>
</li>
<li>
<h3>Who made this?</h3>
<p>Stuart Lowe at <a href="https://odileeds.org">ODI Leeds</a> as an experiment in dealing with postcode-less addresses and making progressive web apps. Our friends at imactivate also make <a href="https://odileeds.org/products/bin-app/">the Leeds Bins App</a> on Android and iOS which uses some closed data to allow postcode lookups.</p>
</li>
<li>
<h3>How do you know my bin collections dates?</h3>
<p>Leeds City Council publish <a href="https://datamillnorth.org/dataset/household-waste-collections">open data on Data Mill North</a>. By publishing the collection information openly (in terms of availability and in terms of licence), things like this can be built.</p>
</li>
<li>
<h3>Why can't I find my address using my postcode?</h3>
<p>Royal Mail own the UK's Postcode Address File (PAF). That limits what information people can share. Leeds City Council are not allowed to release a file that contains the address and postcode of every household in Leeds. So Leeds City Council only publish the house name/number, street name, and locality. We've had to combine that with <a href="https://www.ordnancesurvey.co.uk/business-and-government/products/os-open-names.html">Ordnance Survey Open Names</a> data to clean up the presentation of the data.</p>
</li>
<li>
<h3>Why can't I just type my address with the number then the street?</h3>
<p>Due to the decisions we've taken about protecting your privacy (we don't want to track you) we've had to order and split up the data by streets. That means that the first thing we search for has to be the street name.</p>
<li>
<h3>What about my privacy?</h3>
<p>We care about privacy. Addresses are sensitive information. The raw data from Data Mill North is around 290MB and we don't want to send all that to your browser. We want to send you a small enough chunk of data to be manageable but without our server knowing your exact address. So, we've split the original data into groups of at least 50 streets ordered alphabetically. When you enter a street, we work out (in your browser) which chunk of streets to ask for. As they are alphabetically sorted, the streets in this chunk can be spread all over the city. Once that comes back to your browser we then use your house number (only in your browser) to search through that list. We have also packaged up the bin collection times in the same way so that our server doesn't gain any extra information. The end result is that we know which chunk of 50+ streets you've requested (so that we can tell you your collection times) but can't track you further than that.</p>
</li>
<li>
<h3>Do you set cookies?</h3>
<p>Yes. We save your street name and house name/number to a cookie so that we can speed things up next time you visit. We also create a Service Worker (where your browser supports it) to send notifications to your device.</p>
</li>
</ul>
</section>
<section id="about" class="screen">
<h2>Credits</h2>
<p>This web-based app was created by Open Innovations (ODI Leeds) as an experiment in August 2019. The <a href="https://datamillnorth.org/dataset/household-waste-collections">bin collection data published by Leeds City Council on Data Mill North</a> does not include postcode due to licensing issues with Royal Mail. This is an experiment to combine the addresses provided with OS open data to make it possible to only use the house name/number and street name to locate a property.</p>
<p>Our friends at <a href="http://imactivate.com/">imactivate</a> also make a <a href="http://imactivate.com/leedsbins/">Leeds Bins</a> app that is available on <a href="https://play.google.com/store/apps/details?id=com.imactivate.bins&hl=en_GB">Android</a>, <a href="https://itunes.apple.com/gb/app/leeds-bins/id1013036432?mt=8">iOS</a>, and <a href="https://www.microsoft.com/en-gb/store/p/leeds-bins/9nblggh38r85">Windows</a>. They let you search for your address by postcode (they use some closed data) and let you add reminders to your device's calendar.</p>
<h3>Copyright and sources</h3>
<ul>
<li><strong>Processing:</strong> Stuart Lowe, <a href="https://open-innovations.org/">Open Innovations</a> (<a href="http://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a>)</li>
<li style="display:none"><strong>Local Authority Boundaries:</strong> <a href="http://geoportal.statistics.gov.uk/datasets/local-authority-districts-april-2019-boundaries-uk-buc">Local Authority Districts (April 2019) Boundaries UK BUC</a> (OGL v3; Contains National Statistics data © Crown copyright and database right 2019; Contains OS data © Crown copyright and database right 2019)</li>
<li><strong>Bin collection data:</strong> and <a href="http://opendata.leeds.gov.uk/downloads/bins/dm_jobs.csv">waste collections</a> from Leeds City Council (<a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">OGLv3</a>).</li>
<li><strong>Addresses:</strong> The addresses come from Leeds City Council's <a href="http://opendata.leeds.gov.uk/downloads/bins/dm_premises.csv">Household premises</a> list (<a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">OGLv3</a>) but, as they are in all-caps, the street names and localities have been tidied up using <a href="https://www.ordnancesurvey.co.uk/business-and-government/products/os-open-names.html">OS Open Names</a> (Contains Ordnance Survey data © Crown copyright and database right 2018. Contains Royal Mail data © Royal Mail copyright and database right 2018. Contains National Statistics data © Crown copyright and database right 2018.)</li>
<li><strong>Edit icon:</strong> <a href="https://commons.wikimedia.org/wiki/File:Edit_icon.svg">pencil icon</a> MGalloway (WMF) (<a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en">CC-BY-SA 3.0</a>)</li>
</li>
</section>
</div>
</div>
<footer class="b1-bg">
<div class="holder">
<p>© 2019-2022 Open Innovations</p>
</div>
</footer>
<script src="https://open-innovations.org/resources/oi.log.js"></script>
<script>
OI.log.setup({'id':'open-innovations','target':['odileeds.github.io','open-innovations.github.io']}).add('action=view');
</script>
</body>
</html>