Add new Mapillary widget

tmcgee · Jun 21, 2017 · d93edc2 · d93edc2
1 parent 95d5853
commit d93edc2
Show file tree

Hide file tree

Showing 15 changed files with 736 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ Widgets for [CMV](http://cmv.io/), the Configurable Map Viewer created by [Tim M
 - [Geoprocessor](https://github.com/tmcgee/cmv-widgets#geoprocessor)
 - [Layer Labels](https://github.com/tmcgee/cmv-widgets#layer-labels)
 - [Layer Toggle](https://github.com/tmcgee/cmv-widgets#layer-toggle)
+- [Mapillary](https://github.com/tmcgee/cmv-widgets#mapillary)
 - [MessageBox](https://github.com/tmcgee/cmv-widgets#messagebox)
 - [Open External Map](https://github.com/tmcgee/cmv-widgets#open-external-map)
 - [Print Plus](https://github.com/tmcgee/cmv-widgets#print-plus)
@@ -81,6 +82,13 @@ A simple widget to toggle the visibility of a set of layers. Only a single layer
 ##### Documentation - in the works
 ##### [Widget](https://github.com/tmcgee/cmv-widgets/tree/master/widgets/LayerToggle.js)
 
+---
+### Mapillary
+A replacement for the CMV Google StreetView widget that display street level imagery from [Mapillary](https://www.mapillary.com/) using [MapillaryJS](https://github.com/mapillary/mapillary-js).
+##### [Documentation](https://github.com/tmcgee/cmv-widgets/tree/master/widgets/Mapillary/README.md)
+##### [Demo](http://tmcgee.github.io/cmv-widgets/demo.html?config=mapillary)
+![Screenshot](https://tmcgee.github.io/cmv-widgets/images/mapillary1.jpg)
+
 ---
 ### MessageBox
 Show an Alert or Confirmation modal dialog box. Intended to be called from other widgets.

diff --git a/config/mapillary.js b/config/mapillary.js
@@ -0,0 +1,51 @@
+define({
+    isDebug: true,
+
+    mapOptions: {
+        basemap: 'topo',
+        center: [-122.435, 37.775],
+        zoom: 13,
+        sliderStyle: 'small'
+    },
+
+    titles: {
+        header: 'CMV Mapillary Widget',
+        subHeader: 'This is an example of displaying street level imagery from Mapillary',
+        pageTitle: 'CMV Mapillary Widget'
+    },
+
+    collapseButtonsPane: 'center', //center or outer
+
+    operationalLayers: [],
+
+    widgets: {
+        mapillary: {
+            include: true,
+            type: 'titlePane',
+            title: 'Mapillary',
+            iconClass: 'fa-location-arrow fa-rotate-90',
+            open: true,
+            position: 0,
+            path: 'widgets/Mapillary',
+            canFloat: true,
+            paneOptions: {
+                resizable: true,
+                resizeOptions: {
+                    minSize: {
+                        w: 250,
+                        h: 250
+                    }
+                }
+            },
+            options: {
+                map: true,
+                mapillaryOptions: {
+                    // this is for demo purposes only
+                    // get your own clientID at mapillary.com
+                    clientID: 'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTpiNjQ0MTgzNTIzZGM2Mjhl',
+                    photoID: null
+                }
+            }
+        }
+    }
+});
diff --git a/images/mapillary1.jpg b/images/mapillary1.jpg
diff --git a/index.html b/index.html
@@ -159,6 +159,22 @@ <h2 id="layer-toggle">Layer Toggle</h2>
                     </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="messagebox">MessageBox</h2>