Hugging Face's logo

Spaces:
thanthamky
/
demo-webmap-analysis
Running

App Files Community
thanthamky commited on
Commit
d3fca18
·
verified ·
1 Parent(s): c0567a0

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +987 -19
index.html CHANGED
@@ -1,19 +1,987 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Webmap 201</title>
6
+ <link rel="stylesheet" href="src/leaflet.css">
7
+ <link rel="stylesheet" href="src/css/bootstrap.css">
8
+ <link rel="stylesheet" href="src/plugins/L.Control.MousePosition.css">
9
+ <link rel="stylesheet" href="src/plugins/L.Control.Sidebar.css">
10
+ <link rel="stylesheet" href="src/plugins/Leaflet.PolylineMeasure.css">
11
+ <link rel="stylesheet" href="src/plugins/easy-button.css">
12
+ <link rel="stylesheet" href="src/plugins/leaflet-styleeditor/css/Leaflet.StyleEditor.css">
13
+ <link rel="stylesheet" href="src/css/font-awesome.min.css">
14
+ <link rel="stylesheet" href="src/plugins/leaflet.awesome-markers.css">
15
+ <link rel="stylesheet" href="src/plugins/leaflet-mapkey/MapkeyIcons.css">
16
+ <link rel="stylesheet" href="src/plugins/leaflet-mapkey/L.Icon.Mapkey.css">
17
+ <link rel="stylesheet" href="src/plugins/MarkerCluster.css">
18
+ <link rel="stylesheet" href="src/plugins/MarkerCluster.Default.css">
19
+ <link rel="stylesheet" href="src/jquery-ui.min.css">
20
+
21
+ <script src="src/leaflet-src.js"></script>
22
+ <script src="src/jquery-3.2.0.min.js"></script>
23
+ <script src="src/plugins/L.Control.MousePosition.js"></script>
24
+ <script src="src/plugins/L.Control.Sidebar.js"></script>
25
+ <script src="src/plugins/Leaflet.PolylineMeasure.js"></script>
26
+ <script src="src/plugins/easy-button.js"></script>
27
+ <script src="src/plugins/leaflet-providers.js"></script>
28
+ <script src="src/plugins/leaflet-styleeditor/javascript/Leaflet.StyleEditor.js"></script>
29
+ <script src="src/plugins/leaflet-styleeditor/javascript/Leaflet.StyleForms.js"></script>
30
+ <script src="src/plugins/leaflet.ajax.min.js"></script>
31
+ <script src="src/plugins/leaflet.sprite.js"></script>
32
+ <script src="src/plugins/leaflet.awesome-markers.min.js"></script>
33
+ <script src="src/plugins/leaflet-mapkey/L.Icon.Mapkey.js"></script>
34
+ <script src="src/plugins/leaflet.markercluster.js"></script>
35
+ <script src="src/plugins/leaflet.geometryutil.js"></script>
36
+ <script src="src/jquery-ui.min.js"></script>
37
+ <script src="src/turf.min.js"></script>
38
+
39
+ <!-- *************** Begin Leaflet.Draw-->
40
+
41
+ <script src="src/plugins/leaflet-draw/Leaflet.draw.js"></script>
42
+ <script src="src/plugins/leaflet-draw/Leaflet.Draw.Event.js"></script>
43
+ <link rel="stylesheet" href="src/plugins/leaflet-draw/leaflet.draw.css"/>
44
+
45
+ <script src="src/plugins/leaflet-draw/Toolbar.js"></script>
46
+ <script src="src/plugins/leaflet-draw/Tooltip.js"></script>
47
+
48
+ <script src="src/plugins/leaflet-draw/ext/GeometryUtil.js"></script>
49
+ <script src="src/plugins/leaflet-draw/ext/LatLngUtil.js"></script>
50
+ <script src="src/plugins/leaflet-draw/ext/LineUtil.Intersect.js"></script>
51
+ <script src="src/plugins/leaflet-draw/ext/Polygon.Intersect.js"></script>
52
+ <script src="src/plugins/leaflet-draw/ext/Polyline.Intersect.js"></script>
53
+ <script src="src/plugins/leaflet-draw/ext/TouchEvents.js"></script>
54
+
55
+ <script src="src/plugins/leaflet-draw/draw/DrawToolbar.js"></script>
56
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Feature.js"></script>
57
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.SimpleShape.js"></script>
58
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Polyline.js"></script>
59
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Circle.js"></script>
60
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Marker.js"></script>
61
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Polygon.js"></script>
62
+ <script src="src/plugins/leaflet-draw/draw/handler/Draw.Rectangle.js"></script>
63
+
64
+
65
+ <script src="src/plugins/leaflet-draw/edit/EditToolbar.js"></script>
66
+ <script src="src/plugins/leaflet-draw/edit/handler/EditToolbar.Edit.js"></script>
67
+ <script src="src/plugins/leaflet-draw/edit/handler/EditToolbar.Delete.js"></script>
68
+
69
+ <script src="src/plugins/leaflet-draw/Control.Draw.js"></script>
70
+
71
+ <script src="src/plugins/leaflet-draw/edit/handler/Edit.Poly.js"></script>
72
+ <script src="src/plugins/leaflet-draw/edit/handler/Edit.SimpleShape.js"></script>
73
+ <script src="src/plugins/leaflet-draw/edit/handler/Edit.Circle.js"></script>
74
+ <script src="src/plugins/leaflet-draw/edit/handler/Edit.Rectangle.js"></script>
75
+ <script src="src/plugins/leaflet-draw/edit/handler/Edit.Marker.js"></script>
76
+
77
+ <!-- ************** End of Lealet Draw-->
78
+
79
+ <style>
80
+ #mapdiv {
81
+ height:100vh;
82
+ }
83
+
84
+ .col-xs-12, .col-xs-6, .col-xs-4 {
85
+ padding:3px;
86
+ }
87
+
88
+ #divProject {
89
+ background-color: beige;
90
+ }
91
+
92
+ #divBUOWL {
93
+ background-color: #ffffb3;
94
+ }
95
+
96
+ #divEagle {
97
+ background-color: #ccffb3;
98
+ }
99
+
100
+ #divRaptor {
101
+ background-color: #e6ffff;
102
+ }
103
+
104
+ .errorMsg {
105
+ padding:0;
106
+ text-align:center;
107
+ background-color:darksalmon;
108
+ }
109
+
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <div id="side-bar" class="col-md-3">
114
+ <button id='btnLocate' class='btn btn-primary btn-block'>Locate</button><br>
115
+ <div id="divProject" class="col-xs-12">
116
+ <div id="divProjectLabel" class="text-center col-xs-12">
117
+ <h4 id="lblProject">Linear Projects</h4>
118
+ </div>
119
+ <div id="divProjectError" class="errorMsg col-xs-12"></div>
120
+ <div id="divFindProject" class="form-group has-error">
121
+ <div class="col-xs-6">
122
+ <input type="text" id="txtFindProject" class="form-control" placeholder="Project ID">
123
+ </div>
124
+ <div class="col-xs-6">
125
+ <button id="btnFindProject" class="btn btn-primary btn-block" disabled>Find Project</button>
126
+ </div>
127
+ </div>
128
+ <div id="divFilterProject" class="col-xs-12">
129
+ <div class="col-xs-4">
130
+ <input type='checkbox' name='fltProject' value='Pipeline' checked>Pipelines<br>
131
+ <input type='checkbox' name='fltProject' value='Road' checked>Access Roads
132
+ <button id="btnProjectFilterAll" class="btn btn-primary btn-block">Check All</button>
133
+ </div>
134
+ <div class="col-xs-4">
135
+ <input type='checkbox' name='fltProject' value='Electric' checked>Electric Lines<br>
136
+ <input type='checkbox' name='fltProject' value='Extraction' checked>Extractions
137
+ <button id="btnProjectFilterNone" class="btn btn-primary btn-block">Uncheck All</button>
138
+ </div>
139
+ <div class="col-xs-4">
140
+ <input type='checkbox' name='fltProject' value='Flowline' checked>Flowlines<br>
141
+ <input type='checkbox' name='fltProject' value='Other' checked>Other
142
+ <button id="btnProjectFilter" class="btn btn-primary btn-block">Filter</button>
143
+ </div>
144
+ </div>
145
+ <div class="" id="divProjectData"></div>
146
+ </div>
147
+ <div id="divBUOWL" class="col-xs-12">
148
+ <div id="divBUOWLLabel" class="text-center col-xs-12">
149
+ <h4 id="lblBUOWL">BUOWL Habitat</h4>
150
+ </div>
151
+ <div id="divBUOWLError" class="errorMsg col-xs-12"></div>
152
+ <div id="divFindBUOWL" class="form-group has-error">
153
+ <div class="col-xs-6">
154
+ <input type="text" id="txtFindBUOWL" class="form-control" placeholder="Habitat ID">
155
+ </div>
156
+ <div class="col-xs-6">
157
+ <button id="btnFindBUOWL" class="btn btn-primary btn-block" disabled>Find BUOWL</button>
158
+ </div>
159
+ </div>
160
+ <div id="divFilterBUOWL" class="col-xs-12">
161
+ <div class="col-xs-4">
162
+ <input type='radio' name='fltBUOWL' value='ALL' checked>All
163
+ </div>
164
+ <div class="col-xs-4">
165
+ <input type='radio' name='fltBUOWL' value='Yes'>Historically Occupied
166
+ </div>
167
+ <div class="col-xs-4">
168
+ <input type='radio' name='fltBUOWL' value='Undetermined'>Undetermined
169
+ </div>
170
+ </div>
171
+ <div class="" id="divBUOWLData"></div>
172
+ </div>
173
+ <div id="divEagle" class="col-xs-12">
174
+ <div id="divEagleLabel" class="text-center col-xs-12">
175
+ <h4 id="lblEagle">Eagle Nests</h4>
176
+ </div>
177
+ <div id="divEagleError" class="errorMsg col-xs-12"></div>
178
+ <div id="divFindEagle" class="form-group has-error">
179
+ <div class="col-xs-6">
180
+ <input type="text" id="txtFindEagle" class="form-control" placeholder="Eagle Nest ID">
181
+ </div>
182
+ <div class="col-xs-6">
183
+ <button id="btnFindEagle" class="btn btn-primary btn-block" disabled>Find Eagle Nest</button>
184
+ </div>
185
+ </div>
186
+ <div id="divFilterEagle" class="col-xs-12">
187
+ <div class="col-xs-4">
188
+ <input type='radio' name='fltEagle' value='ALL' checked>All
189
+ </div>
190
+ <div class="col-xs-4">
191
+ <input type='radio' name='fltEagle' value='ACTIVE NEST'>Active
192
+ </div>
193
+ <div class="col-xs-4">
194
+ <input type='radio' name='fltEagle' value='INACTIVE LOCATION'>Inactive
195
+ </div>
196
+ </div>
197
+ <div class="" id="divEagleData"></div>
198
+ </div>
199
+ <div id="divRaptor" class="col-xs-12">
200
+ <div id="divRaptorLabel" class="text-center col-xs-12">
201
+ <h4 id="lblRaptor">Raptor Nests</h4>
202
+ </div>
203
+ <div id="divRaptorError" class="errorMsg col-xs-12"></div>
204
+ <div id="divFindRaptor" class="form-group has-error">
205
+ <div class="col-xs-6">
206
+ <input type="text" id="txtFindRaptor" class="form-control" placeholder="Raptor Nest ID">
207
+ </div>
208
+ <div class="col-xs-6">
209
+ <button id="btnFindRaptor" class="btn btn-primary btn-block" disabled>Find Raptor Nest</button>
210
+ </div>
211
+ </div>
212
+ <div id="divFilterRaptor" class="col-xs-12">
213
+ <div class="col-xs-3">
214
+ <input type='radio' name='fltRaptor' value='ALL' checked>All
215
+ </div>
216
+ <div class="col-xs-3">
217
+ <input type='radio' name='fltRaptor' value='ACTIVE NEST'>Active
218
+ </div>
219
+ <div class="col-xs-3">
220
+ <input type='radio' name='fltRaptor' value='INACTIVE NEST'>Inactive
221
+ </div>
222
+ <div class="col-xs-3">
223
+ <input type='radio' name='fltRaptor' value='FLEDGED NEST'>Fledged
224
+ </div>
225
+ </div>
226
+ <div class="" id="divRaptorData"></div>
227
+ </div>
228
+ </div>
229
+ <div id="mapdiv" class="col-md-12"></div>
230
+ <script>
231
+ var mymap;
232
+ var lyrOSM;
233
+ var lyrWatercolor;
234
+ var lyrTopo;
235
+ var lyrImagery;
236
+ var lyrOutdoors;
237
+ var lyrEagleNests;
238
+ var lyrRaptorNests;
239
+ var lyrClientLines;
240
+ var lyrClientLinesBuffer;
241
+ var lyrBUOWL;
242
+ var lyrBUOWLbuffer;
243
+ var jsnBUOWLbuffer;
244
+ var lyrGBH;
245
+ var lyrSearch;
246
+ var lyrMarkerCluster;
247
+ var mrkCurrentLocation;
248
+ var fgpDrawnItems;
249
+ var ctlAttribute;
250
+ var ctlScale;
251
+ var ctlMouseposition;
252
+ var ctlMeasure;
253
+ var ctlEasybutton;
254
+ var ctlSidebar;
255
+ var ctlLayers;
256
+ var ctlDraw;
257
+ var ctlStyle;
258
+ var objBasemaps;
259
+ var objOverlays;
260
+ var arProjectIDs = [];
261
+ var arHabitatIDs = [];
262
+ var arEagleIDs = [];
263
+ var arRaptorIDs = [];
264
+
265
+ $(document).ready(function(){
266
+
267
+ // ********* Map Initialization ****************
268
+
269
+ mymap = L.map('mapdiv', {center:[40.18, -104.83], zoom:11, attributionControl:false});
270
+
271
+ ctlSidebar = L.control.sidebar('side-bar').addTo(mymap);
272
+
273
+ ctlEasybutton = L.easyButton('glyphicon-transfer', function(){
274
+ ctlSidebar.toggle();
275
+ }).addTo(mymap);
276
+
277
+ ctlAttribute = L.control.attribution().addTo(mymap);
278
+ ctlAttribute.addAttribution('OSM');
279
+ ctlAttribute.addAttribution('&copy; <a href="http://millermountain.com">Miller Mountain LLC</a>');
280
+
281
+ ctlScale = L.control.scale({position:'bottomleft', metric:false, maxWidth:200}).addTo(mymap);
282
+
283
+ ctlMouseposition = L.control.mousePosition().addTo(mymap);
284
+
285
+ ctlStyle = L.control.styleEditor({position:'topright', openOnLeafletDraw:false}).addTo(mymap);
286
+ ctlMeasure = L.control.polylineMeasure().addTo(mymap);
287
+
288
+ // *********** Layer Initialization **********
289
+
290
+ lyrOSM = L.tileLayer.provider('OpenStreetMap.Mapnik');
291
+ lyrTopo = L.tileLayer.provider('OpenTopoMap');
292
+ lyrImagery = L.tileLayer.provider('Esri.WorldImagery');
293
+ lyrOutdoors = L.tileLayer.provider('Thunderforest.Outdoors');
294
+ lyrWatercolor = L.tileLayer.provider('Stamen.Watercolor');
295
+ mymap.addLayer(lyrOSM);
296
+
297
+ fgpDrawnItems = new L.FeatureGroup();
298
+ fgpDrawnItems.addTo(mymap);
299
+
300
+ lyrEagleNests = L.geoJSON.ajax('data/wildlife_eagle.geojson', {pointToLayer:returnEagleMarker, filter:filterEagle}).addTo(mymap);
301
+ lyrEagleNests.on('data:loaded', function(){
302
+ arEagleIDs.sort(function(a,b){return a-b});
303
+ $("#txtFindEagle").autocomplete({
304
+ source:arEagleIDs
305
+ });
306
+ });
307
+
308
+ lyrMarkerCluster = L.markerClusterGroup();
309
+ lyrRaptorNests = L.geoJSON.ajax('data/wildlife_raptor.geojson', {pointToLayer:returnRaptorMarker, filter:filterRaptor});
310
+ lyrRaptorNests.on('data:loaded', function(){
311
+ arRaptorIDs.sort(function(a,b){return a-b});
312
+ $("#txtFindRaptor").autocomplete({
313
+ source:arRaptorIDs
314
+ });
315
+ lyrMarkerCluster.clearLayers();
316
+ lyrMarkerCluster.addLayer(lyrRaptorNests);
317
+ lyrMarkerCluster.addTo(mymap);
318
+ });
319
+
320
+ lyrClientLinesBuffer = L.featureGroup();
321
+ lyrClientLines = L.geoJSON.ajax('data/client_lines.geojson', {style:styleClientLinears, onEachFeature:processClientLinears, filter:filterClientLines}).addTo(mymap);
322
+ lyrClientLines.on('data:loaded', function(){
323
+ arProjectIDs.sort(function(a,b){return a-b});
324
+ $("#txtFindProject").autocomplete({
325
+ source:arProjectIDs
326
+ });
327
+ lyrClientLinesBuffer.addTo(mymap);
328
+ lyrClientLines.bringToFront();
329
+ });
330
+
331
+ lyrBUOWL = L.geoJSON.ajax('data/wildlife_buowl.geojson', {style:styleBUOWL, onEachFeature:processBUOWL, filter:filterBUOWL}).addTo(mymap);
332
+ lyrBUOWL.on('data:loaded', function(){
333
+ arHabitatIDs.sort(function(a,b){return a-b});
334
+ $("#txtFindBUOWL").autocomplete({
335
+ source:arHabitatIDs
336
+ });
337
+ jsnBUOWLbuffer = turf.buffer(lyrBUOWL.toGeoJSON(), 0.3, 'kilometers');
338
+ console.log(jsnBUOWLbuffer);
339
+ lyrBUOWLbuffer = L.geoJSON(jsnBUOWLbuffer, {style:{color:'yellow', dashArray:'5,5', fillOpacity:0}}).addTo(mymap);
340
+ lyrBUOWL.bringToFront();
341
+ });
342
+
343
+ lyrGBH = L.geoJSON.ajax('data/wildlife_gbh.geojson', {style:{color:'fuchsia'}}).bindTooltip("GBH Nesting Area").addTo(mymap);
344
+
345
+ // ********* Setup Layer Control ***************
346
+
347
+ objBasemaps = {
348
+ "Open Street Maps": lyrOSM,
349
+ "Topo Map":lyrTopo,
350
+ "Imagery":lyrImagery,
351
+ "Outdoors":lyrOutdoors,
352
+ "Watercolor":lyrWatercolor
353
+ };
354
+
355
+ objOverlays = {
356
+ "Client Linears":lyrClientLines,
357
+ "Burrowing Owl Habitat":lyrBUOWL,
358
+ "Eagle Nest":lyrEagleNests,
359
+ "Raptor Nest":lyrMarkerCluster,
360
+ "GBH Rookeries":lyrGBH,
361
+ "Drawn Items":fgpDrawnItems
362
+ };
363
+
364
+ ctlLayers = L.control.layers(objBasemaps, objOverlays).addTo(mymap);
365
+
366
+ // ********** Setup Draw Control ****************
367
+
368
+ ctlDraw = new L.Control.Draw({
369
+ draw:{
370
+ polygon:false,
371
+ circle:false,
372
+ rectangle:false,
373
+ },
374
+ edit:{
375
+ featureGroup:fgpDrawnItems,
376
+ remove:false
377
+ }
378
+ });
379
+ ctlDraw.addTo(mymap);
380
+
381
+ mymap.on('draw:created', function(e){
382
+ switch (e.layerType) {
383
+ case 'marker':
384
+ var llRef = e.layer.getLatLng();
385
+ var strTable = "<table class='table table-hover'>";
386
+ strTable += "<tr><th>Constraint</th><th>ID</th><th>Type</th><th>Distance</th><th>Direction</th></tr>";
387
+ var nrBUOWL = returnClosestlayer(lyrBUOWL, llRef);
388
+ strTable += "<tr><td>BUOWL</td><td>"+nrBUOWL.att.habitat_id+"</td><td>"+nrBUOWL.att.recentstatus+"</td><td>"+nrBUOWL.distance.toFixed(0)+" m</td><td>"+nrBUOWL.bearing.toFixed(0)+"</td></tr>";
389
+ var nrEagle = returnClosestlayer(lyrEagleNests, llRef);
390
+ strTable += "<tr><td>Eagle Nest</td><td>"+nrEagle.att.nest_id+"</td><td>"+nrEagle.att.status+"</td><td>"+nrEagle.distance.toFixed(0)+" m</td><td>"+nrEagle.bearing.toFixed(0)+"</td></tr>";
391
+ var nrRaptor = returnClosestlayer(lyrRaptorNests, llRef);
392
+ strTable += "<tr><td>Raptor Nest</td><td>"+nrRaptor.att.Nest_ID+"</td><td>"+nrRaptor.att.recentspecies+"<br>"+nrRaptor.att.recentstatus+"</td><td>"+nrRaptor.distance.toFixed(0)+" m</td><td>"+nrRaptor.bearing.toFixed(0)+"</td></tr>";
393
+ var nrGBH = returnClosestlayer(lyrGBH, llRef);
394
+ strTable += "<tr><td>GBH Rookery</td><td>N/A</td><td>N/A</td><td>"+(nrGBH.distance+250).toFixed(0)+" m</td><td>"+nrGBH.bearing.toFixed(0)+"</td></tr>";
395
+ strTable += "</table>";
396
+ fgpDrawnItems.addLayer(e.layer.bindPopup(strTable, {maxWidth:400}));
397
+ break;
398
+ case 'polyline':
399
+ var line = e.layer.toGeoJSON();
400
+ var colEagle = summarizePointsByLine(line, 0.8, lyrEagleNests.toGeoJSON(), 'status');
401
+ var sumEagle = summarizeArray(colEagle.features[0].properties.statusVals);
402
+ var strPopup = "Eagles";
403
+ for (var i=0;i<sumEagle[0].length;i++) {
404
+ strPopup += "<br> "+sumEagle[0][i]+": "+sumEagle[1][i];
405
+ }
406
+
407
+ var arRTH = returnLayersByAttribute(lyrRaptorNests, 'recentspecies', 'Red-tail Hawk');
408
+ var fcRTH = L.featureGroup(arRTH).toGeoJSON();
409
+ var colRTH = summarizePointsByLine(line, 0.533, fcRTH, 'recentstatus');
410
+ var sumRTH = summarizeArray(colRTH.features[0].properties.recentstatusVals);
411
+ strPopup += "<br>Hawks<br>&nbsp;&nbsp;Red-tail Hawk";
412
+ for (var i=0;i<sumRTH[0].length;i++) {
413
+ strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+sumRTH[0][i]+": "+sumRTH[1][i];
414
+ }
415
+
416
+ var arSWH = returnLayersByAttribute(lyrRaptorNests, 'recentspecies', 'Swainsons Hawk');
417
+ var fcSWH = L.featureGroup(arSWH).toGeoJSON();
418
+ var colSWH = summarizePointsByLine(line, 0.533, fcSWH, 'recentstatus');
419
+ var sumSWH = summarizeArray(colSWH.features[0].properties.recentstatusVals);
420
+ strPopup += "<br>Hawks<br>&nbsp;&nbsp;Swainsons Hawk";
421
+ for (var i=0;i<sumSWH[0].length;i++) {
422
+ strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+sumSWH[0][i]+": "+sumSWH[1][i];
423
+ }
424
+
425
+ var bufLine = turf.buffer(line, 0.05, 'kilometers');
426
+ var intBUOWL = intersectPolyByPolyFC(bufLine, lyrBUOWL.toGeoJSON());
427
+ var intBUOWLline = intersectLineByPolyFC(line, lyrBUOWLbuffer.toGeoJSON());
428
+
429
+ L.geoJSON(intBUOWL, {style:{color:'red', weight:5}}).addTo(mymap);
430
+ L.geoJSON(intBUOWLline, {style:{color:'red', weight:5}}).addTo(mymap);
431
+
432
+ var arBUOWLsummary = summarizePolyFC(intBUOWL, 'hist_occup');
433
+ strPopup += "<br>BUOWL<br>&nbsp;&nbsp;Direct Impacts";
434
+ for (var i=0;i<arBUOWLsummary[0].length;i++) {
435
+ strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+arBUOWLsummary[0][i]+": "+arBUOWLsummary[1][i]+" ("+(arBUOWLsummary[2][i]/4046.9).toFixed(1)+" acres)";
436
+ }
437
+
438
+ var arBUOWLsummary = summarizeLineFC(intBUOWLline, 'hist_occup');
439
+ console.log(arBUOWLsummary);
440
+ strPopup += "<br>BUOWL<br>&nbsp;&nbsp;Indirect Impacts";
441
+ for (var i=0;i<arBUOWLsummary[0].length;i++) {
442
+ strPopup += "<br>&nbsp;&nbsp;&nbsp;&nbsp;"+arBUOWLsummary[0][i]+": "+arBUOWLsummary[1][i]+" ("+(arBUOWLsummary[2][i]).toFixed(3)+" km)";
443
+ }
444
+
445
+ fgpDrawnItems.addLayer(e.layer.bindPopup(strPopup));
446
+ e.layer.openPopup();
447
+ break;
448
+ }
449
+ });
450
+
451
+ // ************ Location Events **************
452
+
453
+ mymap.on('locationfound', function(e) {
454
+ console.log(e);
455
+ if (mrkCurrentLocation) {
456
+ mrkCurrentLocation.remove();
457
+ }
458
+ mrkCurrentLocation = L.circle(e.latlng, {radius:e.accuracy/2}).addTo(mymap);
459
+ mymap.setView(e.latlng, 14);
460
+ });
461
+
462
+ mymap.on('locationerror', function(e) {
463
+ console.log(e);
464
+ alert("Location was not found");
465
+ })
466
+
467
+ });
468
+
469
+ // ********* BUOWL Functions
470
+
471
+ function styleBUOWL(json){
472
+ var att = json.properties;
473
+ switch (att.hist_occup){
474
+ case 'Yes':
475
+ return {color:'deeppink', fillColor:'yellow'};
476
+ break;
477
+ case 'Undetermined':
478
+ return {color:'yellow'};
479
+ break;
480
+ }
481
+ }
482
+
483
+ function processBUOWL(json, lyr){
484
+ var att = json.properties;
485
+ lyr.bindTooltip("<h4>Habitat ID: "+att.habitat_id+"</h4>Historically Occupied: "+att.hist_occup+"<br>Status: "+att.recentstatus);
486
+ arHabitatIDs.push(att.habitat_id.toString())
487
+ }
488
+
489
+ function filterBUOWL(json){
490
+ var att = json.properties;
491
+ if (att.recentstatus=='REMOVED') {
492
+ return false;
493
+ } else {
494
+ var optFilter = $("input[name=fltBUOWL]:checked").val();
495
+ if (optFilter=='ALL') {
496
+ return true;
497
+ } else {
498
+ return (att.hist_occup==optFilter);
499
+ }
500
+ }
501
+ }
502
+
503
+ $("#txtFindBUOWL").on('keyup paste', function(){
504
+ var val = $("#txtFindBUOWL").val();
505
+ testLayerAttribute(arHabitatIDs, val, "Habitat ID", "#divFindBUOWL", "#divBUOWLError", "#btnFindBUOWL");
506
+ });
507
+
508
+ $("#btnFindBUOWL").click(function(){
509
+ var val = $("#txtFindBUOWL").val();
510
+ var lyr = returnLayerByAttribute(lyrBUOWL,'habitat_id',val);
511
+ if (lyr) {
512
+ if (lyrSearch) {
513
+ lyrSearch.remove();
514
+ }
515
+ lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5, fillOpacity:0}}).addTo(mymap);
516
+ mymap.fitBounds(lyr.getBounds().pad(1));
517
+ var att = lyr.feature.properties;
518
+ $("#divBUOWLData").html("<h4 class='text-center'>Attributes</h4><h5>Habitat: "+att.habitat+"</h5><h5>Historically Occupied: "+att.hist_occup+"</h5><h5>Recent Status: "+att.recentstatus+"</h5>");
519
+ $("#divBUOWLError").html("");
520
+
521
+ fgpDrawnItems.clearLayers();
522
+ fgpDrawnItems.addLayer(lyr);
523
+
524
+ } else {
525
+ $("#divBUOWLError").html("**** Habitat ID not found ****");
526
+ }
527
+ });
528
+
529
+ $("#lblBUOWL").click(function(){
530
+ $("#divBUOWLData").toggle();
531
+ });
532
+
533
+ $("input[name=fltBUOWL]").click(function(){
534
+ arHabitatIDs = [];
535
+ lyrBUOWL.refresh();
536
+ });
537
+
538
+ // ************ Client Linears **********
539
+
540
+ function styleClientLinears(json) {
541
+ var att = json.properties;
542
+ switch (att.type) {
543
+ case 'Pipeline':
544
+ return {color:'peru'};
545
+ break;
546
+ case 'Flowline':
547
+ return {color:'navy'};
548
+ break;
549
+ case 'Flowline, est.':
550
+ return {color:'navy', dashArray:"5,5"};
551
+ break;
552
+ case 'Electric Line':
553
+ return {color:'darkgreen'};
554
+ break;
555
+ case 'Access Road - Confirmed':
556
+ return {color:'darkred'};
557
+ break;
558
+ case 'Access Road - Estimated':
559
+ return {color:'darkred', dashArray:"5,5"};
560
+ break;
561
+ case 'Extraction':
562
+ return {color:'indigo'};
563
+ break;
564
+ default:
565
+ return {color:'darkgoldenrod'}
566
+ }
567
+ }
568
+
569
+ function processClientLinears(json, lyr) {
570
+ var att = json.properties;
571
+ lyr.bindTooltip("<h4>Linear Project: "+att.Project+"</h4>Type: "+att.type+"<br>ROW Width: "+att.row_width+"<br>Length: "+returnMultiLength(lyr.getLatLngs()).toFixed(0));
572
+ arProjectIDs.push(att.Project.toString());
573
+ var jsnBuffer = turf.buffer(json, att.row_width/1000, 'kilometers');
574
+ var lyrBuffer = L.geoJSON(jsnBuffer, {style:{color:'gray', dashArray:'5,5'}});
575
+ lyrClientLinesBuffer.addLayer(lyrBuffer);
576
+ }
577
+
578
+ function filterClientLines(json) {
579
+ var arProjectFilter=[];
580
+ $("input[name=fltProject]").each(function(){
581
+ if (this.checked) {
582
+ arProjectFilter.push(this.value);
583
+ }
584
+ });
585
+ var att = json.properties;
586
+ switch (att.type) {
587
+ case "Pipeline":
588
+ return (arProjectFilter.indexOf('Pipeline')>=0);
589
+ break;
590
+ case "Flowline":
591
+ return (arProjectFilter.indexOf('Flowline')>=0);
592
+ break;
593
+ case "Flowline, est.":
594
+ return (arProjectFilter.indexOf('Flowline')>=0);
595
+ break;
596
+ case "Electric Line":
597
+ return (arProjectFilter.indexOf('Electric')>=0);
598
+ break;
599
+ case "Access Road - Confirmed":
600
+ return (arProjectFilter.indexOf('Road')>=0);
601
+ break;
602
+ case "Access Road - Estimated":
603
+ return (arProjectFilter.indexOf('Road')>=0);
604
+ break;
605
+ case "Extraction":
606
+ return (arProjectFilter.indexOf('Extraction')>=0);
607
+ break;
608
+ default:
609
+ return (arProjectFilter.indexOf('Other')>=0);
610
+ break;
611
+ }
612
+ }
613
+
614
+ $("#txtFindProject").on('keyup paste', function(){
615
+ var val = $("#txtFindProject").val();
616
+ testLayerAttribute(arProjectIDs, val, "PROJECT ID", "#divFindProject", "#divProjectError", "#btnFindProject");
617
+ });
618
+
619
+ $("#btnFindProject").click(function(){
620
+ var val = $("#txtFindProject").val();
621
+ var lyr = returnLayerByAttribute(lyrClientLines,'Project',val);
622
+ if (lyr) {
623
+ if (lyrSearch) {
624
+ lyrSearch.remove();
625
+ }
626
+ lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);
627
+ mymap.fitBounds(lyr.getBounds().pad(1));
628
+ var att = lyr.feature.properties;
629
+ $("#divProjectData").html("<h4 class='text-center'>Attributes</h4><h5>Type: "+att.type+"</h5><h5>ROW width: "+att.row_width+ "m </h5>");
630
+ $("#divProjectError").html("");
631
+
632
+ fgpDrawnItems.clearLayers();
633
+ fgpDrawnItems.addLayer(lyr);
634
+
635
+ } else {
636
+ $("#divProjectError").html("**** Project ID not found ****");
637
+ }
638
+ });
639
+
640
+ $("#lblProject").click(function(){
641
+ $("#divProjectData").toggle();
642
+ });
643
+
644
+ $("#btnProjectFilterAll").click(function(){
645
+ $("input[name=fltProject]").prop('checked', true);
646
+ });
647
+
648
+ $("#btnProjectFilterNone").click(function(){
649
+ $("input[name=fltProject]").prop('checked', false);
650
+ });
651
+
652
+ $("#btnProjectFilter").click(function(){
653
+ arProjectIDs=[];
654
+ lyrClientLines.refresh();
655
+ });
656
+
657
+ // ********* Eagle Functions *****************
658
+
659
+ function returnEagleMarker(json, latlng){
660
+ var att = json.properties;
661
+ if (att.status=='ACTIVE NEST') {
662
+ var clrNest = 'deeppink';
663
+ } else {
664
+ var clrNest = 'chartreuse';
665
+ }
666
+ arEagleIDs.push(att.nest_id.toString());
667
+ return L.circle(latlng, {radius:804, color:clrNest,fillColor:'chartreuse', fillOpacity:0.5}).bindTooltip("<h4>Eagle Nest: "+att.nest_id+"</h4>Status: "+att.status);
668
+ }
669
+
670
+ function filterEagle(json) {
671
+ var att=json.properties;
672
+ var optFilter = $("input[name=fltEagle]:checked").val();
673
+ if (optFilter=='ALL') {
674
+ return true;
675
+ } else {
676
+ return (att.status==optFilter);
677
+ }
678
+ }
679
+
680
+ $("#txtFindEagle").on('keyup paste', function(){
681
+ var val = $("#txtFindEagle").val();
682
+ testLayerAttribute(arEagleIDs, val, "Eagle Nest ID", "#divFindEagle", "#divEagleError", "#btnFindEagle");
683
+ });
684
+
685
+ $("#btnFindEagle").click(function(){
686
+ var val = $("#txtFindEagle").val();
687
+ var lyr = returnLayerByAttribute(lyrEagleNests,'nest_id',val);
688
+ if (lyr) {
689
+ if (lyrSearch) {
690
+ lyrSearch.remove();
691
+ }
692
+ lyrSearch = L.circle(lyr.getLatLng(), {radius:800, color:'red', weight:10, opacity:0.5, fillOpacity:0}).addTo(mymap);
693
+ mymap.setView(lyr.getLatLng(), 14);
694
+ var att = lyr.feature.properties;
695
+ $("#divEagleData").html("<h4 class='text-center'>Attributes</h4><h5>Status: "+att.status+"</h5>");
696
+ $("#divEagleError").html("");
697
+
698
+ fgpDrawnItems.clearLayers();
699
+ fgpDrawnItems.addLayer(lyr);
700
+
701
+ } else {
702
+ $("#divEagleError").html("**** Eagle Nest ID not found ****");
703
+ }
704
+ });
705
+
706
+ $("#lblEagle").click(function(){
707
+ $("#divEagleData").toggle();
708
+ });
709
+
710
+ $("input[name=fltEagle]").click(function(){
711
+ arEagleIDs=[];
712
+ lyrEagleNests.refresh();
713
+ });
714
+
715
+ // *********** Raptor Functions
716
+
717
+ function returnRaptorMarker(json, latlng){
718
+ var att = json.properties;
719
+ arRaptorIDs.push(att.Nest_ID.toString());
720
+ switch (att.recentspecies) {
721
+ case 'Red-tail Hawk':
722
+ var radRaptor = 533;
723
+ break;
724
+ case 'Swainsons Hawk':
725
+ var radRaptor = 400;
726
+ break;
727
+ default:
728
+ var radRaptor = 804;
729
+ break;
730
+ }
731
+ switch (att.recentstatus) {
732
+ case 'ACTIVE NEST':
733
+ var optRaptor = {radius:radRaptor, color:'deeppink', fillColor:"cyan", fillOpacity:0.5};
734
+ break;
735
+ case 'INACTIVE NEST':
736
+ var optRaptor = {radius:radRaptor, color:'cyan', fillColor:'cyan', fillOpacity:0.5};
737
+ break;
738
+ case 'FLEDGED NEST':
739
+ var optRaptor = {radius:radRaptor, color:'deeppink', fillColor:"cyan", fillOpacity:0.5, dashArray:"2,8"};
740
+ break;
741
+ }
742
+ return L.circle(latlng, optRaptor).bindPopup("<h4>Raptor Nest: "+att.Nest_ID+"</h4>Status: "+att.recentstatus+"<br>Species: "+att.recentspecies+"<br>Last Survey: "+att.lastsurvey);
743
+ }
744
+
745
+ function filterRaptor(json) {
746
+ var att=json.properties;
747
+ var optFilter = $("input[name=fltRaptor]:checked").val();
748
+ if (optFilter=='ALL') {
749
+ return true;
750
+ } else {
751
+ return (att.recentstatus==optFilter);
752
+ }
753
+ }
754
+
755
+ $("#txtFindRaptor").on('keyup paste', function(){
756
+ var val = $("#txtFindRaptor").val();
757
+ testLayerAttribute(arRaptorIDs, val, "Raptor Nest ID", "#divFindRaptor", "#divRaptorError", "#btnFindRaptor");
758
+ });
759
+
760
+ $("#btnFindRaptor").click(function(){
761
+ var val = $("#txtFindRaptor").val();
762
+ var lyr = returnLayerByAttribute(lyrRaptorNests,'Nest_ID',val);
763
+ if (lyr) {
764
+ if (lyrSearch) {
765
+ lyrSearch.remove();
766
+ }
767
+ var att = lyr.feature.properties;
768
+ switch (att.recentspecies) {
769
+ case 'Red-tail Hawk':
770
+ var radRaptor = 533;
771
+ break;
772
+ case 'Swainsons Hawk':
773
+ var radRaptor = 400;
774
+ break;
775
+ default:
776
+ var radRaptor = 804;
777
+ break;
778
+ }
779
+ lyrSearch = L.circle(lyr.getLatLng(), {radius:radRaptor, color:'red', weight:10, opacity:0.5, fillOpacity:0}).addTo(mymap);
780
+ mymap.setView(lyr.getLatLng(), 14);
781
+ $("#divRaptorData").html("<h4 class='text-center'>Attributes</h4><h5>Status: "+att.recentstatus+"</h5><h5>Species: "+att.recentspecies+"</h5><h5>Last Survey: "+att.lastsurvey+"</h5>");
782
+ $("#divRaptorError").html("");
783
+
784
+ fgpDrawnItems.clearLayers();
785
+ fgpDrawnItems.addLayer(lyr);
786
+
787
+ } else {
788
+ $("#divRaptorError").html("**** Raptor Nest ID not found ****");
789
+ }
790
+ });
791
+
792
+ $("#lblRaptor").click(function(){
793
+ $("#divRaptorData").toggle();
794
+ });
795
+
796
+ $("input[name=fltRaptor]").click(function(){
797
+ arRaptorIDsIDs=[];
798
+ lyrRaptorNests.refresh();
799
+ });
800
+
801
+ // ********* jQuery Event Handlers ************
802
+
803
+ $("#btnLocate").click(function(){
804
+ mymap.locate();
805
+ });
806
+
807
+ // *********** General Functions *********
808
+
809
+ function LatLngToArrayString(ll) {
810
+ return "["+ll.lat.toFixed(5)+", "+ll.lng.toFixed(5)+"]";
811
+ }
812
+
813
+ function returnLayerByAttribute(lyr,att,val) {
814
+ var arLayers = lyr.getLayers();
815
+ for (i=0;i<arLayers.length-1;i++) {
816
+ var ftrVal = arLayers[i].feature.properties[att];
817
+ if (ftrVal==val) {
818
+ return arLayers[i];
819
+ }
820
+ }
821
+ return false;
822
+ }
823
+
824
+ function returnLayersByAttribute(lyr,att,val) {
825
+ var arLayers = lyr.getLayers();
826
+ var arMatches = [];
827
+ for (i=0;i<arLayers.length-1;i++) {
828
+ var ftrVal = arLayers[i].feature.properties[att];
829
+ if (ftrVal==val) {
830
+ arMatches.push(arLayers[i]);
831
+ }
832
+ }
833
+ if (arMatches.length) {
834
+ return arMatches;
835
+ } else {
836
+ return false;
837
+ }
838
+ }
839
+
840
+ function testLayerAttribute(ar, val, att, fg, err, btn) {
841
+ if (ar.indexOf(val)<0) {
842
+ $(fg).addClass("has-error");
843
+ $(err).html("**** "+att+" NOT FOUND ****");
844
+ $(btn).attr("disabled", true);
845
+ } else {
846
+ $(fg).removeClass("has-error");
847
+ $(err).html("");
848
+ $(btn).attr("disabled", false);
849
+ }
850
+ }
851
+
852
+ function returnLength(arLL) {
853
+ var total=0;
854
+
855
+ for (var i=1;i<arLL.length;i++) {
856
+ total = total + arLL[i-1].distanceTo(arLL[i]);
857
+ }
858
+
859
+ return total;
860
+
861
+ }
862
+
863
+ function returnMultiLength(arArLL) {
864
+ var total=0;
865
+
866
+ for (var i=0; i<arArLL.length;i++) {
867
+ total = total + returnLength(arArLL[i]);
868
+ }
869
+
870
+ return total;
871
+ }
872
+
873
+ function returnClosestlayer(lyrGroup, llRef) {
874
+ var arLyrs = lyrGroup.getLayers();
875
+ var nearest = L.GeometryUtil.closestLayer(mymap, arLyrs, llRef);
876
+ nearest.distance = llRef.distanceTo(nearest.latlng);
877
+ nearest.bearing = L.GeometryUtil.bearing(llRef, nearest.latlng);
878
+ if (nearest.bearing<0){
879
+ nearest.bearing = nearest.bearing+360;
880
+ }
881
+ nearest.att = nearest.layer.feature.properties;
882
+ return nearest;
883
+ }
884
+
885
+ function summarizePointsByLine(line, radius, fcPoint, prop) {
886
+ var buf = turf.buffer(line, radius, 'kilometers');
887
+ buf = turf.featureCollection([buf]);
888
+ buf = turf.collect(buf, fcPoint, prop, prop+"Vals");
889
+ return buf;
890
+ }
891
+
892
+ function intersectPolyByPolyFC(poly, fcPoly) {
893
+ var fgp = [];
894
+ var bbPoly = turf.bboxPolygon(turf.bbox(poly));
895
+ for (var i=0;i<fcPoly.features.length;i++) {
896
+ var bb = turf.bboxPolygon(turf.bbox(fcPoly.features[i]));
897
+ if (turf.intersect(bbPoly, bb)) {
898
+ var int = turf.intersect(poly, fcPoly.features[i]);
899
+ if (int) {
900
+ int.properties = fcPoly.features[i].properties;
901
+ fgp.push(int);
902
+ }
903
+ }
904
+ }
905
+ return turf.featureCollection(fgp);
906
+ }
907
+
908
+ function intersectLineByPolyFC(line, fcPoly) {
909
+ var fgp = [];
910
+ var bbLine = turf.bboxPolygon(turf.bbox(line));
911
+ for (var i=0;i<fcPoly.features.length;i++) {
912
+ var bb = turf.bboxPolygon(turf.bbox(fcPoly.features[i]));
913
+ if (turf.intersect(bbLine, bb)) {
914
+ var slc = turf.lineSplit(line, fcPoly.features[i]);
915
+ for (var j=0;j<slc.features.length;j++) {
916
+ var curSlc = slc.features[j];
917
+ var len = turf.lineDistance(curSlc, 'kilometers');
918
+ var ptMiddle = turf.along(curSlc, len/2, 'kilometers');
919
+ if (turf.inside(ptMiddle, fcPoly.features[i])) {
920
+ curSlc.properties = fcPoly.features[i].properties;
921
+ fgp.push(curSlc);
922
+ }
923
+ }
924
+ }
925
+ }
926
+ return turf.featureCollection(fgp);
927
+ }
928
+
929
+ function summarizeArray(ar) {
930
+ var arUnique = [];
931
+ var arCount = [];
932
+ for (var i=0;i<ar.length;i++) {
933
+ var idx = arUnique.indexOf(ar[i]);
934
+ if (idx<0) {
935
+ arUnique.push(ar[i]);
936
+ arCount.push(1);
937
+ } else {
938
+ arCount[idx] = arCount[idx]+1
939
+ }
940
+ }
941
+ return [arUnique, arCount];
942
+ }
943
+
944
+ function summarizePolyFC(fcPoly, att) {
945
+ var arUnique = [];
946
+ var arCount = [];
947
+ var arArea = [];
948
+ for (var i=0;i<fcPoly.features.length;i++) {
949
+ var curAtt = fcPoly.features[i].properties[att];
950
+ var idx = arUnique.indexOf(curAtt);
951
+ if (idx<0) {
952
+ arUnique.push(curAtt);
953
+ arCount.push(1);
954
+ arArea.push(turf.area(fcPoly.features[i]));
955
+ } else {
956
+ arCount[idx] = arCount[idx]+1
957
+ arArea[idx] = arArea[idx]+turf.area(fcPoly.features[i])
958
+ }
959
+ }
960
+ return [arUnique, arCount, arArea];
961
+ }
962
+
963
+ function summarizeLineFC(fcLine, att) {
964
+ console.log(fcLine);
965
+ var arUnique = [];
966
+ var arCount = [];
967
+ var arLength = [];
968
+ for (var i=0;i<fcLine.features.length;i++) {
969
+ var curAtt = fcLine.features[i].properties[att];
970
+ var idx = arUnique.indexOf(curAtt);
971
+ console.log(curAtt);
972
+ console.log(idx);
973
+ if (idx<0) {
974
+ arUnique.push(curAtt);
975
+ arCount.push(1);
976
+ arLength.push(turf.lineDistance(fcLine.features[i]));
977
+ } else {
978
+ arCount[idx] = arCount[idx]+1;
979
+ arLength[idx] = arLength[idx]+turf.lineDistance(fcLine.features[i]);
980
+ }
981
+ }
982
+ return [arUnique, arCount, arLength];
983
+ }
984
+
985
+ </script>
986
+ </body>
987
+ </html>