index.html
<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>