-
-
Notifications
You must be signed in to change notification settings - Fork 48
/
index.html
459 lines (430 loc) · 25 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
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
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
<html class="">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>CMV Widgets</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="./css/cmv.css" media="screen">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="./" class="navbar-brand">CMV Widgets</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/tmcgee/cmv-widgets">Github</a>
</li>
<li>
<a href="http://cmv.io/">CMV</a>
</li>
</ul>
</div>
</div>
</div>
<div class="splash">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>CMV Widgets</h1>
<p>Widgets for <a href="http://cmv.io/">CMV</a>, the configurable map viewer.<br/>
Created by <a href="https://github.com/tmcgee/">Tim McGee</a> of <a href="http://moosepoint.com/">MoosePoint Technology</a>.</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>Example Configurations</h2>
<p>Each widget in this repo has at least one configuration example in the <a href="https://github.com/tmcgee/cmv-widgets/tree/master/config">config folder</a>. This folder also contains additional examples for including ESRI widgets, other widgets and functionality.</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="attributes-tables">Attributes Table(s)</h2>
<p>A highly configurable widget to display the results of one or more Query, Find or Geoprocessor Tasks.</p>
<p>
<a href="demo.html?config=table" target="cmv-demo-table" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=table" target="cmv-demo-table">
<div class="example"><img src="./images/attributesTables1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="disclaimer">Disclaimer</h2>
<p>A simple yet configurable disclaimer widget.</p>
<p>
<a href="demo.html?config=disclaimer" target="cmv-demo-disclaimer" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=disclaimer" target="cmv-demo-disclaimer">
<div class="example"><img src="./images/disclaimer1.jpg" alt="Screenshot"></div>
</a>
</p>
<p>
<a href="demo.html?config=disclaimer" target="cmv-demo-disclaimer">
<div class="example"><img src="./images/disclaimer2.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="elevation-profile">Elevation Profile</h2>
<p>An updated Elevation Profile widget based on previously contributed widgets by<a href="https://github.com/goriliukasbuxton/ElevationProfile2">goriliukasbuxton</a> and <a href="https://github.com/ERS-Long/ElevationsProfile">ERS-Long</a>.</p>
<p>
<a href="demo.html?config=elevationProfile" target="cmv-demo-elevationProfile" class="btn btn-primary btn-lg">Demo</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Export</h2>
<p>Export features from the Attribute Table widget or other widgets that have a <a href="http://dgrid.io">dgrid</a>. Features can be exported in tabular and spatial formats.</p>
<p>
<a href="demo.html?config=table" target="cmv-demo-table" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=table" target="cmv-demo-table">
<div class="example"><img src="./images/export1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Export Graphics</h2>
<p>The Export Graphics widget works with the widget to allow the user to export graphic features from one or more Graphic or Feature layers.
</p>
<p>
<a href="demo.html?config=exportGraphics" target="cmv-demo-exportGraphics" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=exportGraphics" target="cmv-demo-exportGraphics">
<div class="example"><img src="./images/exportgraphics1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="fullscreen">FullScreen</h2>
<p>A simple widget containing a button to toggle the CMV map to a maximized full screen view and restore it to the original dimensions.</p>
<p>
<a href="demo.html?config=fullscreen" target="cmv-demo-fullscreen" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=fullscreen" target="cmv-demo-fullscreen">
<div class="example"><img src="./images/fullscreen1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Geoprocessor</h2>
<p>An example widget demonstrating the display of results from a Geoprocessing Task in the Attributes Tables widget.</p>
<p>
<a href="demo.html?config=geoprocessor" target="cmv-demo-geoprocessor" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=geoprocessor" target="cmv-demo-geoprocessor">
<div class="example"><img src="./images/geoprocessor1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Heatmap</h2>
<p>The Heatmap widget uses a HeatmapRenderer to render feature layer data into a raster visualization that emphasizes areas of higher density or weighted values. The blur radius, maximum value and minimum value for the renderer can be adjusted. All features from the layer can be included or use draw tools to select a subset of features.</p>
<p>
<a href="demo.html?config=heatmap" target="cmv-demo-heatmap" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=heatmap" target="cmv-demo-heatmap">
<div class="example"><img src="./images/heatmap1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Identify Panel</h2>
<p>A widget to replace the map's infoWindow including integration with the Export widget. You can include your own buttons as well. This widget is an updated and enhanced version of one originally created by <a href="https://github.com/dougrchamberlain/IdentifyPanel">Doug Chamberlain</a>.</p>
<p>
<a href="demo.html?config=identifyPanel" target="cmv-demo-infopanel" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=identifyPanel" target="cmv-demo-infopanel">
<div class="example"><img src="./images/identifypanel1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="export">Introduction</h2>
<p>The Introduction Widget provides a product tour or tutorial for your application using [IntroJS](https://introjs.com/).</p>
<p>
<a href="demo.html?config=introduction" target="cmv-demo-introduction" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=introduction" target="cmv-demo-introduction">
<div class="example"><img src="./images/introduction1.jpg" alt="Screenshot"></div>
</a>
</p>
<p>
<a href="demo.html?config=introduction" target="cmv-demo-introduction">
<div class="example"><img src="./images/introduction2.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="layer-labels">Layer Labels</h2>
<p>A simple widget to add labels for one or more Feature Layers.</p>
<br/><br/>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="layer-toggle">Layer Toggle</h2>
<p>A simple widget to toggle the visibility of a set of layers. Only a single layer in the set can be visible at any time. All others are turned off when the target layer's visibility is set.</p>
<br/><br/>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="locator-control">Locator Control</h2>
<p>A widget to allow the user to change the properties of the CMV Locate Button widget in real-time.</p>
<p>
<a href="demo.html?config=locatorControl" target="cmv-demo-locatorControl" class="btn btn-primary btn-lg">Demo</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="map-loading">Map Loading</h2>
<p>A widget to add a "Loading" indicator in the center of the map.</p>
<p>
<a href="demo.html?config=mapLoading" target="cmv-demo-mapLoading" class="btn btn-primary btn-lg">Demo</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="mapillary">Mapillary</h2>
<p>A replacement for the CMV Google StreetView widget that display street level imagery from <a href="https://www.mapillary.com/">Mapillary</a> using <a href="https://github.com/mapillary/mapillary-js">MapillaryJS</a>.</p>
<p>
<a href="demo.html?config=mapillary" target="cmv-demo-mapillary" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=mapillary" target="cmv-demo-mapillary">
<div class="example"><img src="./images/mapillary1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="layer-labels">Maptiks</h2>
<p>A widget to add detailed map analytics to any CMV application using <a href="https://maptiks.com">Maptiks</a>. Maptiks provides in-depth user insights by tracking how visitors click, pan and zoom on your maps.</p>
<br/><br/>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="messagebox">MessageBox</h2>
<p>Show an Alert or Confirmation modal dialog box. Intended to be called from other widgets.</p>
<p>
<a href="demo.html?config=messagebox" target="cmv-demo-messagebox" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=messagebox" target="cmv-demo-messagebox">
<div class="example"><img src="./images/messagebox1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="multi-field-geocoder">Multi-Field Geocoder</h2>
<p>Coming Soon</p>
<br/><br/>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="open-external-map">Open External Map</h2>
<p>Open maps in an external window for Google Hybrid, Google StreetView, Bing Hybrid, Bing Bird's Eye, Bing Streetside, MapQuest and OpenStreetMap. The map is centered on the coordinates based on a map click or Latitude and Longitude values provided by the user. Can be combined with the <a href="#toggle-streetview-tiles">Toggle StreetView Tiles</a> widget to show the availability of Google StreetView while clicking on the map.</p>
<p>
<a href="demo.html?config=openexternalmap" target="cmv-demo-open-external-map" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=openexternalmap" target="cmv-demo-open-external-map">
<div class="example"><img src="./images/openexternalmap1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="print-plus">Print Plus</h2>
<p>An updated version of the PrintPlus widget originally created by <a href="https://github.com/LarryStout/">Larry Stout</a></p>
<p>
<a href="demo.html?config=printplus" target="cmv-demo-printplus" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=printplus" target="cmv-demo-printplus">
<div class="example"><img src="./images/printplus1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="qrcode">QR Code</h2>
<p>Shows a QR code for the current map to open mobile applications on your phone/tablet.</a></p>
<p>
<a href="demo.html?config=qrcode" target="cmv-demo-qrcode" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=qrcode" target="cmv-demo-qrcode">
<div class="example"><img src="./images/qrcode1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="report">Report</h2>
<p>Highly configurable widget used to create a mult-page PDF report from a single feature or multiple features.</p>
<p>
<a href="demo.html?config=report" target="cmv-demo-report" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=report" target="cmv-demo-report">
<div class="example"><img src="./images/report1.jpg" alt="Screenshot"></div>
</a>
</p>
<p>
<a href="demo.html?config=report" target="cmv-demo-report">
<div class="example"><img src="./images/report2.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="search">Search</h2>
<p>Used in conjunction with the Attribute Table widget to provide a user interface for querying feature layers, dynamic layers, tables and related records using QueryTask and FindTask.</p>
<p>
<a href="demo.html?config=search" target="cmv-demo-search" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=search" target="cmv-demo-search">
<div class="example"><img src="./images/search1.jpg" alt="Screenshot"></div>
</a>
</p>
<p>
<a href="demo.html?config=search" target="cmv-demo-search">
<div class="example"><img src="./images/search2.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="share">Share</h2>
<p>Share your map by using Facebook, Twitter, Google+, E-Mail, Link, or embedded iFrame code.</p>
<p>
<a href="demo.html?config=share" target="cmv-demo-share" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=share" target="cmv-demo-share">
<div class="example"><img src="./images/share1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="toggle-streetview-tiles">Toggle StreetView Tiles</h2>
<p>Used in conjunction with the CMV StreetView widget or the <a href="#open-external-map">Open External Map</a> widget. Shows a StreetView tiles layer when waiting for a map click to get coordinates for the respective widgets.</p>
<p>
<a href="demo.html?config=openexternalmap" target="cmv-demo-open-external-map" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=openexternalmap" target="cmv-demo-open-external-map">
<div class="example"><img src="./images/openexternalmap1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="what3words">What3Words</h2>
<p>A simple widget to send a 3 word address or lat/lng to what3words and zoom the map to the resulting location. The lat/lng and 3 word address for the location are displayed from the search result.</p>
<p>
<a href="https://github.com/tmcgee/cmv-widgets/tree/master/widgets/What3Words" target="cmv-repo-what3words">
<div class="example"><img src="./images/what3words1.jpg" alt="Screenshot"></div>
</a>
</p>
<br/><br/>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 id="zoom-to-feature">Zoom to Feature</h2>
<p>A simple widget to provide a drop-down list of features to zoom to on the map. Similar to bookmarks but driven by actual data in a Map Service.</p>
<p>
<a href="demo.html?config=zoomToFeature" target="cmv-demo-zoom-to-feature" class="btn btn-primary btn-lg">Demo</a>
</p>
<p>
<a href="demo.html?config=zoomToFeature" target="cmv-demo-zoom-to-feature">
<div class="example"><img src="./images/zoomToFeature1.jpg" alt="Screenshot"></div>
</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>