-
Notifications
You must be signed in to change notification settings - Fork 5
/
mapbox+turf2.html
292 lines (256 loc) · 32.1 KB
/
mapbox+turf2.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jump to mult polygon in mapbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<style>
#fitBounds {
display: block;
position: relative;
margin: 0px auto;
width: 20%;
height: 40px;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 22px;
text-align: center;
color: #fff;
background: #ee8a65;
cursor: pointer;
}
#info {
display: block;
position: relative;
margin: 0px auto;
width: 20%;
/* padding: 10px; */
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
background: #fff;
}
.filter-ctrl {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}
.filter-ctrl input[type='text'] {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
width: 100%;
border: 0;
background-color: #fff;
margin: 0;
color: rgba(0, 0, 0, 0.5);
padding: 10px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;
width: 180px;
}
#myData{
display: block;
position: relative;
margin: 0px auto;
width: 20%;
/* padding: 10px; */
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
background: #fff;
} </style>
<div id="map"></div>
<pre id="info"></pre>
<div class="filter-ctrl">
<input
id="lon"
type="text"
name="filter"
placeholder="longitude"
/>
<input
id="lat"
type="text"
name="filter"
placeholder="latitude"
/>
<button type="button" onclick="getInputValue();">Get Value</button>
</div>
<div id='fitBounds' onclick='fly()'>Fly to next location<p>Click on the map to get lat and long</p></div>
<script>
let data ={"type":"FeatureCollection","features":[{"type":"Feature","properties":{"color":"red","title":"99612"},"geometry":{"type":"Polygon","coordinates":[[[-162.338364,55.090299],[-162.248571,55.090096],[-162.247355,55.08902],[-162.247994,55.029652],[-162.248143,55.028814],[-162.29084188534,55.0288248108842],[-162.294056,55.031457],[-162.295364,55.0335],[-162.295994788925,55.0344822393128],[-162.296195,55.034794],[-162.299741,55.03713],[-162.302494,55.03854],[-162.303445,55.041672],[-162.304158,55.045962],[-162.306416,55.048004],[-162.306817,55.050408],[-162.308674,55.052565],[-162.31212,55.058283],[-162.313665,55.059508],[-162.316874,55.059644],[-162.319963,55.059849],[-162.32234,55.058623],[-162.324598,55.056513],[-162.328045,55.054267],[-162.328876,55.048889],[-162.328995,55.045962],[-162.330421,55.043578],[-162.331138193638,55.0427988035463],[-162.332155,55.044892],[-162.330881,55.045961],[-162.331614,55.046654],[-162.33057,55.049237],[-162.338202,55.049478],[-162.338364,55.090299]]]}},{"type":"Feature","properties":{"color":"red","title":"99661"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-160.527146,55.320516],[-160.523106,55.320111],[-160.514787,55.321057],[-160.509796,55.322815],[-160.507656,55.325249],[-160.50623,55.328224],[-160.502428,55.329847],[-160.498625,55.33174],[-160.496486,55.332956],[-160.498262674517,55.3345563775717],[-160.495368,55.335473],[-160.49109,55.33929],[-160.486249,55.341333],[-160.491007,55.340897],[-160.496705,55.336384],[-160.499239773177,55.3354365200884],[-160.499338,55.335525],[-160.502665,55.33566],[-160.503141,55.337417],[-160.501952,55.339986],[-160.499813,55.342013],[-160.500526,55.343635],[-160.502428,55.344041],[-160.501952,55.346203],[-160.502811584807,55.3486461732224],[-160.501679,55.348916],[-160.501121,55.348772],[-160.50069,55.347962],[-160.50016,55.347487],[-160.498890037563,55.3495773097271],[-160.498862,55.349582],[-160.497199,55.352149],[-160.49292,55.353636],[-160.490306,55.355122],[-160.492445,55.357689],[-160.491494,55.3585],[-160.487216,55.356473],[-160.482225,55.355933],[-160.473906,55.357284],[-160.467726,55.357149],[-160.465825,55.354041],[-160.464636,55.352284],[-160.464636,55.349311],[-160.460358,55.347149],[-160.459298334925,55.347186616299],[-160.459142,55.340984],[-160.460787537516,55.2913001737471],[-160.465825,55.290212],[-160.472242,55.2894],[-160.477233,55.291159],[-160.482225,55.292513],[-160.488167,55.294813],[-160.489593,55.29752],[-160.492207,55.299414],[-160.498149,55.300767],[-160.50219,55.304555],[-160.506468,55.305638],[-160.510984,55.308749],[-160.513598,55.309426],[-160.517164,55.30929],[-160.520087154754,55.3120862431027],[-160.522376337268,55.3142760384968],[-160.525416438504,55.3171841507345],[-160.528335,55.319976],[-160.527146,55.320516]]],[[[-160.858234,55.275119],[-160.853718,55.278233],[-160.850628,55.281414],[-160.846231,55.285678],[-160.841478,55.290212],[-160.840527,55.29258],[-160.839101,55.295355],[-160.837675,55.297114],[-160.836249,55.298805],[-160.836843,55.300699],[-160.838625,55.302391],[-160.839457,55.304014],[-160.839933,55.305773],[-160.84231,55.309155],[-160.845994,55.312401],[-160.849796,55.315377],[-160.854312,55.317879],[-160.858283471944,55.3196735824719],[-160.853698,55.318181],[-160.851137,55.318673],[-160.850706,55.317155],[-160.849033,55.316157],[-160.836915,55.311401],[-160.835013,55.31182],[-160.836989,55.315204],[-160.833084,55.316476],[-160.833741,55.32054],[-160.831636,55.320901],[-160.829099,55.323027],[-160.831153,55.323157],[-160.832802,55.321639],[-160.834629,55.32109],[-160.839853,55.318399],[-160.842313,55.318573],[-160.84391,55.319932],[-160.850731,55.323517],[-160.847738,55.322997],[-160.844239,55.323359],[-160.840932447337,55.3249658339748],[-160.840765,55.325047],[-160.838863,55.32694],[-160.838269,55.329171],[-160.837794,55.331942],[-160.837794,55.334443],[-160.838625,55.336674],[-160.839933,55.337823],[-160.839933,55.341067],[-160.838269,55.343027],[-160.835536,55.344041],[-160.833753,55.346135],[-160.831376,55.348028],[-160.828524,55.348838],[-160.825434,55.350933],[-160.824484,55.352622],[-160.823980585719,55.3533577593331],[-160.814567,55.352554],[-160.807588,55.352958],[-160.806784,55.354057],[-160.813042,55.354535],[-160.818753,55.353929],[-160.823992396534,55.3542075659385],[-160.824959,55.355257],[-160.823771,55.358094],[-160.8208,55.359918],[-160.818066,55.362418],[-160.81664,55.365322],[-160.815452,55.367551],[-160.812005,55.370522],[-160.808916,55.373696],[-160.807014,55.374912],[-160.803568,55.377883],[-160.801904,55.379773],[-160.800716,55.380786],[-160.796794,55.381731],[-160.793942,55.383284],[-160.791803,55.385039],[-160.789069,55.386052],[-160.785504,55.388212],[-160.783008,55.388212],[-160.779206,55.389224],[-160.775046,55.390709],[-160.772907,55.390709],[-160.76958,55.390169],[-160.76308562031,55.390725169215],[-160.760904,55.390912],[-160.754962,55.392059],[-160.751278,55.393342],[-160.745336,55.395907],[-160.741652,55.398539],[-160.737017,55.40171],[-160.733809,55.404747],[-160.732501,55.406636],[-160.730438917946,55.4070748793152],[-160.729649,55.407243],[-160.726322,55.406973],[-160.722519,55.406366],[-160.719797170977,55.4058359010558],[-160.71836,55.405556],[-160.71622,55.404747],[-160.712536,55.402452],[-160.709922,55.401035],[-160.705525,55.399551],[-160.704414453969,55.3995323122667],[-160.701484,55.399483],[-160.698276,55.400428],[-160.694948,55.40063],[-160.692452,55.40171],[-160.69067,55.402385],[-160.688531,55.401643],[-160.686035,55.400765],[-160.682945,55.400833],[-160.679618,55.399618],[-160.674864,55.398134],[-160.67118,55.397999],[-160.667853,55.397999],[-160.666902,55.398471],[-160.663931,55.397729],[-160.662624,55.397054],[-160.660722,55.395232],[-160.657989,55.393139],[-160.655969,55.391857],[-160.653473,55.390642],[-160.650502,55.388954],[-160.648601,55.387334],[-160.647531,55.385444],[-160.647293,55.383486],[-160.646224,55.382541],[-160.646343,55.380651],[-160.647888,55.379436],[-160.64967,55.378153],[-160.650264,55.377208],[-160.650977,55.375587],[-160.650621,55.373696],[-160.650621,55.37194],[-160.651215,55.371063],[-160.65169,55.370185],[-160.651809,55.367753],[-160.650859,55.365795],[-160.649432,55.363836],[-160.647412,55.361539],[-160.647412,55.361607],[-160.645986,55.359716],[-160.645439858717,55.3586294602449],[-160.645035,55.357824],[-160.647412,55.355527],[-160.648838,55.353095],[-160.650027,55.349446],[-160.65169,55.347284],[-160.651215,55.345122],[-160.653354,55.342959],[-160.657157,55.339715],[-160.661673,55.337688],[-160.662861,55.33566],[-160.664287,55.332415],[-160.666664,55.329171],[-160.668803,55.325655],[-160.668803,55.323221],[-160.667853,55.321734],[-160.668699693387,55.3221467852943],[-160.669555974544,55.3225642448783],[-160.67118,55.323356],[-160.672131,55.326331],[-160.669081,55.329341],[-160.671393,55.32839],[-160.67116,55.329459],[-160.668696,55.330367],[-160.665359,55.334703],[-160.663321,55.33916],[-160.666798,55.339589],[-160.669698,55.339175],[-160.672918,55.339555],[-160.678919,55.336193],[-160.681739,55.335098],[-160.686536,55.334568],[-160.682099,55.333912],[-160.679543,55.332391],[-160.678056,55.330191],[-160.67898,55.327618],[-160.680508,55.326174],[-160.683405,55.324544],[-160.686706,55.323448],[-160.691905,55.32344],[-160.694139,55.322806],[-160.697764,55.323143],[-160.699795,55.322465],[-160.700891,55.321093],[-160.698757479301,55.3206851315498],[-160.698751,55.320652],[-160.697462196457,55.3203133241176],[-160.695661,55.31984],[-160.695423,55.317676],[-160.693284,55.314836],[-160.693482929689,55.3133665949859],[-160.693522,55.313078],[-160.690857415922,55.3124277368448],[-160.688531,55.31186],[-160.687412230652,55.3102235308936],[-160.685865,55.305459],[-160.677129,55.303192],[-160.677010824375,55.3038593116751],[-160.666427,55.301985],[-160.66187280729,55.302773882476],[-160.66096,55.302932],[-160.658821,55.305908],[-160.652023056487,55.3083094206373],[-160.651928,55.308343],[-160.646461,55.310508],[-160.641708,55.312401],[-160.642659,55.31673],[-160.642183,55.319976],[-160.640293387579,55.3202723399139],[-160.63529,55.321057],[-160.632899303297,55.3217078153485],[-160.631589156643,55.3220644743717],[-160.629824,55.322545],[-160.624687180246,55.3233978345559],[-160.62412,55.323492],[-160.62412,55.326196],[-160.622931,55.329441],[-160.621992773338,55.3305976637252],[-160.621505,55.331199],[-160.614375,55.33201],[-160.612133898072,55.33201],[-160.610802230769,55.33201],[-160.610572,55.33201],[-160.610146801872,55.3293525117005],[-160.613209,55.327346],[-160.613353,55.324164],[-160.611294,55.322416],[-160.606905,55.321856],[-160.605001,55.321019],[-160.608126,55.323229],[-160.601308909181,55.3247506179982],[-160.601065,55.324709],[-160.600788224108,55.3248873597866],[-160.597499,55.327007],[-160.597483649352,55.3271996927382],[-160.595152,55.328301],[-160.595127,55.328692],[-160.596879,55.32963],[-160.596896021807,55.3306759726742],[-160.596583030762,55.3312694704212],[-160.595836,55.332686],[-160.596311,55.334984],[-160.596637671021,55.3354794281396],[-160.59845,55.338228],[-160.600114,55.341473],[-160.602491,55.34323],[-160.607957,55.344041],[-160.612473,55.345798],[-160.616514,55.349446],[-160.616514,55.351338],[-160.612949,55.3535],[-160.611064496142,55.3559102890208],[-160.610096,55.357149],[-160.606056,55.360391],[-160.603709418379,55.3623920120979],[-160.603204,55.362823],[-160.602253,55.365254],[-160.598212,55.364309],[-160.594647,55.366065],[-160.594172,55.368226],[-160.592220534258,55.3696371746533],[-160.591557,55.370117],[-160.589852728612,55.3727805403962],[-160.589656,55.373088],[-160.589336659228,55.3734510093914],[-160.586974663482,55.3761359989453],[-160.586804,55.37633],[-160.580149,55.37822],[-160.577644679108,55.3799714037047],[-160.574419,55.380285],[-160.572895,55.380691],[-160.570307,55.381878],[-160.56891,55.382096],[-160.568329,55.383513],[-160.569043,55.385205],[-160.570847,55.385623],[-160.57214,55.384422],[-160.573090477218,55.3845146459831],[-160.572781,55.384837],[-160.573018,55.387807],[-160.572486226872,55.3888138635668],[-160.57192,55.388977],[-160.570954,55.388399],[-160.569862,55.3884],[-160.570445,55.38785],[-160.568843,55.387171],[-160.5677,55.387071],[-160.566684,55.387303],[-160.565746,55.388142],[-160.566687,55.388532],[-160.567043,55.389038],[-160.566848563047,55.3903745520472],[-160.56565,55.390642],[-160.562323,55.389832],[-160.561134,55.387942],[-160.55852,55.387132],[-160.555905,55.387267],[-160.554242,55.389157],[-160.550676,55.389292],[-160.548537,55.387672],[-160.543546,55.385107],[-160.540694,55.383486],[-160.536891,55.383351],[-160.534255704492,55.3839505020075],[-160.533326,55.384162],[-160.528572,55.381866],[-160.526405906383,55.3811892381609],[-160.523819,55.380381],[-160.520491,55.377545],[-160.520603010563,55.3773177477993],[-160.522155,55.374169],[-160.522155,55.372008],[-160.523343,55.369577],[-160.52222336879,55.3656309597017],[-160.522155,55.36539],[-160.520903172843,55.363912114735],[-160.519065,55.361742],[-160.51954,55.359851],[-160.519002664488,55.3588837207151],[-160.518579218887,55.3581214592439],[-160.518114,55.357284],[-160.51954,55.356878],[-160.523819,55.356878],[-160.527146,55.354987],[-160.527570599731,55.3522146135187],[-160.527622,55.351879],[-160.527300348943,55.3511934198808],[-160.526671,55.349852],[-160.528097,55.34769],[-160.526433,55.345527],[-160.526909,55.342284],[-160.527434848857,55.3424335199937],[-160.530236,55.34323],[-160.53499,55.343365],[-160.535343094604,55.3432414340346],[-160.538079,55.342284],[-160.540932,55.340526],[-160.539743,55.339445],[-160.543784,55.339175],[-160.548775,55.336877],[-160.54950344062,55.3370363611195],[-160.551865,55.337553],[-160.552172151628,55.337446236449],[-160.556143,55.336066],[-160.561847,55.333632],[-160.566839,55.331199],[-160.568027,55.32863],[-160.566363,55.326466],[-160.569453,55.321193],[-160.574444,55.319029],[-160.578247,55.31443],[-160.57896,55.312131],[-160.578247,55.30902],[-160.579436,55.305638],[-160.576821,55.29982],[-160.573018,55.293189],[-160.573256,55.290753],[-160.56951,55.289393],[-160.570662,55.288144],[-160.56863,55.289538],[-160.570169,55.290337],[-160.567751,55.291145],[-160.567471,55.287764],[-160.570597,55.287392],[-160.570838,55.286187],[-160.568223019137,55.2853155760659],[-160.568265,55.285204],[-160.564937,55.283715],[-160.563036,55.280602],[-160.565413,55.278977],[-160.568027,55.278842],[-160.569216,55.277759],[-160.56874,55.275457],[-160.565175,55.273426],[-160.564224,55.271666],[-160.561145026108,55.2697864099863],[-160.560897,55.269635],[-160.558413894914,55.2706633758349],[-160.558282,55.270718],[-160.555668,55.269906],[-160.552816,55.267739],[-160.552816,55.265031],[-160.549488,55.262729],[-160.544497,55.26151],[-160.540988806821,55.2612747314151],[-160.540456,55.261239],[-160.538793,55.263406],[-160.536803269373,55.263595],[-160.53594,55.263677],[-160.533564,55.262322],[-160.534039,55.260155],[-160.529285,55.257582],[-160.527384,55.255279],[-160.526634795869,55.2535720243969],[-160.526489598462,55.253241208776],[-160.528962,55.250519],[-160.53229,55.246086],[-160.534171,55.242476],[-160.540154,55.240831],[-160.548312,55.242885],[-160.556943,55.244275],[-160.567079,55.242658],[-160.57287,55.239677],[-160.575875,55.23644],[-160.576007,55.235182],[-160.574611,55.233994],[-160.569632,55.232007],[-160.567449454318,55.2316044992251],[-160.566601,55.229669],[-160.564224,55.229669],[-160.560897,55.229534],[-160.55852,55.228314],[-160.554242,55.229262],[-160.548775,55.230753],[-160.54212,55.229669],[-160.538079,55.229127],[-160.532851,55.230347],[-160.530949,55.229805],[-160.525482,55.226551],[-160.520729,55.226145],[-160.513598,55.227365],[-160.512065824038,55.2279268439053],[-160.508978,55.227809],[-160.505789,55.226147],[-160.500597073416,55.2256230154717],[-160.494346,55.22384],[-160.492683,55.220858],[-160.494822,55.217604],[-160.494346,55.215299],[-160.497199,55.212858],[-160.496723,55.207026],[-160.494109,55.199567],[-160.493098343886,55.1985233436967],[-160.493035469398,55.1984584162149],[-160.489117,55.194412],[-160.483175,55.192241],[-160.482347944886,55.1923243196612],[-160.480675560359,55.1924927999836],[-160.478133,55.190791],[-160.47477336693,55.1911157822987],[-160.472955,55.190477],[-160.468202,55.190341],[-160.467079461437,55.1916223681113],[-160.466317153771,55.1924925357532],[-160.465587,55.193326],[-160.460596,55.193191],[-160.457268,55.191155],[-160.457031,55.18817],[-160.459645359504,55.1863049573142],[-160.461254,55.187952],[-160.463782,55.187592],[-160.462469,55.185451],[-160.465503,55.183818],[-160.46374174435,55.1825373300734],[-160.463866917402,55.1819293843243],[-160.463923,55.181657],[-160.467390904651,55.1807570293341],[-160.469152,55.1803],[-160.473193,55.1803],[-160.476045,55.181793],[-160.476601829228,55.1817474899189],[-160.476799,55.182042],[-160.47647,55.182476],[-160.477127,55.182693],[-160.477506,55.183315],[-160.478946,55.183474],[-160.48026,55.18304],[-160.480412,55.182259],[-160.479452,55.182014],[-160.479069560646,55.1815458003318],[-160.479373,55.181521],[-160.484126,55.182064],[-160.485563072072,55.181393],[-160.486729,55.18132],[-160.487284,55.181552],[-160.487866,55.181364],[-160.487664,55.180641],[-160.488599,55.180308],[-160.488776,55.17973],[-160.48918,55.179484],[-160.488877,55.179267],[-160.489382,55.17879],[-160.49013954039,55.1775514691604],[-160.490306,55.177585],[-160.494584,55.179214],[-160.495111930563,55.1792615792159],[-160.495673,55.179586],[-160.495193,55.179846],[-160.495294,55.180164],[-160.49585,55.180424],[-160.497214,55.180713],[-160.497947,55.180713],[-160.498452,55.180381],[-160.499387,55.18028],[-160.499286,55.179875],[-160.49861406107,55.1795772052381],[-160.4991,55.179621],[-160.504091,55.180435],[-160.508607,55.181793],[-160.510984,55.184642],[-160.515975,55.186542],[-160.518827,55.188035],[-160.52572,55.188035],[-160.530949,55.187221],[-160.537129,55.18817],[-160.537194213427,55.1881480002897],[-160.538754,55.189192],[-160.535392,55.18941],[-160.539362,55.190291],[-160.541916,55.18974],[-160.549042,55.186411],[-160.553442,55.186669],[-160.557766,55.187564],[-160.551646,55.185904],[-160.550684,55.18521],[-160.551893,55.180915],[-160.550677,55.178529],[-160.550751,55.176866],[-160.548904,55.176101],[-160.547313,55.176752],[-160.545062,55.175727],[-160.540057,55.17596],[-160.536644,55.1756],[-160.533106,55.176252],[-160.52939,55.175675],[-160.526406,55.17329],[-160.524764,55.175286],[-160.528683,55.177411],[-160.532222,55.176686],[-160.534749,55.176902],[-160.529518,55.178495],[-160.52426,55.178858],[-160.522692,55.176097],[-160.518394,55.17442],[-160.511367,55.176909],[-160.50846,55.176953],[-160.509673,55.175593],[-160.509749,55.173034],[-160.508106,55.172398],[-160.506083,55.170316],[-160.504314,55.170475],[-160.500423,55.166962],[-160.495978,55.166138],[-160.500347,55.162841],[-160.500549,55.161799],[-160.497971747311,55.1610748570533],[-160.496961,55.157493],[-160.497880697826,55.1571292877852],[-160.498766728901,55.1567788897355],[-160.500051,55.156271],[-160.503141,55.153283],[-160.503854,55.150839],[-160.504697003397,55.150578],[-160.509558,55.149073],[-160.510492902174,55.1483606779718],[-160.51241,55.1469],[-160.513123,55.144319],[-160.514853789659,55.1427215203532],[-160.520526,55.139339],[-160.522545,55.136157],[-160.522586718015,55.1329757042665],[-160.524532,55.131956],[-160.532137,55.131956],[-160.536416,55.131345],[-160.539981,55.135964],[-160.535703,55.138002],[-160.532375,55.141942],[-160.534039,55.147511],[-160.535465,55.150635],[-160.53594,55.154438],[-160.537604,55.157561],[-160.54212,55.159734],[-160.545098636253,55.1599658425999],[-160.547978,55.160556],[-160.553004,55.158587],[-160.5553,55.15646],[-160.558056,55.157832],[-160.557833375,55.15566],[-160.560659,55.15566],[-160.565175,55.156882],[-160.566090327485,55.1564461603349],[-160.56801,55.157045],[-160.569927,55.154571],[-160.570454,55.15233],[-160.572118,55.150477],[-160.569656720542,55.1500771777514],[-160.569216,55.148734],[-160.571117,55.146968],[-160.574597212827,55.1468631928821],[-160.575633,55.146832],[-160.579198,55.147375],[-160.580459583159,55.146438233372],[-160.581575,55.14561],[-160.58312006687,55.145786556783],[-160.587517,55.146289],[-160.586091,55.150228],[-160.584902,55.153895],[-160.583239,55.157154],[-160.584902,55.159055],[-160.590369,55.158512],[-160.591775754573,55.1579312780329],[-160.594647,55.156746],[-160.596073,55.153759],[-160.597418001443,55.153759],[-160.599163,55.153759],[-160.604867,55.152808],[-160.604952061753,55.1526865343215],[-160.606769,55.150092],[-160.612949,55.147783],[-160.613714445842,55.1482041920317],[-160.619366,55.151314],[-160.625308,55.156067],[-160.626972,55.158919],[-160.625783,55.163128],[-160.627685,55.164757],[-160.631725,55.165029],[-160.637192,55.162857],[-160.642659,55.161906],[-160.646699,55.162042],[-160.649551,55.162449],[-160.652166,55.165165],[-160.65478,55.16788],[-160.656877634547,55.1676909527766],[-160.659296,55.167473],[-160.662624,55.165708],[-160.664394,55.1660756075731],[-160.667853,55.166794],[-160.674745,55.171409],[-160.675221,55.175074],[-160.678311,55.179282],[-160.676647,55.18281],[-160.6814,55.187967],[-160.683064,55.191766],[-160.683539,55.193801],[-160.683585392989,55.1938225772941],[-160.684605,55.194491],[-160.680878,55.197119],[-160.675211,55.198009],[-160.672144,55.199856],[-160.667233,55.201235],[-160.664082,55.20377],[-160.661884,55.20425],[-160.661259,55.20616],[-160.662524,55.206448],[-160.662151,55.208126],[-160.666126,55.209262],[-160.667015,55.210244],[-160.669316,55.21064],[-160.676198,55.209723],[-160.677663,55.210115],[-160.679096,55.212084],[-160.68094,55.21265],[-160.686149,55.212844],[-160.689925,55.210824],[-160.694898,55.206664],[-160.699325,55.205917],[-160.699078,55.204297],[-160.695109,55.20438],[-160.689805,55.202697],[-160.691324,55.202279],[-160.683752,55.199147],[-160.684799596479,55.1943873011048],[-160.689957,55.196786],[-160.704156283856,55.1985521982076],[-160.708496,55.199092],[-160.712210547332,55.1989742110819],[-160.721331,55.198685],[-160.721526016583,55.198665023923],[-160.724832,55.19978],[-160.727432,55.20091],[-160.726904,55.200115],[-160.730522,55.199279],[-160.736978080997,55.1970822270989],[-160.738035227705,55.1969739406973],[-160.73987,55.196786],[-160.746525,55.196243],[-160.755803384965,55.1948561686668],[-160.756507,55.194751],[-160.756705395287,55.1945811495962],[-160.758884,55.192716],[-160.758884,55.190816],[-160.759664286596,55.190593383393],[-160.762687,55.189731],[-160.765539,55.18851],[-160.765704192086,55.1882459150501],[-160.767916,55.18471],[-160.765064,55.179553],[-160.765386857988,55.1787227451958],[-160.766014,55.17711],[-160.770768,55.172767],[-160.775284,55.171274],[-160.777661,55.169238],[-160.777661,55.1682169051384],[-160.777661,55.166251],[-160.77362,55.164079],[-160.772445570569,55.1635419344589],[-160.772478,55.161707],[-160.773843,55.161028],[-160.774676,55.161245],[-160.777570413332,55.1612560690949],[-160.777898,55.161363],[-160.785029,55.160005],[-160.785037499849,55.1599734163499],[-160.785979,55.156475],[-160.787406,55.152944],[-160.789083,55.152024],[-160.78863,55.150651],[-160.786633045239,55.149103],[-160.788119,55.147783],[-160.788307462844,55.1476753144986],[-160.791684,55.145746],[-160.794298,55.141942],[-160.793585,55.138274],[-160.793695022041,55.1376766879093],[-160.794017535841,55.1359257533704],[-160.794536,55.133111],[-160.798101,55.131073],[-160.800643,55.1290746956522],[-160.801952883478,55.1280449765925],[-160.803805,55.126589],[-160.808797,55.126045],[-160.811230083369,55.1257427563835],[-160.814263,55.125366],[-160.817829,55.124278],[-160.817476611851,55.1252843297421],[-160.817115,55.126317],[-160.815026334864,55.1315729464839],[-160.814739,55.132296],[-160.815007952585,55.1331309983134],[-160.816402,55.137459],[-160.816146048581,55.1389230421177],[-160.815927,55.140176],[-160.813788,55.143708],[-160.815927,55.147647],[-160.817591,55.149413],[-160.815336178244,55.1503579379254],[-160.814026,55.150907],[-160.808596782731,55.1526598019901],[-160.808559,55.152672],[-160.805707,55.156475],[-160.80642,55.160277],[-160.808321,55.164079],[-160.806658,55.166115],[-160.808321,55.169102],[-160.810223,55.171138],[-160.814263,55.173174],[-160.817353,55.17331],[-160.819968,55.175753],[-160.819968,55.180368],[-160.818304,55.184439],[-160.818779,55.18756],[-160.821631,55.189188],[-160.826147,55.190816],[-160.827098,55.193665],[-160.832802,55.196514],[-160.837794,55.202483],[-160.84017,55.20411],[-160.843736,55.204653],[-160.848965,55.206145],[-160.852054,55.206281],[-160.852054,55.207908],[-160.851579,55.212383],[-160.849678,55.215095],[-160.850153,55.2174],[-160.84635,55.220925],[-160.843736,55.224586],[-160.841121,55.230279],[-160.838388,55.23421],[-160.838031,55.236988],[-160.836249,55.238817],[-160.834704,55.240918],[-160.834585,55.243289],[-160.835417,55.247015],[-160.834704,55.24986],[-160.834585,55.252096],[-160.835536,55.253789],[-160.83613,55.256701],[-160.840765,55.260629],[-160.845875,55.264015],[-160.848489,55.266047],[-160.853837,55.268552],[-160.85562,55.269229],[-160.857521,55.269432],[-160.858709,55.270921],[-160.858234,55.272005],[-160.856927,55.272749],[-160.857521,55.273629],[-160.859541,55.274103],[-160.858234,55.275119]]],[[[-160.865721,55.32126],[-160.861918,55.321869],[-160.859898,55.323694],[-160.855976,55.324709],[-160.85303188343,55.3255769134544],[-160.850274,55.325498],[-160.84893,55.324935],[-160.854763,55.324876],[-160.857324,55.323906],[-160.859124,55.320725],[-160.858901380304,55.31984144602],[-160.860254,55.320178],[-160.862156,55.31984],[-160.864057,55.319773],[-160.864889,55.320246],[-160.865721,55.32126]]]]}},{"type":"Feature","properties":{"color":"red","title":"92831"},"geometry":{"type":"Polygon","coordinates":[[[-117.924447,33.883266],[-117.923851,33.884506],[-117.9217,33.8864],[-117.91949,33.8874],[-117.9187,33.88856],[-117.91741,33.88853],[-117.91684,33.88963],[-117.91858,33.88943],[-117.91769,33.89166],[-117.91446,33.89488],[-117.91168,33.89667],[-117.90935,33.89941],[-117.90001,33.89957],[-117.89501,33.89883],[-117.89086,33.89706],[-117.88791,33.89413],[-117.8854,33.8933],[-117.88424,33.89361],[-117.88218,33.89594],[-117.88064,33.89668],[-117.876891,33.89636],[-117.87684,33.8915],[-117.87871,33.89128],[-117.87838,33.89049],[-117.874127,33.890432],[-117.87305,33.89187],[-117.86544,33.88931],[-117.86738,33.88275],[-117.873761,33.884069],[-117.874386,33.880342],[-117.876939,33.881037],[-117.883065,33.85999],[-117.889385,33.859693],[-117.898093,33.859927],[-117.898041,33.856305],[-117.9016,33.854597],[-117.906717,33.85447],[-117.90687,33.86319],[-117.910054,33.863181],[-117.911291,33.863732],[-117.9123,33.8663],[-117.91549,33.868401],[-117.9155,33.869397],[-117.91359,33.869404],[-117.914778,33.87068],[-117.914148,33.872243],[-117.91427,33.87845],[-117.91561,33.88042],[-117.91885,33.88163],[-117.9199,33.88124],[-117.924184,33.881224],[-117.924447,33.883266]]]}}]};
let firstzipcordinates=data['features'][0]['geometry']['coordinates'][0][0];
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FoaWxrYXNoeWFwNjQiLCJhIjoiY2tkNDFxYmtoMXQxbjJybXlleGxhejE4MSJ9.LGSnbgHFFcuBE8wXHxIMiA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: firstzipcordinates?firstzipcordinates:[-160.4914,55.3192
],
zoom: 10
});
// Add zoom and rotation controls to the map.
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
map.on('load', function() {
map.addSource('lines', {
'type': 'geojson',
'data': data
});
map.addLayer({
'id': 'lines',
'type': 'line',
'source': 'lines',
'paint': {
'line-width': 3,
// Use a get expression (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-get)
// to set the line-color to a feature property value.
'line-color': ['get', 'color'],
}
});
map.addLayer({
"id": "clusters-label",
"type": "symbol",
"source": "lines",
"layout": {
"text-field": "{title}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 12
}
});
});
map.on('click', function(e) {
document.getElementById('info').innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// to the top-left corner of the map
JSON.stringify(e.point) +
'<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
// console.log("e",e.lngLat);
document.getElementById("lat").value = e.lngLat.lat;
document.getElementById("lon").value = e.lngLat.lng;
});
// This variable will track your current coordinate array's index.
var idx = 0;
// var arrayOfCoordinates = [
// [-73.554,45.5088],
// [-73.9808,40.7648],
// [-117.1628,32.7174],
// [7.2661,43.7031],
// [11.374478, 43.846144],
// [12.631267, 41.85256],
// [12.3309, 45.4389],
// [21.9885, 50.0054]
// ];
function getFirstCorrdinatesFromData(result){
var firstCordinate = [];
for (var i = 0; i < result.length; i++) {
//alert(result[i].geometry.type)
if(result[i].geometry.type == 'MultiPolygon') {
let coordinates = result[i].geometry.coordinates;
firstCordinate.push(coordinates[0][0][0]);
}else if(result[i].geometry.type == 'Polygon') {
let coordinates = result[i].geometry.coordinates;
firstCordinate.push(coordinates[0][0]);
}else if(result[i].geometry.type == 'Point') {
let coordinates = result[i].geometry.coordinates;
firstCordinate.push(coordinates);
}
}
return firstCordinate;
}
var arrayOfCoordinates=getFirstCorrdinatesFromData(data.features);
function fly() {
// Back to the first coordinate.
if (idx >= arrayOfCoordinates.length) {
idx = 0;
}
map.flyTo({
center: arrayOfCoordinates[idx],essential: true // this animation is considered essential with respect to prefers-reduced-motion
});
idx++;
// var coordinates = data.features[0].geometry.coordinates;
// console.log(coordinates[0][0][0]);//firsrt cordinate of multipolygon
// var coordinates = data.features[1].geometry.coordinates;
// console.log(coordinates[0][0]);//first coordinate of polyogon
}
function getInputValue(){
var lat = document.getElementById('lat').value;
var lon = document.getElementById('lon').value;
const PointwithinFeatureCollection = (point) => {
var ptsWithin,found=false;
var zip=false;
turf.featureEach(data, function (currentFeature, featureIndex) {
var geom = turf.getType(currentFeature)
console.log('currentFeature',currentFeature);
// console.log('featureIndex',featureIndex);
console.log('geom',geom);
// console.log('geom',geome);
if(geom == 'MultiPolygon') {
let coordinates =turf.multiPolygon( currentFeature.geometry.coordinates);
// console.log('multipolygon coordinate',coordinates);
ptsWithin = turf.booleanPointInPolygon(point, coordinates);
console.log("Found in Multipolygon: : ", ptsWithin);
if(ptsWithin){
zip=currentFeature.properties.title;
// console.log('zipcode',zip);
}
}else if(geom == 'Polygon') {
let coordinates = turf.polygon(currentFeature.geometry.coordinates);
found = turf.booleanPointInPolygon(point, coordinates);
if(found){
zip=currentFeature.properties.title;
// console.log('zipcode',zip);
}
console.log("Found in polygon: ", found);
}
//
//=featureIndex
});
// return ptsWithin||found;
if(zip === false){
return {
"success": false,
"message": "Not within zipcode boundary",
"response_code": 403
};
} else{
return {
"success": true,
"data": zip,
"message": zip+" Zipcode is allowed.",
"response_code": 200
};
}
};
//--- Post values to processing page ---
var point = turf.point([lon, lat]);
var result=PointwithinFeatureCollection(point);
// document.getElementById("myData").innerHTML =JSON.stringify(result);
if(result.success){
map.flyTo({
center: [lon, lat],essential: true // this animation is considered essential with respect to prefers-reduced-motion
});}
alert(JSON.stringify(result));
// console.log('result',result);
}
</script>
</body>
</html>