-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (143 loc) · 6.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Housing Trust Fund Map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
<link rel='stylesheet' href='css/mapbox.css'/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="css/housing-map.css">
<link rel="SHORTCUT ICON" href="assets/favicon.ico" type='image/x-icon'>
</head>
<body>
<div id="map"></div>
<div id="sidebar" class="container">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8" id="districtTitleContainer">
<span id="districtTitle">District </span>
</div>
<div class="col-xs-4 col-sm-4 col-md-4" id="districtNumberContainer">
<span id="districtNumber">1</span>
</div>
</div>
<div class="row">
<div class="col-md-12 textBox">
<p>Everyone deserves the opportunity to live in a safe, healthy, affordable home, but for many, soaring rent prices keep homes out of reach. This map is a snapshot of housing affordability and homelessness across Washington state. The data comes from Office of <a href="http://www.k12.wa.us/HomelessEd/Data.aspx">Superintendent of Public Instruction</a>, Washington State Department of Commerce <a href="http://www.commerce.wa.gov/serving-communities/homelessness/annual-point-time-count/">2016 Point in Time Count</a>, and the <a href="http://nlihc.org/sites/default/files/oor/OOR_2016.pdf">2016 Out of Reach Report</a>.</p>
</div>
</div>
<div class="row sidebarField htf-units">
<div class="col-xs-2 col-sm-2 col-md-2 alignCenter">
<span class="fieldIcon"><i class="zmdi zmdi-home zmdi-hc-2x"></i></span>
</div>
<div class="col-xs-7 col-sm-7 col-md-7">
<span class="fieldTitle">Housing Trust Fund Units</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignRight">
<span id="htfUnitsValue" class="fieldValue">1,595</span>
</div>
</div>
<div class="row sidebarField">
<div class="col-xs-3 col-sm-3 col-md-3 alignRight">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoRed"><i class="zmdi zmdi-account zmdi-hc-3x"></i></span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoDarkGray"><i class="zmdi zmdi-money-box zmdi-hc-3x"></i></span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoOrange"><i class="zmdi zmdi-hotel zmdi-hc-3x"></i></span>
</div>
</div>
<div class="row sidebarField" id="countiesTableHeaderRow">
<div class="col-xs-3 col-sm-3 col-md-3">
<span id="countyHeader">county</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoRed">People Experiencing Homelessness</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoDarkGray">Median Home Price</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableHeader logoOrange">Wage needed for 1 bedroom</span>
</div>
</div>
<div id="countiesTable">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 alignLeft">
King
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoRed">10,730</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoDarkGray">$494,500</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoOrange">$23.56</span>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 alignLeft">
<span>Snohomish</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoRed">960</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoDarkGray">$359,800</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 alignCenter">
<span class="tableValue logoOrange">$23.56</span>
</div>
</div>
</div>
<div class="row sidebarFooter">
<div class="col-xs-4 col-sm-4 col-md-4">
<a href="http://www.ywcaworks.org/" title="YWCA"><img src="assets/ywca_logo_small.png" height="75px"></a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<a href="http://www.wliha.org/" title="WLIHA"><img src="assets/wliha_logo.png" height="75px"></a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 alignCenter shareButtonWrapper">
<button type="button" class="btn btn-success" id="shareMap" data-toggle="modal" data-target="#shareMapModal"><i class="zmdi zmdi-mail-send"></i> Share Map</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/mapbox.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="data/countyCountsByLd.v2.js"></script>
<script type="text/javascript" src="data/ldsWithCounts.v2.js"></script>
<script type="text/javascript" src="js/housing-map-leaflet.js"></script>
</body>
<!-- Modal -->
<div class="modal fade" id="shareMapModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Share this map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Link to it</h4>
<p>Use the link below to share it with your friends or co-workers, or post it in your social networks.</p>
<input type="text" class="inputTextForCopy" value="http://www.firesteelwa.org/map">
</div>
<div class="col-md-6">
<h4>Embed it</h4>
<p>Copy the text below to embed this map on your blog or website.</p><br>
<input type="text" class="inputTextForCopy" value="<iframe width="100%" height="520" frameborder="0" src="http://www.firesteelwa.org/map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>">
</div>
</div>
</div>
</div>
</div>
</html>