-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
134 lines (131 loc) · 7.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADNY Placemaking Map</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
<div class="nav">
<div>
<img src="img/logo.png" alt="logo">
<span id="title">PLACEMAKING MAP DATABASE</span>
</div>
<div class="navButtons">
<a href="data.html"><div class="navButton" id="data"><h2>DATA</h2></div></a>
<a href="https://github.com/DowntownAlliance/Map-Database" target="_blank" rel="noopener noreferrer"><div class="navButton" id="github"><h2>GITHUB</h2></div></a>
</div>
</div>
<div class="row">
<div class="column1" id="mapContainer">
<div id="legend" class="legend-container">
<div style="height: 25px;"><b>ADNY Data</b></div>
<div class="legend-item" id="adny-public-spaces-icon">
<span class="legend-icon" style="background-color: #D2042D; border-radius: 50%;"></span>
<span class="legend-label">Public Spaces</span>
</div>
<div class="legend-item off" id="adny-art-icon">
<span class="legend-icon" style="background-color: #b433f9; border-radius: 50%;"></span>
<span class="legend-label">Public Art</span>
</div>
<div class="legend-item off" id="adny-events-icon">
<span class="legend-icon" style="background-color: #fc59a3; border-radius: 50%;"></span>
<span class="legend-label">Placemaking Events</span>
</div>
<div class="legend-item off" id="exteros-locations-icon">
<span class="legend-icon" style="background-color: #DFFF00;
border-radius: 50%;
width: 7px;
height: 7px;
margin: 0 14.5px;
"></span>
<span class="legend-label">Exteros Locations</span>
</div>
<div class="legend-item" id="adny-pedestrian-estimation-icon" style="flex-direction: column; align-items: baseline; gap:3px;">
<span class="legend-icon"
style="background: linear-gradient(to right, rgba(173, 216, 230, 0.578), rgba(178, 34, 34, 0.561));
border:0.4px solid black;
width: 80%;"></span>
<span class="legend-label" style="padding-left: 5px;">Pedestrian Estimate</span>
</div>
<div style="height: 25px;"><b>NYC Open Data</b></div>
<div class="legend-item off" id="nyc-pops-points-icon">
<span class="legend-icon" style="background-color: #0000FF; border-radius: 50%;"></span>
<span class="legend-label">POPS Points</span>
</div>
<div class="legend-item off" id="nyc-public-restrooms-icon">
<span class="legend-icon" style="background-color: #90d2f5; border-radius: 50%;"></span>
<span class="legend-label">Public Restrooms</span>
</div>
<div class="legend-item off" id="nyc-active-sheds-icon">
<span class="legend-icon" style="background-color: #FFBF00; border-radius: 50%;"></span>
<span class="legend-label">Active Sheds</span>
</div>
<div class="legend-item off" id="nyc-parks-polygons-icon">
<span class="legend-icon" style="background-color: #93c572f2; border: none;"></span>
<span class="legend-label">Parks Polygons</span>
</div>
<div class="legend-item off" id="nyc-landmarks-icon">
<span class="legend-icon" style="background-color: #0000ff36; border: none;"></span>
<span class="legend-label">Landmarks</span>
</div>
<div class="legend-item" id="nyc-openstreet-lines-icon">
<span class="legend-icon" style="background-color: #aaff00dc; border: none; height: 5px;"></span>
<span class="legend-label">Openstreet Lines</span>
</div>
<div class="legend-item off" id="nyc-pavement-rating-icon">
<span class="legend-icon" style="background-color: #3240a8; border: none; height: 2px; margin-right: 0; margin-left: 10.5px; width:5px"></span>
<span class="legend-icon" style="background-color: #ADD8E6; border: none; height: 2px; margin: 0; width:5px"></span>
<span class="legend-icon" style="background-color: #FF0000; border: none; height: 2px; margin-left: 0; margin-right: 10.5px;width:5px"></span>
<span class="legend-label">Street Condition <br>(Good, Fair, Poor)</span>
</div>
<div class="legend-item off" id="nyc-street-construction-icon">
<span class="legend-icon" style="background-color: #FFBF00; border: none; height: 5px;"></span>
<span class="legend-label">Street Construction</span>
</div>
<div class="legend-item off" id="nyc-bike-paths-icon">
<span class="legend-icon" style="background-color: #52de57; border: none; height: 2px;"></span>
<span class="legend-label">NYC Bike Paths</span>
</div>
<div class="legend-item">
<span class="legend-icon" style="background-color: red; border: none; height: 2px;"></span>
<span class="legend-label">ADNY Boundary</span>
</div>
<div class="legend-item off" id="nyc-street-widths-icon">
<span class="legend-icon" style="background-color: #ff4500; border: none; height: 2px; margin-right: 0; margin-left: 8px; width:5px"></span>
<span class="legend-icon" style="background-color: #ff8c00; border: none; height: 2px; margin: 0; width:5px"></span>
<span class="legend-icon" style="background-color: #98fb98; border: none; height: 2px; margin: 0; width:5px"></span>
<span class="legend-icon" style="background-color: #00bfff; border: none; height: 2px; margin-left: 0; margin-right: 8px; width:5px"></span>
<span class="legend-label">Street Widths <br>(Narrow, Fair, Wide, Very Wide)</span>
</div>
</div>
<div id="map"></div>
<div id="estimation-info">
ESTIMATED PEDESTRIAN COUNT <br/> <span id="pedestrian-count">-</span> people pass through a day
</div>
</div>
<div class="column2">
<div id='menu'>
</div>
<div id="exports">
<button id='downloadButton'>Download Map</button>
<button id='dataDownloadButton'>Download Data</button>
</div>
</div>
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>