1
1
<!DOCTYPE html>
2
2
< html >
3
- < head >
4
- < title > NYC Boundaries Map | CARTO</ title >
5
- < meta name ="viewport " content ="initial-scale=1.0 " />
6
- < meta charset ="utf-8 " />
7
- <!-- Include Leaflet -->
8
- < script src ="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js "> </ script >
9
- < link
10
- href ="https://unpkg.com/leaflet@1.3.2/dist/leaflet.css "
11
- rel ="stylesheet "
12
- />
13
- <!-- Include CARTO.js -->
14
- < script src ="https://libs.cartocdn.com/carto.js/v4.1.2/carto.min.js "> </ script >
15
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js "> </ script >
16
- < link
17
- href ="https://carto.com/developers/carto-js/examples/maps/public/style.css "
18
- rel ="stylesheet "
19
- />
20
- < meta
21
- name ="viewport "
22
- content ="width=device-width,height=device-height,initial-scale=1.0 "
23
- />
24
- <!-- Global site tag (gtag.js) - Google Analytics -->
25
- <!-- Global site tag (gtag.js) - Google Analytics -->
26
- < script
27
- async
28
- src ="https://www.googletagmanager.com/gtag/js?id=UA-58265408-7 "
29
- > </ script >
30
- < script >
31
- window . dataLayer = window . dataLayer || [ ]
32
- function gtag ( ) {
33
- dataLayer . push ( arguments )
34
- }
35
- gtag ( 'js' , new Date ( ) )
36
-
37
- gtag ( 'config' , 'UA-58265408-7' )
38
- </ script >
39
- </ head >
40
-
41
- < body >
42
- < div class ="main ">
43
- < div class ="left ">
44
- < div class ="left-controls ">
45
- <!-- title, legend, and search controls -->
46
- < header >
47
- < h1 > NYC Boundaries Map</ h1 >
48
- < div id ="about ">
49
- < h5 class ="lighter ">
50
- The NYC Boundaries Map is a tool for viewing and querying
51
- overlapping administrative boundaries in NYC.
52
- </ h5 >
53
- </ div >
54
- </ header >
55
- < div class ="separator "> </ div >
56
-
57
- <!-- instructions -->
58
- < h4 > Instructions</ h4 >
59
- < h5 class ="lighter ">
60
- Select an administrative district to view the other districts that
61
- overlap it. Search for an address to view the administrative
62
- districts that the location is contained within. Toggle the buttons
63
- below to show or hide administative boundary lines.
64
- </ h5 >
65
- < div class ="separator "> </ div >
66
-
67
- <!-- Query overlapping districts -->
68
- < h4 > Query Overlapping Districts</ h4 >
69
- < div class ="select_custom ">
70
- < select id ="admin_district ">
71
- < option value ="" selected >
72
- Select an Administrative Boundary
73
- </ option >
74
- </ select >
75
- < div class ="select_arrow "> </ div >
76
- </ div >
77
- < div id ="selected_district " class ="select_custom "> </ div >
78
-
79
- < div class ="separator "> </ div >
80
-
81
- <!-- location search -->
82
- < h4 > Search for an Address</ h4 >
83
- < div id ="autosearch ">
84
- < input
85
- id ="address "
86
- onkeyup ="search_address() "
87
- placeholder ="Enter a NYC Address "
88
- onfocus ="this.value='' "
89
- type ="text "
90
- name ="address "
91
- value =""
92
- class ="search_bar "
93
- /> < br />
94
- < ul id ="suggestions "> </ ul >
95
- </ div >
96
- < input type ="submit " value ="Search " onclick ="set_address() " />
97
- < div id ="no_results ">
98
- < p > No results found.</ p >
99
- </ div >
100
- < a href ="# " onclick ="reset_map(); " class ="reset_map "> Reset Map</ a >
101
-
102
- < div class ="input_checkbox ">
103
- < label for ="map_clicked "> Enable search when map is clicked</ label >
104
- < input
105
- type ="checkbox "
106
- id ="map_clicked "
107
- name ="map_clicked "
108
- checked
109
- />
110
- </ div >
111
-
112
- < div class ="separator "> </ div >
113
-
114
- <!-- legend -->
115
- < div id ="controls ">
116
- < ul class ="actions " id ="switches "> </ ul >
117
- </ div >
118
- < div class ="separator "> </ div >
119
-
120
- <!-- logo -->
121
- < div id ="footer ">
122
- < figure >
123
- < img class ="logo " src ="static/BetaNYC_short_white_on_blue.png " />
124
- < figcaption class ="logo_caption "> A BetaNYC Tool</ figcaption >
125
- </ figure >
126
- < a
127
- class ="footer_text "
128
- href ="https://github.com/BetaNYC/Boundaries-Map/blob/master/LICENSE "
129
- > GNU General Public License</ a
130
- >
131
- < span class ="footer_text "> | </ span >
132
- < a
133
- class ="footer_text "
134
- href ="https://github.com/BetaNYC/Boundaries-Map/issues "
135
- > File a GitHub issue</ a
136
- >
137
- </ div >
138
- </ div >
139
- </ div >
140
-
141
- < div class ="right ">
142
- < div id ="map "> </ div >
143
- </ div >
144
- </ div >
145
-
146
- < div id ="info_box " class ="modal box "> </ div >
147
- < script type ="text/javascript " src ="build/bundle.js "> </ script >
148
- < script >
149
- window . addEventListener ( 'DOMContentLoaded' , function ( ) {
150
- init ( )
151
- } )
152
- </ script >
153
- </ body >
154
- </ html >
3
+
4
+ < head >
5
+ < title > NYC Boundaries Map | CARTO</ title >
6
+ < meta name ="viewport " content ="initial-scale=1.0 ">
7
+ < meta charset ="utf-8 ">
8
+ <!-- Include Leaflet -->
9
+ < script src ="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js "> </ script >
10
+ < link href ="https://unpkg.com/leaflet@1.3.2/dist/leaflet.css " rel ="stylesheet ">
11
+ <!-- Include CARTO.js -->
12
+ < script src ="https://libs.cartocdn.com/carto.js/v4.1.2/carto.min.js "> </ script >
13
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js "> </ script >
14
+ < link href ="https://carto.com/developers/carto-js/examples/maps/public/style.css " rel ="stylesheet ">
15
+ < meta name ="viewport " content ="width=device-width,height=device-height,initial-scale=1.0 " />
16
+ <!-- Global site tag (gtag.js) - Google Analytics -->
17
+ <!-- Global site tag (gtag.js) - Google Analytics -->
18
+ < script async src ="https://www.googletagmanager.com/gtag/js?id=UA-58265408-7 "> </ script >
19
+ < script >
20
+ window . dataLayer = window . dataLayer || [ ] ;
21
+ function gtag ( ) { dataLayer . push ( arguments ) ; }
22
+ gtag ( 'js' , new Date ( ) ) ;
23
+
24
+ gtag ( 'config' , 'UA-58265408-7' ) ;
25
+ </ script >
26
+ </ head >
27
+
28
+ < body >
29
+ < div class ="main ">
30
+ < div class ="left ">
31
+ < div class ="left-controls ">
32
+ <!-- title, legend, and search controls -->
33
+ < header >
34
+ < h1 > NYC Boundaries Map</ h1 >
35
+ < div id ="about ">
36
+ < h5 class ="lighter ">
37
+ The NYC Boundaries Map – is a tool for viewing and querying overlapping administrative
38
+ boundaries in NYC. </ h5 >
39
+ </ div >
40
+
41
+ </ header >
42
+ < div class ="separator "> </ div >
43
+
44
+ <!-- instructions -->
45
+ < h4 > Instructions</ h4 >
46
+ < h5 class ="lighter "> Select an administrative district to view the other districts that overlap it.
47
+ Search for an address to view the administrative districts that the location is contained within.
48
+ Toggle the buttons below to show or hide administative boundary lines. </ h5 >
49
+ < div class ="separator "> </ div >
50
+
51
+ <!-- Query overlapping districts -->
52
+ < h4 > Query Overlapping Districts</ h4 >
53
+ < div class ="select_custom ">
54
+ < select id ="admin_district ">
55
+ < option value ="" selected > Select an Administrative Boundary</ option >
56
+ </ select >
57
+ < div class ="select_arrow "> </ div >
58
+ </ div >
59
+ < div id ="selected_district " class ="select_custom "> </ div >
60
+
61
+ < div class ="separator "> </ div >
62
+
63
+ <!-- location search -->
64
+ < h4 > Search for an Address</ h4 >
65
+ < div id ="autosearch ">
66
+ < input id ="address " onkeyup ="search_address() " placeholder ="Enter a NYC Address "
67
+ onfocus ="this.value='' " type ="text " name ="address " value ="" class ="search_bar "> < br />
68
+ < ul id ="suggestions "> </ ul >
69
+ </ div >
70
+ < input type ="submit " value ="Search " onclick ="set_address() ">
71
+ < div id ="no_results ">
72
+ < p > No results found.</ p >
73
+ </ div >
74
+ < a href ="# " onclick ="reset_map(); " class ="reset_map "> Reset Map</ a >
75
+
76
+ < div class ="input_checkbox ">
77
+ < label for ="map_clicked "> Enable search when map is clicked</ label >
78
+ < input type ="checkbox " id ="map_clicked " name ="map_clicked " checked >
79
+ </ div >
80
+
81
+ < div class ="separator "> </ div >
82
+
83
+ <!-- legend -->
84
+ < div id ="controls ">
85
+ < ul class ="actions " id ="switches "> </ ul >
86
+ </ div >
87
+ < div class ="separator "> </ div >
88
+
89
+
90
+ <!-- logo -->
91
+ < div id ="footer ">
92
+ < figure >
93
+ < img class ="logo " src ="static/BetaNYC_short_white_on_blue.png " />
94
+ < figcaption class ="logo_caption "> A BetaNYC Tool</ figcaption >
95
+ </ figure >
96
+ < a class ="footer_text " href ="https://github.com/BetaNYC/Boundaries-Map/blob/master/LICENSE "> GNU
97
+ General Public License</ a > < span class ="footer_text "> | </ span >
98
+ < a class ="footer_text " href ="https://github.com/BetaNYC/Boundaries-Map/issues "> File a GitHub
99
+ issue</ a >
100
+ </ div >
101
+ </ div >
102
+
103
+ </ div >
104
+
105
+ < div class ="right ">
106
+ < div id ="map "> </ div >
107
+ </ div >
108
+
109
+ </ div >
110
+
111
+ < div id ="info_box " class ="modal box "> </ div >
112
+ < script type ="text/javascript " src ="build/bundle.js "> </ script >
113
+ < script >
114
+
115
+ window . addEventListener ( 'DOMContentLoaded' , function ( ) {
116
+ init ( ) ;
117
+ } )
118
+ </ script >
119
+ </ body >
120
+
121
+ </ html >
0 commit comments