forked from cutting-room-floor/dc-properties-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (123 loc) · 6.35 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DC's Changing Landscape</title>
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/map.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
</head>
<body>
<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>
<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>
<div id="projects" class="layers">
<a data-control="layer" href="#building">Building Permits, 2011</a>
<a data-control="layer" href="#construction">City Construction Projects, 2011</a>
</div>
<div id="crime" class="layers">
<a data-control="layer" href="#crime">Total Crime, 2011</a>
<a data-control="layer" href="#robbery">Robbery, 2011</a>
<a data-control="layer" href="#theft">Theft, 2011</a>
<a data-control="layer" href="#auto">Theft from Auto, 2011</a>
</div>
<div id="map" class="map">
<div class="wax-legends">
<div class="wax-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>
<!-- External libraries and site script -->
<script src="ext/jquery.min.js"></script>
<script src="ext/modestmaps.min.js"></script>
<script src="ext/wax/wax.mm.js"></script>
<script src="ext/wax/wax.ext.js"></script>
<script src="ext/easey.js"></script>
<script src="ext/mmg.js"></script>
<script src="script.js"></script>
<!-- Site configuration -->
<script type="text/javascript">
// Make a new map in the #map element
var main = Map('map', {
// Specify the MapBox API url
api: 'http://a.tiles.mapbox.com/v3/examples.map-20v6611k,mapbox.dc-property-values.jsonp',
center: {
lat: 38.9090033656251, // Intial center point and zoom level.
lon: -77.014396158891, // To find coordinates and zoom levels
zoom: 13 // try: http://www.getlatlon.com
},
zoomRange: [0, 15], // Limit zooming on the map to these levels
features: [ // Map features (see readme.md)
'zoomwheel',
'movetips',
'zoombox',
'zoompan',
'share'
]
});
// Make a new layer switch for the map named `main`. Each layer gets
// a name and an object of settings. The layers are bound by name to
// the href hash of an element with a `data-control='layer'`, ex:
// <a data-control="layer" href="#building">Building Permits, 2011</a>
main.layers({
building: { // The name of the layer
// If api is specified, this map layer will be displayed
// on top of the base map specified when the map was initialized
api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-building.jsonp',
center: { // Optionally reposition the map.
lat: 38.910606275724, // New center point and zoom level
lon: -77.00126406355, // for the map. Specific either
zoom: 14, // lat and lon, zoom, or both.
ease: 500 // Optional time to animimate moving
} // the map in milliseconds.
},
construction: {
api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-construction.jsonp',
center: { zoom: 12, ease: 1000 }
},
crime: {
api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-crime.jsonp',
center: { zoom: 13, ease: 1000 }
},
robbery: { api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-crime-robbery.jsonp' },
theft: { api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-crime-theft.jsonp' },
auto: { api: 'http://a.tiles.mapbox.com/v3/mapbox.dc-crime-auto.jsonp' }
});
</script>
</body>
</html>