-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
85 lines (85 loc) · 5.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<title></title>
<link href='site.css' rel='stylesheet'>
<script src='vendor/modestmaps.min.js'></script>
<script src='vendor/wax.mm.min.js'></script>
<script src='vendor/jquery-1.7.2.min.js'></script>
<script src='vendor/underscore-min.js'></script>
<script src='site.js'></script>
</head>
<body>
<div id='header' class='gradient'>
<div class='inner'>
<h1 id='title'>New York City</h1><span class='green-data'>Green Data</span>
<h6 class='description'>A showcase of <a href='https://nycopendata.socrata.com/'>NYC open data</a> for <a href='http://hackerleague.org/hackathons/reinvent-green'>#reinventgreen</a> by <a href='http://mapbox.com'>MapBox</a>, June 2012.</h6>
<a class='reinventgreen' href='http://hackerleague.org/hackathons/reinvent-green'>#reinventgreen</a>
</div>
</div>
<div id='sidebar'>
<div class='inner'>
<div id='layer-switcher'>
<ul>
<li id='street-trees'>
<a class='title' data-layer='villeda.trees-staten,villeda.trees-brooklyn,villeda.trees-bronx,villeda.trees-queens,villeda.trees-manhattan' href='#'>Street trees</a>
<div class='description'><span class='arrow'> </span>A census of street trees by borough yielded datasets with a total of 623,939 trees (<a href="https://nycopendata.socrata.com/browse?q=street%20tree%20census&sortBy=relevance">Source</a>).</div>
</li>
<li id='parks'>
<a class='title' data-layer='lxbarth.map-e1zsyom9' href='#'>Parks</a>
<div class='description'><span class='arrow'> </span>New York City Department of Parks & Recreation parks (<a href="https://nycopendata.socrata.com/Facilities-and-Structures/Map-of-Parks/jc79-4imn/about">Source</a>).</div>
</li>
<li id='cool-roofs'>
<a class='title' data-layer='lxbarth.map-wpqmws96' href='#'>Cool roof buildings</a>
<div class='description'><span class='arrow'> </span>There are over 200 cool roof buildings with a total surface of over a million square feet in New York City. This newly opened dataset identifies them by street address and geo location (<a href="https://nycopendata.socrata.com/Environmental-Sustainability/NYC-Cool-Roofs-Buildings/uuxn-wzxe">Source</a>).</div>
</li>
<li id='energy'>
<a class='title' data-layer='lxbarth.map-v9o1vc83' href='#'>Energy consumption</a>
<div class='description'><span class='arrow'> </span>Energy consumption by ZIP code in kWh. Blue is lower consumption, magenta higher consumption (<a href="https://nycopendata.socrata.com/Environmental-Sustainability/Electric-Consumption-by-ZIP-Code-2010/74cu-ncm4">Source</a>)</div>
</li>
<li id='buildings-footprints'>
<a class='title' data-layer='villeda.nyc-buildings' href='#'>Building perimeter outlines</a>
<div class='description'><span class='arrow'> </span>Rich dataset containing over one million building footprints of New York City, here colored by footprint area (<a href="https://nycopendata.socrata.com/Facilities-and-Structures/Building-Perimeter-Outlines/r7fd-yd5e">Source</a>)</div>
</li>
<li id='greenstreets'>
<a class='title' data-layer='villeda.map-8lrdm572' href='#'>Green streets</a>
<div class='description'><span class='arrow'> </span>Small planted areas that are maintained as <a href="http://www.nycgovparks.org/trees">Greenstreets</a> (<a href="https://nycopendata.socrata.com/Environmental-Sustainability/Greenstreets/p23h-ci72">Source</a>).</div>
</li>
</ul>
</div>
<div class='notes'>
<div id='more-data'>
<a href='https://nycopendata.socrata.com/' title='More from the NYC OpenData Catalog'>Explore Data Catalog</a>
</div>
All data from <a href='https://nycopendata.socrata.com/'>NYC Open Data portal</a> and <a href='http://openstreetmap.org'>OpenStreetMap</a>. Maps rendered with <a href='http://mapbox.com/tilemill/'>TileMill</a> and hosted on <a href='http://mapbox.com/plans/'>MapBox</a>. All site and TileMill map sources <a href='https://github.com/mapbox/reinventgreen'>available on GitHub</a>. This is <em>not</em> an official site by the NYC government.
</div>
</div>
</div>
<div id='map' class='fullscreen'>
<div id ='share'>
<a href='#' class='share button'>Share</a>
</div>
</div>
<div class='modal share'>
<div class='modal-box'>
<a href='#' class='close button'>×</a>
<h2>Share</h2>
<div class='tilejson'>
<textarea></textarea>
<h3>TileJSON URL</h3>
Use with a TileJSON <a href='http://mapbox.com/wax/'>Wax</a> connector or the <a href='http://mapbox.com/mobile/'>MapBox iOS SDK</a>.
</div>
<div class='embed'>
<textarea></textarea>
<h3>Embed code</h3>
Copy and paste this HTML into your website or blog to show this map.
</div>
</div>
</div>
<div id='attribution'></div>
</body>
</html>