-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile-map.html
248 lines (201 loc) · 17.1 KB
/
mobile-map.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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!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 name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- tutorial docs -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<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">
<style type="text/css">
.mobile-title {
text-align: center;
background-color: #333;
color: #FFF;
margin-top: 0;
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
text-shadow: 2px 2px 0px #555555;
text-transform: capitalize;
font-family: 'Lato', sans-serif;
}
</style>
</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="mobile-title" style="text-align:center; background-color: #333; color: #FFF">
<h2 class="mobile-title" >Struggle for dignity in Cape Town’s informal settlements: the facts</h2>
</div>
<div class="row layer-info">
<div class="col-lg-8 col-lg-offset-2" id="infoDisplay"> <!-- Contextual SubLayer Information Start -->
<div id="infoDefault">
<h3>Boundary</h3>
<p class="minimize">There are 204 recognised informal settlements in Cape Town. In fact there are 437 individual pockets. Sometimes the pocket is a large block of hundreds of homes. In other cases the pockets are small clusters of only a few homes scattered on land in between formal houses. Some are individual homes on plots surrounded by food gardens. Use the satellite view to explore how each pocket is unique. You can find more information below by clicking on the pocket.</p>
</div>
<div id="infoHousing" class="hidden">
<h3>Households</h3>
<p class="minimize">Each household is one individual home that has been built. There is a wide variation in the number of households in a pocket. Some, like Chris Hani Park have as little as 3 households. Some, like Enkanini, have nearly 8000 households! Altogether there are 146,626 households living in informal settlements. The average pocket has around 340 households but this is skewed by a few large informal settlements - the majority of pockets have less than 800 households.</p>
</div>
<div id="infoAge" class="hidden">
<h3>Age of Informal Settlements</h3>
<p class="minimize">The age of an informal settlement tells you how long it has been since it was first established. It does not show how a particular pocket has grown over time or whether the same people have been living there. Many people believe informal settlements are a new phenomenon, but most pockets are very old. Only 17 pockets (4%) are less than 5 years old. In fact around 286 pockets (65%) were established 15 or more years ago (before the year 2000) and 103 (24%) were established before our democracy. The oldest informal settlements are clustered around northern Khayelitsha, Crossroads and Nyanga but are still not recognised and still have temporary toilets.</p>
</div>
<div id="infoTempSani" class="hidden">
<h3>Temporary toilets</h3>
<p class="minimize">The City of Cape Town provides a range of toilet types to residents living in informal settlements. Around 13,577 full flush toilets have been installed. These are a free standing toilets built into prefabricated cement shelters and connected to a sewer system. This means that around a third (33%) of all toilets are permanent infrastructure. The rest are temporary toilets that are provided and cleaned by private companies. The City provides many different types. We show the data for chemical, container and porta potti, which are the most common and combine the rest into an ‘other’ category. 5,027 (12%) are chemical toilets - a toilet with a chemical container that can be removed or cleaned via suction. These are often called ‘mshengu’ toilets. 5,077 (12.5%) are container toilets - a cement shelter with a container that has to be removed. The vast majority, around 15,928 (39%), are Porta Pottis. These are portable toilets with a small container that can be disconnected and must be collected and cleaned. This is the number of toilets that have been purchased - it is unclear how many actually exist or where they are currently. Most pockets across the city only have access to temporary toilets.</p>
</div>
<div id="infoUpgrade" class="hidden">
<h3>Upgrade Category</h3>
<p class="minimize">How many informal settlements are really on unsuitable land? The City of Cape Town has categorised informal settlements in terms of size, age and development priority. There are 48 (12%) informal settlements in Category A. These have been approved for full upgrade or are suitable for future upgrades where 'pre-planning' can commence. Why are these not being prioritised immediately for upgrading; infrastructure and sanitation? There are 22 (5%) informal settlements in Category B1. These are on City land with adverse physical conditions that require programmes and budgets for upgrading. The vast majority, around 252 (58%), of informal settlements are in Category B2. These are informal settlements on Provincial or National government land that require programmes and budgets for transfer to the City, de-densification, and upgrading. There are challenges here but it is still possible to upgrade and install infrastructure despite the challenges. Why is it taking so long? There are 115 (26%) informal settlements in Category C. These are informal settlements that are located on land which either needs to be purchased or there are constraints that require total relocation. Dealing with these challenges will not be easy. It requires decisive action, not indifference and denials. Please note that no constraint information exists at the pocket level - this is only provided for all the pockets within a recognised the settlement. As each pocket is unique, it is likely that significantly more informal settlements could be recognised and upgraded if the City determined the specific constraints for each pocket.</p>
</div>
<div id="infoDensity" class="hidden">
<h3>Density</h3>
<p class="minimize">The Density of a pocket is measured in dwelling per hectare or DHa. We have calculated this by dividing the number of households by the size of the land. The density of a pocket is an important consideration because it determines how easily basic services can be installed. Density ranges between 3 DHa at Kroonendal in Houtbay to about 463 DHa at Langa Sportsfield. To put this into perspective, the target density for formal affordable housing of between 1 and 4 stories is between 80 and 300 DHa.</p>
</div>
<div id="infoBoundary" class="hidden">
<h3>Boundary</h3>
<p class="minimize">There are 204 recognised informal settlements in Cape Town. In fact there are 437 individual pockets. Sometimes the pocket is a large block of hundreds of homes. In other cases the pockets are small clusters of only a few homes scattered on land in between formal houses. Some are individual homes on plots surrounded by food gardens. Use the satellite view to explore how each pocket is unique. You can find more information below by clicking on the pocket.</p>
</div>
</div> <!-- Contextual SubLayer Information End -->
</div>
<ul id="layer-select-tiny" class="hidden-md hidden-lg hidden-sm">
<li class="btn btn-block btn-default select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li class="btn btn-block btn-default select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-block btn-default select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-block btn-default select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-block btn-default select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-block btn-default active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
<div class="position:relative">
<ul id="layer-select-mobile" class="hidden-md hidden-lg hidden-xs">
<li class="btn btn-default select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li id="story-layer" class="btn btn-default select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-default select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-default select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-default select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-default active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
</div>
<!-- Map Start -->
<div id="mapcontainer" class="row mapstart">
<div id="map" class="col-xs-12">
<a href="#"><div class="open-layertext hidden"></div></a>
<button class="btn btn-default tooltip-name tt-small hidden hidden-lg hidden-md" style="font-weight: 800"></button>
<a href="#dashboard"><div class="arrow-down hidden"></div></a>
<ul id="layer-select" class="hidden-sm hidden-xs">
<li class="btn btn-default tooltip-name hidden" style="font-weight: 800"></li>
<li class="btn btn-default ssub select-sublayer0"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Households</li>
<li class="btn btn-default ssub select-sublayer1"><i class="fa fa-history fa-fw" aria-hidden="true"></i> Age</li>
<li class="btn btn-default ssub select-sublayer2"><i class="fa fa-tint" aria-hidden="true"></i> Temporary toilets</li>
<li class="btn btn-default ssub select-sublayer3"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Upgrade category</li>
<li class="btn btn-default ssub select-sublayer4"><i class="fa fa-building-o fa-fw" aria-hidden="true"></i> Density</li>
<li class="btn btn-default ssub active select-sublayer5"><i class="fa fa-circle-thin fa-fw" aria-hidden="true"></i> Boundary</li>
</ul>
<div id="desktop-legend" class="legend hidden-xs hidden-sm"></div>
<!-- Basemap toggle menu -->
<div class="basemap-select hidden-xs">
<div id="bm-map" class="btn btn-default active base-map"><i class="fa fa-map-o fa-fw" aria-hidden="true"></i> Map</div>
<div id="bm-sat" class="btn btn-default base-satellite"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Satellite</div>
</div>
<div class="basemap-select hidden-sm hidden-md hidden-lg">
<div class="btn btn-default active base-map"><i class="fa fa-map-o fa-fw" aria-hidden="true"></i></div>
<div class="btn btn-default base-satellite"><i class="fa fa-globe fa-fw" aria-hidden="true"></i></div>
</div>
</div>
<!-- Map End -->
</div>
<div id="mobile-legend" class="row legend hidden-md hidden-lg"></div>
<!-- Dashboard Start -->
<div id="dashboard" class="row hidden">
<div class="col-md-3 col-basic-info">
<h2 id="pocket_name"></h2>
<p class="category"><b>Cluster</b></p>
<p id="is_cluster"></p>
<p class="category"><b>Size</b></p>
<p style="display: inline;" id="area_ha"></p><p style="display: inline;"> hectares</p><p></p>
<p class="category"><b>Number of households</b></p>
<p id="structure_count"></p>
<p class="category"><b>Household density</b></p>
<p style="display: inline;" id="density_dwellings_per_ha"></p><p style="display: inline;"> per hectare</p><p></p>
<p class="category"><b>Ratio of toilets to households</b></p>
<p id="ratio_toilets_dwellings"></p>
<p class="category"><b>Temporary toilets</b></p>
<p style="display: inline;" id="temp_sanitation"></p><p style="display: inline;">%</p><p></p>
<p class="category"><b>Age</b></p>
<p id="age_of_pocket"></p>
<p class="category"><b>Upgrade category</b></p>
<p id="upgrade_category"></p>
<p class="category"><b>Ward councillor</b></p>
<p id="ward_councillor"></p>
<p class="category"><b>Ward ID</b></p>
<p id="ward_id"></p>
</div>
<div class="col-md-4 col-toilets">
<div id="charts">
<h4>Types of Toilets <a style="color: #333" href="javascript: void(0)" data-toggle="tooltip" title="Full flush toilets are free standing toilets connected to a sewer system. The others are temporary: chemical toilets have a chemical container that can be removed or cleaned via suction. Container toilets have a cement shelter with a container that has to be removed. Porta-potties are portable toilets with a small container that must be collected and cleaned."><i class="fa fa-question-circle" aria-hidden="true"></i></a></h4>
<div id="toilet_chart"></div>
</div>
</div>
<div class="col-md-5 col-constraints">
<div id="charts">
<h4>Constraints on cluster level <a style="color: #333" href="javascript: void(0)" data-toggle="tooltip" title="A constraint is something that the City of Cape Town considers prevents them from installing proper sanitation. This chart shows the percentage of land that has these contraints."><i class="fa fa-question-circle" aria-hidden="true"></i></a></h4>
<div id="constraints_chart"></div>
</div>
</div>
</div>
<!-- Dashboard End -->
<div id="back-to-map" class="hidden row hidden-lg hidden-md hidden-sm">
<a href="#map" class="btn-block btn btn-default back-to-map"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Back to map</a>
</div>
<!-- Data Source and Credits Start -->
<div id="footer" class="row hidden">
<div class="col-lg-8 col-lg-offset-2">
<p style="margin-top: 10px;">The data used to generate this map was obtained from the City of Cape Town in 2015. Some information was obtained from sources and others through access to information requests. Constraint data has been sourced directly from the City of Cape Town. Requests have been made for detailed descriptions of the constraint fields, and we will continue to follow up these requests. The datasets are available on Code4SA's data portal: <a href="https://data.code4sa.org/dataset/Informal-Settlements-CTn-Detailed/fnr6-38xe" target="_blank">demographic and toilet data</a>, <a href="https://data.code4sa.org/dataset/Informal-Settlements-Upgrade-Constraints/3wnb-x2rd" target="_blank">constraints data</a>. Details, background, and discrepancies of our process and the data can be found <a href="disclosure.html" target="_blank">here</a>. It's also the place you can find the <a href="disclosure.html#constraints" target="_blank">definitions of the constraints</a>.</p>
<p>This map of informal settlements in Cape Town is the result of a collaboration between <a href="http://nu.org.za/">Ndifuna Ukwazi</a>, <a href="http://www.sjc.org.za/">Social Justice Coalition</a>, <a href="http://www.internationalbudget.org/">International Budget Partnership</a>, and <a href="http://www.code4sa.org/">Code for South Africa</a>. For further information and comment please contact <a href="mailto:axolile@sjc.org.za">axolile@sjc.org.za</a> or <a href="mailto:jared@nu.org.za">jared@nu.org.za</a>.</p>
</div>
</div>
<div id="logos" class="row hidden">
<div class="col-md-2 col-md-offset-2 col-sm-6">
<a href="http://nu.org.za" target="_blank"><img class="center-block" src="img/logo-nu.png"/></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://sjc.org.za" target="_blank"><img class="center-block" src="img/logo-sjc.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://internationalbudget.org" target="_blank"><img class="center-block" src="img/logo-ibp.png"></a>
</div>
<div class="col-md-2 col-sm-6">
<a href="http://code4sa.org" target="_blank"><img class="center-block" src="img/logo-c4sa.png"></a>
</div>
</div>
<script src="js/map-control-mobile.js"></script>
<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 src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
packages: ['corechart']
});
</script>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>