/
index.html
executable file
·124 lines (108 loc) · 7.05 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
<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./favicon.ico">
<title>PLUTO Data Downloader powered by Carto</title>
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="css/vendor/leaflet.draw.css">
<link rel="stylesheet" href="css/styleguide.min.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="./favicon.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@chris_whong">
<meta name="twitter:title" content="PlutoPlus - A clip and ship download tool for NYC's PLUTO dataset">
<meta name="twitter:description" content="PLUTO is an amazing NYC Open Data Resource that contains a wealth of information about the city's tax lots, including zoning, # of units, tax assessments, and more. It contains information for the city's 870,000+ properties, and includes over 80 attributes for each lot. I built this downloader to help people get access to smaller chunks of the data quickly and easily for whatever they are working on.">
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/1833820/8522377/7719b904-23bb-11e5-936c-0fe760ed3621.png">
</head>
<body>
<div class="HeaderFixed HeaderFixed--blue color-white">
<div class="Grid">
<div class="Grid-inner Grid-inner--vcenter">
<div class="Grid-cell Grid-cell--col6">
<h1 class="u-iblock u-malign"><strong><i class="IconFont IconFont--size30 IconFont--clip"></i> NYC PLUTO Data Downloader</strong> Data Version: 19v1</h1>
</div>
<div class="Grid-cell Grid-cell--col6 clearfix u-txt-right">
<nav class="">
<ul class="u-ilist">
<li class="u-malign"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://chriswhong.github.io/plutoplus" data-text="Custom download tool for NYC's PLUTO #opendata built with @carto" data-via="chris_whong">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
<li class="u-malign u-lspace-xl">
<p class="button button--white">
<a class="js-about" href="#">About</a>
</p>
</li>
<li class="u-malign u-lspace-xl">
<p class="button button--white">
<a href="https://github.com/chriswhong/plutoplus" target="_blank">Fork Me on Github</a>
</p>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div id="main"></div>
<div id="modal" class="u-valign u-txt-center" style="display:none">
<div class="modal-inner u-iblock u-malign u-padding-xxl">
<div class="modal-header navbar-custom u-vspace-xxl">
<h2><strong>ABOUT</strong></h2>
</div>
<div class="modal-body u-txt-left">
<p class="u-vspace-l">PLUTO is an amazing NYC Open Data Resource that contains a wealth of information about the city's tax lots, including zoning, # of units, tax assessments, and more. It contains information for the city's 870,000+ properties, and includes over 80 attributes for each lot! That's a lot of open data!</p>
<p class="u-vspace-l"><a href="http://www.nyc.gov/html/dcp/pdf/bytes/meta_mappluto.pdf">Get the PLUTO Metadata (PDF)</a></p>
<p class="u-vspace-l">MapPLUTO (PLUTO data plus geospatial data for each lot) is so large, that the Department of City Planning <a href="http://www.nyc.gov/html/dcp/html/bytes/applbyte.shtml">publishes it by borough</a> as shapefiles. I built this downloader to help people get access to smaller chunks of the data quickly and easily for whatever they are working on.</p>
<p class="u-vspace-l">All data is version 2018v2 and can be exported as geoJSON, zipped shapefile, and CSV. Geometries are exported in WGS84 (Latitude and Longitude).</p>
<p class="u-vspace-l">If you like this project, or if you hate it, let me know by tweeting to <a href="https://twitter.com/chris_whong?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@chris_whong</a>. Pull requests are welcomed! This project was built with the CartoDB web mapping platform. <a href="http://chriswhong.com/open-data/building-a-custom-downloader-for-nycs-pluto-data/">Write-up at chriswhong.com</a>
Support open Data!</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
<script src="js/vendor/react-tooltip.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="js/vendor/leaflet.draw.js"></script>
<script type="text/javascript" src="js/Sidebar.js"></script>
<script type="text/javascript" src="js/Map.js"></script>
<script type="text/javascript" src="js/App.js"></script>
<script>
$( document ).ready(() => {
$('.js-about').click(() => {
$('#modal').fadeIn();
});
$('#modal').click(() => {
$(this).fadeOut();
});
$('.modal-inner').click((event) => {
event.stopPropagation();
});
$(document).on('keyup', (evt) => {
if (evt.keyCode == 27) {
if ($('#modal').css('display')=='block') {
$('#modal').fadeOut();
}
}
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63804901-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>