From ac12c93e4845854f09ec87b6d4c16df1bf36b4c0 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sun, 20 Mar 2016 12:09:07 -0700 Subject: [PATCH 1/3] 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 --- viewer/js/gis/dijit/Basemaps.js | 80 ++++++++++++++++++++------------- 1 file changed, 48 insertions(+), 32 deletions(-) diff --git a/viewer/js/gis/dijit/Basemaps.js b/viewer/js/gis/dijit/Basemaps.js index 7ce37ddb4..ff655a1d4 100644 --- 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); } } } From 25a3893c2af2a394affa2e1d92bf59a0ec2ade15 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sun, 20 Mar 2016 12:18:21 -0700 Subject: [PATCH 2/3] updated configuration with examples of combined agol and custom basemaps Basemap and BasemapLayer dijits no longer needed for custom basemaps some of the examples required v 3.16 or higher of the ESRI JavaScript API --- viewer/js/config/basemaps.js | 381 +++++++++++++++++------------------ 1 file changed, 186 insertions(+), 195 deletions(-) diff --git a/viewer/js/config/basemaps.js b/viewer/js/config/basemaps.js index 28bd4bd92..c01c99988 100644 --- a/viewer/js/config/basemaps.js +++ b/viewer/js/config/basemaps.js @@ -1,204 +1,195 @@ -define([ - //'esri/dijit/Basemap', - //'esri/dijit/BasemapLayer', - //'esri/layers/osm' -], function (/* Basemap, BasemapLayer, osm */) { - 'use strict'; +define({ + map: true, // needs a refrence to the map + title: 'Basemaps', // title for widget - return { - map: true, // needs a refrence to the map - mode: 'agol', //must be either 'agol' or 'custom' - title: 'Basemaps', // title for widget + /* optional starting basemap + / otherwise uses the basemap from the map + / must match one of the keys in basemaps object below + */ + //mapStartBasemap: 'streets', - /* optional starting basemap - / otherwise uses the basemap from the map - / must match one of the keys in basemaps object below - */ - //mapStartBasemap: 'streets', - - /* optional array of basemaps to show in menu. - / otherwise uses keys in basemaps object below - / values in array must match keys in basemaps object - */ - //basemapsToShow: ['streets', 'satellite', 'hybrid', 'topo', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'], + /* optional array of basemaps to show in menu. + / otherwise uses keys in basemaps object below + / values in array must match keys in basemaps object + */ + //basemapsToShow: ['streets', 'satellite', 'hybrid', 'topo', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'], - // define all valid custom basemaps here. Object of Basemap objects. For custom basemaps, the key name and basemap id must match. - basemaps: { // agol basemaps - streets: { - title: 'Streets' - }, - satellite: { - title: 'Satellite' - }, - hybrid: { - title: 'Hybrid' - }, - topo: { - title: 'Topo' - }, - gray: { - title: 'Gray' - }, - oceans: { - title: 'Oceans' - }, - 'national-geographic': { - title: 'Nat Geo' - }, - osm: { - title: 'Open Street Map' + // define all valid basemaps here. + basemaps: { + streets: { + title: 'Streets' + }, + 'streets-night-vector': { // requires v3.16 or higher + title: 'Streets (Night)' + }, + 'streets-navigation-vector': { // requires v3.16 or higher + title: 'Streets (Navigation)' + }, + 'streets-relief-vector': { // requires v3.16 or higher + title: 'Street (Relief)' + }, + satellite: { + title: 'Satellite' + }, + hybrid: { + title: 'Hybrid' + }, + topo: { + title: 'Topo' + }, + 'terrain': { + title: 'Terrain' + }, + 'gray-vector': { // requires v3.16 or higher + title: 'Gray' + }, + 'dark-gray-vector': { // requires v3.16 or higher + title: 'Dark Gray' + }, + oceans: { + title: 'Oceans' + }, + 'national-geographic': { + title: 'Nat Geo' + }, + osm: { + title: 'Open Street Map' + }, + LandsatShaded: { + title: 'Landsat Shaded', + basemap: { + baseMapLayers: [ + { + url: 'https://imagery.arcgisonline.com/arcgis/rest/services/LandsatGLS/LandsatShadedBasemap/ImageServer' + } + ] } + }, + EarthAtNight: { + title: 'Earth at Night', + basemap: { + baseMapLayers: [ + { + url: 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Earth_at_Night_WM/MapServer' + } + ] + } + }, + DavidRumseyMap1812: { + title: 'David Rumsey 1812', + basemap: { + baseMapLayers: [ + { + url: 'http://tiles.arcgis.com/tiles/IEuSomXfi6iB7a25/arcgis/rest/services/World_Globe_1812/MapServer' + } + ] + } + } - // examples of custom basemaps - - /*streets: { - title: 'Streets', - basemap: new Basemap({ - id: 'streets', - layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' - })] - }) - }, - satellite: { - title: 'Satellite', - basemap: new Basemap({ - id: 'satellite', - layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - })] - }) - }, - hybrid: { - title: 'Hybrid', - basemap: new Basemap({ - id: 'hybrid', - layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - }), new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer', - isReference: true, - displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] - }), new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer', - isReference: true, - displayLevels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] - })] - }) - }, - lightGray: { - title: 'Light Gray Canvas', - basemap: new Basemap({ - id: 'lightGray', - layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer' - }), new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer', + // additional examples of vector tile basemaps (requires v3.16 or higher) + /* + streetsVector: { + title: 'Streets', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + satelliteVector: { + title: 'Satellite', + basemap: { + baseMapLayers: [ + { + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + } + ] + } + }, + hybridVector: { + title: 'Hybrid', + basemap: { + baseMapLayers: [ + { + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + }, + { + url: 'https://www.arcgis.com/sharing/rest/content/items/1854498c7e35420b963a514a32689c80/resources/styles/root.json', + type: 'VectorTile', isReference: true - })] - }) - }*/ - - // example using vector tile basemaps (beta in v3.15) - - /* - streets: { - title: 'Streets', - basemap: new Basemap({ - id: 'streets', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - satellite: { - title: 'Satellite', - basemap: new Basemap({ - id: 'satellite', - layers: [new BasemapLayer({ - url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - })] - }) - }, - hybrid: { - title: 'Hybrid', - basemap: new Basemap({ - id: 'hybrid', - layers: [ - new BasemapLayer({ - url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - }), - new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/1854498c7e35420b963a514a32689c80/resources/styles/root.json', - 'type': 'VectorTileLayer', - isReference: true - }) - ] - }) - }, - lightGray: { - title: 'Light Gray Canvas', - basemap: new Basemap({ - id: 'lightGray', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - darkGray: { - title: 'Dark Gray Canvas', - basemap: new Basemap({ - id: 'darkGray', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - navigation: { - title: 'Navigation', - basemap: new Basemap({ - id: 'navigation', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - streetsNight: { - title: 'Streets Night', - basemap: new Basemap({ - id: 'streetsNight', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - streetsRelief: { - title: 'Streets w/ Relief', - basemap: new Basemap({ - id: 'streetsRelief', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) - }, - topo: { - title: 'Topographic', - basemap: new Basemap({ - id: 'topo', - layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json', - 'type': 'VectorTileLayer' - })] - }) + } + ] + } + }, + lightGrayVector: { + title: 'Light Gray Canvas', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + darkGrayVector: { + title: 'Dark Gray Canvas', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + navigationVector: { + title: 'Navigation', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + streetsNightVector: { + title: 'Streets Night', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + streetsReliefVector: { + title: 'Streets w/ Relief', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + topoVector: { + title: 'Topographic', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json', + type: 'VectorTile' + } + ] } - */ - } - }; + */ + } }); \ No newline at end of file From 68e9b768799067856ce97445e38080ad6b7ea2c5 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sat, 26 Mar 2016 12:14:55 -0700 Subject: [PATCH 3/3] restored `custom` mode for basemaps widget. Custom basemaps are also supported in agol mode for those types of basemaps which are supported by `esri/basemaps` Added additional examples of custom basemaps using WebMapTiled layers --- viewer/js/config/basemaps.js | 474 ++++++++++++++++++++------------ viewer/js/gis/dijit/Basemaps.js | 37 ++- 2 files changed, 320 insertions(+), 191 deletions(-) diff --git a/viewer/js/config/basemaps.js b/viewer/js/config/basemaps.js index c01c99988..f30896ff1 100644 --- a/viewer/js/config/basemaps.js +++ b/viewer/js/config/basemaps.js @@ -1,195 +1,303 @@ -define({ - map: true, // needs a refrence to the map - title: 'Basemaps', // title for widget +define([ + //'esri/dijit/Basemap', + //'esri/dijit/BasemapLayer' +], function (/* Basemap, BasemapLayer */) { + 'use strict'; - /* optional starting basemap - / otherwise uses the basemap from the map - / must match one of the keys in basemaps object below - */ - //mapStartBasemap: 'streets', + return { + map: true, // needs a reference to the map + mode: 'agol', // mut be either 'agol' or 'custom' + title: 'Basemaps', // title for widget - /* optional array of basemaps to show in menu. - / otherwise uses keys in basemaps object below - / values in array must match keys in basemaps object - */ - //basemapsToShow: ['streets', 'satellite', 'hybrid', 'topo', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'], + /* optional starting basemap + / otherwise uses the basemap from the map + / must match one of the keys in basemaps object below + */ + //mapStartBasemap: 'streets', - // define all valid basemaps here. - basemaps: { - streets: { - title: 'Streets' - }, - 'streets-night-vector': { // requires v3.16 or higher - title: 'Streets (Night)' - }, - 'streets-navigation-vector': { // requires v3.16 or higher - title: 'Streets (Navigation)' - }, - 'streets-relief-vector': { // requires v3.16 or higher - title: 'Street (Relief)' - }, - satellite: { - title: 'Satellite' - }, - hybrid: { - title: 'Hybrid' - }, - topo: { - title: 'Topo' - }, - 'terrain': { - title: 'Terrain' - }, - 'gray-vector': { // requires v3.16 or higher - title: 'Gray' - }, - 'dark-gray-vector': { // requires v3.16 or higher - title: 'Dark Gray' - }, - oceans: { - title: 'Oceans' - }, - 'national-geographic': { - title: 'Nat Geo' - }, - osm: { - title: 'Open Street Map' - }, - LandsatShaded: { - title: 'Landsat Shaded', - basemap: { - baseMapLayers: [ - { - url: 'https://imagery.arcgisonline.com/arcgis/rest/services/LandsatGLS/LandsatShadedBasemap/ImageServer' - } - ] - } - }, - EarthAtNight: { - title: 'Earth at Night', - basemap: { - baseMapLayers: [ - { - url: 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Earth_at_Night_WM/MapServer' - } - ] - } - }, - DavidRumseyMap1812: { - title: 'David Rumsey 1812', - basemap: { - baseMapLayers: [ - { - url: 'http://tiles.arcgis.com/tiles/IEuSomXfi6iB7a25/arcgis/rest/services/World_Globe_1812/MapServer' - } - ] + /* optional array of basemaps to show in menu. + / otherwise uses keys in basemaps object below + / values in array must match keys in basemaps object + */ + //basemapsToShow: ['streets', 'satellite', 'hybrid', 'topo', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'], + + // define all valid basemaps here. + basemaps: { + streets: { + title: 'Streets' + }, + 'streets-night-vector': { // requires v3.16 or higher + title: 'Streets (Night)' + }, + 'streets-navigation-vector': { // requires v3.16 or higher + title: 'Streets (Navigation)' + }, + 'streets-relief-vector': { // requires v3.16 or higher + title: 'Street (Relief)' + }, + satellite: { + title: 'Satellite' + }, + hybrid: { + title: 'Hybrid' + }, + topo: { + title: 'Topo' + }, + 'terrain': { + title: 'Terrain' + }, + 'gray-vector': { // requires v3.16 or higher + title: 'Gray' + }, + 'dark-gray-vector': { // requires v3.16 or higher + title: 'Dark Gray' + }, + oceans: { + title: 'Oceans' + }, + 'national-geographic': { + title: 'Nat Geo' + }, + osm: { + title: 'Open Street Map' + }, + LandsatShaded: { + title: 'Landsat Shaded', + basemap: { + baseMapLayers: [ + { + url: 'https://imagery.arcgisonline.com/arcgis/rest/services/LandsatGLS/LandsatShadedBasemap/ImageServer' + } + ] + } + }, + EarthAtNight: { + title: 'Earth at Night', + basemap: { + baseMapLayers: [ + { + url: 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Earth_at_Night_WM/MapServer' + } + ] + } + }, + DavidRumseyMap1812: { + title: 'David Rumsey 1812', + basemap: { + baseMapLayers: [ + { + url: 'http://tiles.arcgis.com/tiles/IEuSomXfi6iB7a25/arcgis/rest/services/World_Globe_1812/MapServer' + } + ] + } } - } - // additional examples of vector tile basemaps (requires v3.16 or higher) - /* - streetsVector: { - title: 'Streets', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/root.json', - type: 'VectorTile' - } - ] + // additional examples of vector tile basemaps (requires v3.16 or higher) + /* + streetsVector: { + title: 'Streets', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + satelliteVector: { + title: 'Satellite', + basemap: { + baseMapLayers: [ + { + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + } + ] + } + }, + hybridVector: { + title: 'Hybrid', + basemap: { + baseMapLayers: [ + { + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + }, + { + url: 'https://www.arcgis.com/sharing/rest/content/items/1854498c7e35420b963a514a32689c80/resources/styles/root.json', + type: 'VectorTile', + isReference: true + } + ] + } + }, + lightGrayVector: { + title: 'Light Gray Canvas', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + darkGrayVector: { + title: 'Dark Gray Canvas', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + navigationVector: { + title: 'Navigation', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + streetsNightVector: { + title: 'Streets Night', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + streetsReliefVector: { + title: 'Streets w/ Relief', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json', + type: 'VectorTile' + } + ] + } + }, + topoVector: { + title: 'Topographic', + basemap: { + baseMapLayers: [ + { + url: 'https://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json', + type: 'VectorTile' + } + ] + } } - }, - satelliteVector: { - title: 'Satellite', - basemap: { - baseMapLayers: [ - { + */ + + //examples of custom basemaps + /* + streets: { + title: 'Streets', + basemap: new Basemap({ + id: 'streets', + layers: [new BasemapLayer({ + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' + })] + }) + }, + satellite: { + title: 'Satellite', + basemap: new Basemap({ + id: 'satellite', + layers: [new BasemapLayer({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - } - ] - } - }, - hybridVector: { - title: 'Hybrid', - basemap: { - baseMapLayers: [ - { + })] + }) + }, + hybrid: { + title: 'Hybrid', + basemap: new Basemap({ + id: 'hybrid', + layers: [new BasemapLayer({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - }, - { - url: 'https://www.arcgis.com/sharing/rest/content/items/1854498c7e35420b963a514a32689c80/resources/styles/root.json', - type: 'VectorTile', + }), new BasemapLayer({ + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer', + isReference: true, + displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] + }), new BasemapLayer({ + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer', + isReference: true, + displayLevels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] + })] + }) + }, + lightGray: { + title: 'Light Gray Canvas', + basemap: new Basemap({ + id: 'lightGray', + layers: [new BasemapLayer({ + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer' + }), new BasemapLayer({ + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer', isReference: true - } - ] - } - }, - lightGrayVector: { - title: 'Light Gray Canvas', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json', - type: 'VectorTile' - } - ] - } - }, - darkGrayVector: { - title: 'Dark Gray Canvas', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json', - type: 'VectorTile' - } - ] - } - }, - navigationVector: { - title: 'Navigation', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json', - type: 'VectorTile' - } - ] - } - }, - streetsNightVector: { - title: 'Streets Night', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json', - type: 'VectorTile' - } - ] - } - }, - streetsReliefVector: { - title: 'Streets w/ Relief', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json', - type: 'VectorTile' - } - ] - } - }, - topoVector: { - title: 'Topographic', - basemap: { - baseMapLayers: [ - { - url: 'https://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json', - type: 'VectorTile' - } - ] + })] + }) + }, + stamenToner: { + title: 'Toner (maps.stamen.com)', + basemap: new Basemap({ + id: 'stamenToner', + layers: [new BasemapLayer({ + url: 'http://tile.stamen.com/toner/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenToner', + type: 'WebTiledLayer' + })] + }) + }, + stamenTerrain: { + title: 'Terrain (stamen.com)', + basemap: new Basemap({ + id: 'stamenTerrain', + layers: [new BasemapLayer({ + url: 'http://tile.stamen.com/terrain/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenTerrain', + type: 'WebTiledLayer' + })] + }) + }, + stamenWatercolor: { + title: 'Watercolor (stamen.com)', + basemap: new Basemap({ + id: 'stamenWatercolor', + layers: [new BasemapLayer({ + url: 'http://tile.stamen.com/watercolor/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenWatercolor', + type: 'WebTiledLayer' + })] + }) + }, + mapboxPirates: { + title: 'Pirates (mapbox.com)', + basemap: new Basemap({ + id: 'mapboxPirates', + layers: [new BasemapLayer({ + url: 'https://${subDomain}.tiles.mapbox.com/v3/aj.Sketchy2/${level}/${col}/${row}.png', + copyright: 'mapbox, 2016', + id: 'mapboxPirates', + subDomains: ['a', 'b', 'c', 'd'], + type: 'WebTiledLayer' + })] + }) } + */ } - */ - } + }; }); \ No newline at end of file diff --git a/viewer/js/gis/dijit/Basemaps.js b/viewer/js/gis/dijit/Basemaps.js index ff655a1d4..3939f845b 100644 --- a/viewer/js/gis/dijit/Basemaps.js +++ b/viewer/js/gis/dijit/Basemaps.js @@ -8,11 +8,13 @@ define([ 'dojo/_base/lang', 'dojo/_base/array', 'dojo/topic', + 'dojox/lang/functional', 'dijit/DropDownMenu', 'dijit/MenuItem', 'esri/basemaps', + 'esri/dijit/BasemapGallery', 'dojo/text!./Basemaps/templates/Basemaps.html', 'dojo/i18n!./Basemaps/nls/resource', @@ -28,11 +30,13 @@ define([ lang, array, topic, + functional, DropDownMenu, MenuItem, esriBasemaps, + BasemapGallery, template, i18n @@ -43,6 +47,7 @@ define([ widgetsInTemplate: true, i18n: i18n, title: i18n.title, + mode: 'agol', basemaps: {}, currentBasemap: null, @@ -70,20 +75,32 @@ define([ this.mapStartBasemap = this.basemapsToShow[0]; } + 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; + if (this.mode !== 'custom') { + // 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; } - esriBasemaps[basemap] = basemapObj.basemap; } } var menuItem = new MenuItem({ @@ -105,7 +122,11 @@ define([ return; } this.currentBasemap = basemap; - this.map.setBasemap(basemap); + if (this.mode === 'custom') { + this.gallery.select(basemap); + } else { + this.map.setBasemap(basemap); + } var ch = this.menu.getChildren(); array.forEach(ch, function (c) {