combined arcgis online (agol) and custom basemaps using esri/basemaps

maintained support for existing agol and custom configurations removed BasemapGallery widget custom basemaps allowing for more custom map types
cmv · Mar 20, 2016 · ac12c93 · ac12c93
1 parent 73d510e
commit ac12c93
Showing 1 changed file with 48 additions and 32 deletions.
diff --git a/viewer/js/gis/dijit/Basemaps.js b/viewer/js/gis/dijit/Basemaps.js
@@ -4,28 +4,48 @@ define([
     'dijit/_WidgetBase',
     'dijit/_TemplatedMixin',
     'dijit/_WidgetsInTemplateMixin',
+
     'dojo/_base/lang',
-    'dijit/DropDownMenu',
-    'dijit/MenuItem',
     'dojo/_base/array',
     'dojo/topic',
-    'dojox/lang/functional',
+
+    'dijit/DropDownMenu',
+    'dijit/MenuItem',
+
+    'esri/basemaps',
+
     'dojo/text!./Basemaps/templates/Basemaps.html',
-    'esri/dijit/BasemapGallery',
     'dojo/i18n!./Basemaps/nls/resource',
 
     'dijit/form/DropDownButton',
     'xstyle/css!./Basemaps/css/Basemaps.css'
-], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, DropDownMenu, MenuItem, array, topic, functional, template, BasemapGallery, i18n) {
+], function (
+    declare,
+    _WidgetBase,
+    _TemplatedMixin,
+    _WidgetsInTemplateMixin,
+
+    lang,
+    array,
+    topic,
+
+    DropDownMenu,
+    MenuItem,
+
+    esriBasemaps,
+
+    template,
+    i18n
+) {
 
-    // main basemap widget
     return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
         templateString: template,
         widgetsInTemplate: true,
         i18n: i18n,
-        mode: 'agol',
         title: i18n.title,
 
+        basemaps: {},
+        currentBasemap: null,
         mapStartBasemap: null,
         basemapsToShow: null,
 
@@ -50,25 +70,22 @@ define([
                 this.mapStartBasemap = this.basemapsToShow[0];
             }
 
-            this.currentBasemap = this.mapStartBasemap || null;
-
-            if (this.mode === 'custom') {
-                this.gallery = new BasemapGallery({
-                    map: this.map,
-                    showArcGISBasemaps: false,
-                    basemaps: functional.map(this.basemaps, function (map) {
-                        return map.basemap;
-                    })
-                });
-                this.gallery.startup();
-            }
-
             this.menu = new DropDownMenu({
                 style: 'display: none;'
             });
 
             array.forEach(this.basemapsToShow, function (basemap) {
                 if (this.basemaps.hasOwnProperty(basemap)) {
+                    // add any custom to the esri basemaps
+                    var basemapObj = this.basemaps[basemap];
+                    if (basemapObj.basemap) {
+                        if (!esriBasemaps[basemap]) {
+                            if (!basemapObj.basemap.title) {
+                                basemapObj.basemap.title = basemapObj.title || basemap;
+                            }
+                            esriBasemaps[basemap] = basemapObj.basemap;
+                        }
+                    }
                     var menuItem = new MenuItem({
                         id: basemap,
                         label: this.basemaps[basemap].title,
@@ -81,14 +98,15 @@ define([
             topic.subscribe('basemaps/updateBasemap', lang.hitch(this, 'updateBasemap'));
             this.dropDownButton.set('dropDown', this.menu);
         },
+
         updateBasemap: function (basemap) {
             if (basemap !== this.currentBasemap && (array.indexOf(this.basemapsToShow, basemap) !== -1)) {
-                this.currentBasemap = basemap;
-                if (this.mode === 'custom') {
-                    this.gallery.select(basemap);
-                } else {
-                    this.map.setBasemap(basemap);
+                if (!this.basemaps.hasOwnProperty(basemap)) {
+                    return;
                 }
+                this.currentBasemap = basemap;
+                this.map.setBasemap(basemap);
+
                 var ch = this.menu.getChildren();
                 array.forEach(ch, function (c) {
                     if (c.id === basemap) {
@@ -99,15 +117,13 @@ define([
                 });
             }
         },
+
         startup: function () {
             this.inherited(arguments);
-            if (this.mode === 'custom') {
-                if (this.map.getBasemap() !== this.mapStartBasemap) { //based off the title of custom basemaps in viewer.js config
-                    this.gallery.select(this.mapStartBasemap);
-                }
-            } else if (this.mapStartBasemap) {
-                if (this.map.getBasemap() !== this.mapStartBasemap) { //based off the agol basemap name
-                    this.map.setBasemap(this.mapStartBasemap);
+            if (this.mapStartBasemap) {
+                this.currentBasemap = this.mapStartBasemap;
+                if (this.map.getBasemap() !== this.mapStartBasemap) {
+                    this.updateBasemap(this.mapStartBasemap);
                 }
             }
         }