-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile.html
213 lines (141 loc) · 12.9 KB
/
mobile.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N8BFZSFFR1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N8BFZSFFR1');
</script>
<title>Struggle for dignity in Cape Town's informal settlements: the facts</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile-style.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NV724B2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<h2 class="mobile-story-title">Struggle for dignity in Cape Town's informal settlements: the facts</h2>
<p style="padding-top:10px">There are around 146,000 households in 437 informal settlement pockets in Cape Town. Many were established before democracy but are still not recognised as permanent with occupation rights and security of tenure. We need an honest conversation about what is possible and effective budgets, policy and plans to tackle the constraints that do exist so that the City can provide progressive access to shelter and equitable services. We've made an interactive map to help you explore the data we've gathered on Cape Town's informal settelements.</p>
<p>Asithandile Xakatugaga and Zukiswa Qeza are two of the 3,000 residents of informal settlements who made submissions to the City of Cape Town's 2016/2017 draft budget. Their stories explain how the map works and provide context to give the data value. If you've read their stories already you can go straight to the map.</p>
<p class="centerBtn">
<a href="#asithandile" class="btn btn-default mobile-story-asithandile"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Asithandile's story</a>
<a href="#zukiswa" class="btn btn-default mobile-story-zukiswa"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Zukiswa's story</a>
<a href="mobile-map.html" class="btn btn-default explore-pre-story"><i class="fa fa-fw fa-globe" aria-hidden="true"></i> Explore map</a>
</p>
<br><br>
</div>
</div>
<div class="row hidden" id="asithandile">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<h2>Asithandile's Story</h2>
<img src="img/asithandile1.jpg">
<p>Asithandile lives in Kosovo Informal Settlement. He is wheelchair-bound after being shot by thugs in the Eastern Cape. This makes it difficult for him to navigate the poorly-maintained streets in Kosovo.</p>
<img src="img/kosovo-outline.jpg">
<p>He needs help to get to the toilet and to get on and off his wheelchair once he's there. So he must ask his brother to help, which he says makes him feel "useless and uncomfortable".</p>
<img src="img/asithandile2.jpg">
<p>He feels vulnerable when he is alone at home, as there is no one to help him use the toilet and to assist him if he has a problem in his shack.</p>
<p>There are no toilets for the disabled in Kosovo and Asithandile's plea to the City is to provide for them in the budget so that he - and others like him - can feel equal to able bodied people.</p>
<img src="img/asithandile3.jpg">
<p>When you open the map all you'll see are the borders of the informal settlements within the City of Cape Town. An informal settlement pocket is a cluster or grouping of tin shack housing which can vary in size from a few shacks to a few thousand. Pockets are grouped by the City of Cape Town to make up Informal Settlements.</p>
<img src="img/borders.jpg">
<p>The six boxes at the top of the map allow you to turn various data layers on the map on and off. You can toggle between the boxes to explore further after completing this tutorial.</p>
<img class="removeMarginBottom" src="img/layer-temptoilets.png">
<img class="removeMarginBottom" src="img/kosovo-temp-toilets.jpg">
<img src="img/temp-toilets-legend.png">
<p>Clicking the "Temporary Toilets" button switches from the "Boundary View" to show the percentage of toilets that are temporary, which are graded by colour. Of all the toilet types that the City of Cape Town has installed in informal settlements only the full flush ones are considered to be permanent. The colour grading indicates the percentage of the toilet types that are permanent or full flush.</p>
<p>We can see that Kosovo has a fairly high level of temporary sanitation. Between 60 to 80% of the toilets provided by the City are not permanent full flush toilets but instead fall into the category of temporary solutions - i.e. portable, container, chemical, or bucket types.</p>
<p>Clicking on the pocket gives a breakdown of the basic information about Kosovo. There are 6,086 informal dwellings in the area, with a toilet to households ratio of 1:5 (one toilet per five dwellings). This doesn't sound too bad, but look at the the pie chart and you'll see that only 37% of these are full flush.</p>
<img src="img/pie-kosovo.png">
<p>The bar chart lists the categories that the City uses to describe limitations to upgrading different informal settlements. In Kosovo, for example, we can see that 16% of the area is too close to a railway line. There is a link at the bottom of the page below the map to the detailed descriptions of these constraints which you can access after this tutorial. It is interesting in light of this information to note that despite these constraints, 488 (permanent) full flush toilets have already been installed in the area.</p>
<img src="img/constraints-kosovo.png">
<p>Now that you understand how the map works feel free to stat exploring. Alternatively, you can read zukiswa's story to learn about the challenges she faces in RR section.</p>
<p class="centerBtn"><a href="#zukiswa" class="btn btn-default mobile-story-zukiswa"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Zukiswa's story</a>
<a href="mobile-map.html" class="btn btn-default explore-post-story"><i class="fa fa-fw fa-globe" aria-hidden="true"></i> Explore map</a></p>
<br><br>
</div>
</div>
<div class="row hidden" id="zukiswa">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<h2>Zukiswa's Story</h2>
<img src="img/zukiswa.jpg">
<p>Zukiswa has been living in RR Section in Khayelitsha since 1999. When she first moved into the area there were no toilets at all. In 2015 the municipality built communal flush toilets, but she says it's not safe to use these flush toilets as they are far from her home. Also, these toilets are often blocked or broken.</p>
<img src="img/rrsection-outline.jpg">
<p>"As a person, whether young or old, who uses a bucket during the day or night, you can't claim the City of Cape Town respects the dignity of black people."</p>
<img src="img/zukiswa2.jpg">
<p>There is nothing that I hate more, or that makes me more angry, than the Mshengu toilet.</p>
<p>They are unbearable and ... are prone to maggots and stink".</p>
<img src="img/zukiswa3.jpg">
<p>Portable chemical flush toilets - known as Porta Potties - are common in informal settlement. But they are unhygienic and women who use them are prone to vaginal infections.</p>
<img src="img/zukiswa4.jpg">
<p>Zukiswa has called on the City to take responsibility for implementing a plan with actionable time frames to provide permanent full flush toilets in informal settlements.<br>Challenges in RR Section:</p><ul><li>Using communal toilets puts residents at risk</li><li>There are too few toilets and they are often far away from some residents' homes;</li><li>Zanele Xaki from RR Section in Khayelitsha was recently hit by a car while trying to cross a busy road to relieve herself in an open space next to the N2 highway</li><li>Her husband was attacked by thugs while walking to an open space next to the N2, which many people use as a "toilet"</li><li>Another resident, identified only as "Nosakhe" lived for six years with an overflowing drain in front of her house for home. Raw sewage from the drain often overflowed into her house. Her children had to be treated for diarrhoea by the Red Cross as a result of exposure to sewage, she says.</li></ul>
<p>When you open the map all you'll see are the borders of the informal settlements within the City of Cape Town. An informal settlement pocket is a cluster or grouping of tin shack housing which can vary in size from a few shacks to a few thousand. Pockets are grouped by the City of Cape Town to make up Informal Settlements.</p>
<img src="img/borders.jpg">
<p>The six boxes at the top of the map allow you to turn various data layers on the map on and off. You can also toggle between the boxes to explore further after completing this tutorial.</p>
<img class="removeMarginBottom" src="img/layer-uc.png">
<img class="removeMarginBottom" src="img/rrsection-uc.jpg">
<img src="img/uc-legend.png">
<p>Clicking the "Upgrade Category" button switches from the "Boundary View", to see the category map on the City of Cape Town's upgrade rating of the pockets. We can see that RR Section is categorised as having "Many constraints. May need to be relocated".</p>
<p>Clicking on the "Age" button will display the colour grading that indicates the age of an informal settlement. RR Section, for example, although categorised for relocation, is over 20 years old.</p>
<img class="removeMarginBottom" src="img/layer-age.png">
<img class="removeMarginBottom" src="img/rrsection-age.jpg">
<img src="img/age-legend.png">
<p>Clicking on the pocket gives a breakdown of the basic information about RR Section. There are 3,152 informal dwellings in the area, which is just under 18 hectares in size. This amounts to a density of 176 dwellings per hectare. We can also see that 57% of the toilets installed in RR Section are Porta-potties.</p>
<img src="img/rrsection-pie.png">
<p>The bar chart on the right lists the categories that the City uses to describe limitations to upgrading different informal settlements. In RR Section we can see the detail of the many constraints to upgrade that have been identified by the City of Cape Town, including the existence of waterbodies, private land ownership, proximity to metro roads, railways, servitudes and power lines. There is a link at the bottom of the page below the map to the detailed descriptions of these constraints. It is interesting in light of this information to note that despite these constraints, 307 (permanent) full flush toilets have already been installed in the area.</p>
<img src="img/rrsection-constraints.png">
<p>Now that you understand how the map works feel free to stat exploring. Alternatively, you can read Asithandile's story to learn about the challenges he faces in Kosovo.</p>
<p class="centerBtn">
<a href="#asithandile" class="btn btn-default mobile-story-asithandile"><i class="fa fa-fw fa-book" aria-hidden="true"></i> Asithandile's story</a>
<a href="mobile-map.html" class="btn btn-default explore-post-story"><i class="fa fa-fw fa-globe" aria-hidden="true"></i> Explore map</a>
</p>
<br><br>
</div>
</div>
<div id="logos-mobile" class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<div class="row">
<a href="http://nu.org.za" target="_blank"><img class="center-block" src="img/logo-nu-mobile.png"/></a>
</div>
<div class="row">
<a href="http://sjc.org.za" target="_blank"><img class="center-block" src="img/logo-sjc-mobile.png"></a>
</div>
<div class="row">
<a href="http://internationalbudget.org" target="_blank"><img class="center-block" src="img/logo-ibp-mobile.png"></a>
</div>
<div class="row">
<a href="http://code4sa.org" target="_blank"><img class="center-block" src="img/logo-c4sa-mobile.png"></a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script>
$(".mobile-story-zukiswa").on('click', function() {
$("#asithandile").addClass("hidden");
$("#zukiswa").removeClass("hidden");
gtag('send', 'event', 'mobile-story', 'zukiswa');
});
$(".mobile-story-asithandile").on('click', function() {
$("#zukiswa").addClass("hidden");
$("#asithandile").removeClass("hidden");
gtag('send', 'event', 'mobile-story', 'asithandile');
});
$(".explore-pre-story").on('click', function() {
gtag('send', 'event', 'mobile-explore-map', 'before story');
});
$(".explore-post-story").on('click', function() {
gtag('send', 'event', 'mobile-explore-map', 'after story');
});
</script>
</body>
</html>