forked from cutting-room-floor/dc-properties-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (76 loc) · 3.72 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DC's Changing Landscape</title>
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css" type="text/css" />
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/mapbox.share.css" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.uncompressed.js'></script>
<script src="ext/jquery.min.js"></script>
<script src="ext/mapbox.jquery.js"></script>
<script src="ext/mapbox.jquery.geocoder.js"></script>
<script src="ext/mapbox.share.js"></script>
</head>
<!-- Here we use `data-map` to specify the id of the div the map is in -->
<body data-map="map">
<div id="content">
<div id='branding'></div>
<div id="about">
<h1>DC's Changing Landscape</h1>
<p>Over the past few years, Washington DC has been undergoing economic, social, and demographic shifts. Property values in particular have been changing rapidly as parts of the city undergo aggressive development. See how these factors are shaping DC.</p>
<!-- Geocoder -->
<div data-control="geocode" id="search">
<form class="geocode">
<input placeholder="Search for an address" type="text">
<input type="submit" />
<div id="geocode-error"></div>
</form>
</div>
</div>
</div>
<!-- Layer switcher -->
<div id="projects" class="layers" data-control="switcher">
<a href="#building" data-zoom="14" data-lat="38.91060" data-lon="-77.00126">Building Permits, 2011</a>
<a href="#construction" data-zoom="12">City Construction Projects, 2011</a>
</div>
<div id="crime" class="layers" data-control="switcher">
<a href="#crime" data-zoom="13">Total Crime, 2011</a>
<a href="#robbery">Robbery, 2011</a>
<a href="#theft">Theft, 2011</a>
<a href="#auto">Theft from Auto, 2011</a>
</div>
<div id="map" class="map">
<div class="map-legends">
<div class="map-legend" style="display: block; ">
<div class="scale">
<label><a href="http://data.dc.gov/Main_DataCatalog.aspx?id=10">% Change in property value '10-'11</a></label>
<div><img src="img/grid-scale-2.png" /></div>
<div>
<span>-20</span>
<span>-10</span>
<span>-5</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>5</span>
<span>10</span>
<span>20</span>
</div>
</div>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAa0lEQVQIHWNkaPjPpPhitcn/f4xZDP8ZXjD8/tLBIvhsNe9/BqZ1jAwM0gyMDL8ZWHhYmLj/fmIGCzCAwH/mf8wM6kzizH8////PMBEsxvD/HdPf/5MY/wNFGMNWM0tzfhdgZeL7e39+wAcAdhYlGm+mTIMAAAAASUVORK5CYII=" style="margin-bottom: 2px;">
<label><a href="http://data.dc.gov/Main_DataCatalog.aspx?id=5">Construction project</a></label>
</div>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAV0lEQVQIHWP8//8/AxgwMjIyQDmM/52D4xkYmGYzMDIwAwX7GfasLgEKhn4GCvBAlDP8Y3h/j4MJKPAXKsAAVPmP4ezZP0wM/xkigIIfgfR3BgbGcpC5AExlIK8M2/cpAAAAAElFTkSuQmCC" style="margin-bottom: 2px;">
<label><a href="http://data.dc.gov/Main_DataCatalog.aspx?id=3">Crime incident</a></label>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>