Merge pull request #625 from cmv/feature/add-basemap-gallery-widget

Add new basemap gallery widget

README.md

@@ -14,7 +14,8 @@ This JavaScript web app can be easily configured or used as a boilerplate/starti
 ![screen shot 2014-08-20 at 9 59 48 pm](https://cloud.githubusercontent.com/assets/661156/3991302/5aa2e0f2-28df-11e4-94d0-9c813937d933.png)
 
 ## Widgets Included:
-- Base Maps
+- Basemaps
+- Basemaps Gallery
 - Bookmarks
 - Directions
 - Draw

viewer/css/cmv-theme-overrides.css

@@ -12,6 +12,11 @@
     background-color: #F5F5F5;
 }
 
+.cmv .dijitTitlePaneTitleOpen {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 .cmv label {
     font-weight: bold;
 }

viewer/js/gis/dijit/BasemapGallery.js

@@ -0,0 +1,65 @@
+define([
+    'dojo/_base/declare',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+
+    'dojo/_base/lang',
+    'dojo/topic',
+
+    'esri/dijit/BasemapGallery',
+
+    'dojo/text!./BasemapGallery/templates/BasemapGallery.html',
+    'dojo/i18n!./BasemapGallery/nls/resource',
+
+    'dijit/layout/ContentPane',
+    'dijit/TitlePane',
+
+    'xstyle/css!./BasemapGallery/css/BasemapGallery.css'
+
+], function (
+    declare,
+    _WidgetBase,
+    _TemplatedMixin,
+    _WidgetsInTemplateMixin,
+
+    lang,
+    topic,
+
+    BasemapGallery,
+
+    template,
+    i18n
+) {
+
+    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+        widgetsInTemplate: true,
+        templateString: template,
+        i18n: i18n,
+        baseClass: 'cmvBasemapGalleryWidget',
+
+        galleryOptions: {
+            showArcGISBasemaps: true
+        },
+
+        postCreate: function () {
+            this.inherited(arguments);
+
+            var opts = lang.mixin({
+                map: this.map
+            }, this.galleryOptions || {});
+            this.basemapGallery = new BasemapGallery(opts, 'basemapGallery');
+            this.basemapGallery.startup();
+
+            this.basemapGallery.on('selection-change', lang.hitch(this, 'basemapSelected'));
+
+            this.basemapGallery.on('error', function (msg) {
+                topic.publish('viewer/handleError', 'basemap gallery error: ' + msg);
+            });
+        },
+
+        basemapSelected: function (/* basemap */) {
+            this.basemapGalleryTitlePane.set('open', false);
+        }
+    });
+});

viewer/js/gis/dijit/BasemapGallery/css/BasemapGallery.css

@@ -0,0 +1,41 @@
+.cmvBasemapGalleryWidget .dijitTitlePane {
+   border-radius: 4px;
+}
+
+.cmvBasemapGalleryWidget .dijitTitlePaneTitle {
+    border-color: #BBB;
+    padding: 4px;
+}
+
+.cmvBasemapGalleryWidget .dijitTitlePane .dijitArrowNode {
+    float: right;
+    padding-top: 3px;
+}
+
+.cmvBasemapGalleryWidget .dijitTitlePaneTextNode:before {
+    content: '\f009';
+    font-family: FontAwesome;
+}
+
+.cmvBasemapGalleryWidget .dijitTitlePaneContentOuter {
+    border-color: #BBB;
+}
+
+.cmvBasemapGalleryWidget .dijitTitlePaneContentInner {
+    padding: 0;
+}
+
+.cmvBasemapGalleryWidget .basemapGalleryContent {
+    height: 280px;
+    overflow:auto;
+    width: 410px;
+}
+.cmvBasemapGalleryWidget .esriBasemapGalleryNode {
+    margin: 5px 15px;
+}
+
+@media screen and (max-width: 767px) {
+    .cmvBasemapGalleryWidget .basemapGalleryContent {
+        width: 140px;
+    }
+}

viewer/js/gis/dijit/BasemapGallery/nls/es/resource.js

@@ -0,0 +1,3 @@
+define ({
+    title: 'Mapas base'
+});

viewer/js/gis/dijit/BasemapGallery/nls/fr/resource.js

@@ -0,0 +1,3 @@
+define ({
+    title: 'Fond de carte'
+});

viewer/js/gis/dijit/BasemapGallery/nls/pt-br/resource.js

@@ -0,0 +1,3 @@
+define ({
+    title: 'Mapas base'
+});

viewer/js/gis/dijit/BasemapGallery/nls/pt-pt/resource.js

@@ -0,0 +1,3 @@
+define({
+    title: 'Mapas base'
+});

viewer/js/gis/dijit/BasemapGallery/nls/resource.js

@@ -0,0 +1,9 @@
+define ({
+    root: {
+        title: 'Basemaps'
+    },
+    'es': true,
+    'fr': true,
+    'pt-br': true,
+    'pt-pt': true
+});

viewer/js/gis/dijit/BasemapGallery/templates/BasemapGallery.html

@@ -0,0 +1,7 @@
+<div>
+    <div data-dojo-type="dijit/TitlePane" data-dojo-attach-point="basemapGalleryTitlePane" data-dojo-props="title:'${i18n.title}', open:false">
+        <div data-dojo-type="dijit/layout/ContentPane" class="basemapGalleryContent">
+            <div id="basemapGallery"></div>
+        </div>
+    </div>
+</div>