diff --git a/viewer/js/config/basemaps.js b/viewer/js/config/basemaps.js index c7c36fa5d..f30896ff1 100644 --- a/viewer/js/config/basemaps.js +++ b/viewer/js/config/basemaps.js @@ -1,13 +1,12 @@ define([ //'esri/dijit/Basemap', - //'esri/dijit/BasemapLayer', - //'esri/layers/osm' -], function (/* Basemap, BasemapLayer, osm */) { + //'esri/dijit/BasemapLayer' +], function (/* Basemap, BasemapLayer */) { 'use strict'; return { - map: true, // needs a refrence to the map - mode: 'agol', //must be either 'agol' or 'custom' + map: true, // needs a reference to the map + mode: 'agol', // mut be either 'agol' or 'custom' title: 'Basemaps', // title for widget /* optional starting basemap @@ -22,18 +21,18 @@ define([ */ //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 + // define all valid basemaps here. + basemaps: { streets: { title: 'Streets' }, - 'streets-night-vector': { + 'streets-night-vector': { // requires v3.16 or higher title: 'Streets (Night)' }, - 'streets-navigation-vector': { + 'streets-navigation-vector': { // requires v3.16 or higher title: 'Streets (Navigation)' }, - 'streets-relief-vector': { + 'streets-relief-vector': { // requires v3.16 or higher title: 'Street (Relief)' }, satellite: { @@ -48,10 +47,10 @@ define([ 'terrain': { title: 'Terrain' }, - 'gray-vector': { + 'gray-vector': { // requires v3.16 or higher title: 'Gray' }, - 'dark-gray-vector': { + 'dark-gray-vector': { // requires v3.16 or higher title: 'Dark Gray' }, oceans: { @@ -62,16 +61,152 @@ define([ }, 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 + // 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' + } + ] + } + } + */ - /*streets: { + //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' + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' })] }) }, @@ -80,7 +215,7 @@ define([ basemap: new Basemap({ id: 'satellite', layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' })] }) }, @@ -89,13 +224,13 @@ define([ basemap: new Basemap({ id: 'hybrid', layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' + url: 'https://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', + 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: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer', + 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] })] @@ -106,114 +241,63 @@ define([ basemap: new Basemap({ id: 'lightGray', layers: [new BasemapLayer({ - url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer' + url: 'https://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', + url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer', 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', + stamenToner: { + title: 'Toner (maps.stamen.com)', basemap: new Basemap({ - id: 'darkGray', + id: 'stamenToner', layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json', - 'type': 'VectorTileLayer' + url: 'http://tile.stamen.com/toner/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenToner', + type: 'WebTiledLayer' })] }) }, - navigation: { - title: 'Navigation', + stamenTerrain: { + title: 'Terrain (stamen.com)', basemap: new Basemap({ - id: 'navigation', + id: 'stamenTerrain', layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json', - 'type': 'VectorTileLayer' + url: 'http://tile.stamen.com/terrain/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenTerrain', + type: 'WebTiledLayer' })] }) }, - 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', + stamenWatercolor: { + title: 'Watercolor (stamen.com)', basemap: new Basemap({ - id: 'streetsRelief', + id: 'stamenWatercolor', layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json', - 'type': 'VectorTileLayer' + url: 'http://tile.stamen.com/watercolor/${level}/${col}/${row}.png', + copyright: 'stamen, 2016', + id: 'stamenWatercolor', + type: 'WebTiledLayer' })] }) }, - topo: { - title: 'Topographic', + mapboxPirates: { + title: 'Pirates (mapbox.com)', basemap: new Basemap({ - id: 'topo', + id: 'mapboxPirates', layers: [new BasemapLayer({ - 'styleUrl': '//www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json', - 'type': 'VectorTileLayer' + 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 7ce37ddb4..3939f845b 100644 --- a/viewer/js/gis/dijit/Basemaps.js +++ b/viewer/js/gis/dijit/Basemaps.js @@ -4,28 +4,53 @@ define([ 'dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dijit/_WidgetsInTemplateMixin', + 'dojo/_base/lang', - 'dijit/DropDownMenu', - 'dijit/MenuItem', 'dojo/_base/array', 'dojo/topic', 'dojox/lang/functional', - 'dojo/text!./Basemaps/templates/Basemaps.html', + + 'dijit/DropDownMenu', + 'dijit/MenuItem', + + 'esri/basemaps', 'esri/dijit/BasemapGallery', + + 'dojo/text!./Basemaps/templates/Basemaps.html', '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, + functional, + + DropDownMenu, + MenuItem, + + esriBasemaps, + BasemapGallery, + + template, + i18n +) { - // main basemap widget return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { templateString: template, widgetsInTemplate: true, i18n: i18n, - mode: 'agol', title: i18n.title, + mode: 'agol', + basemaps: {}, + currentBasemap: null, mapStartBasemap: null, basemapsToShow: null, @@ -50,8 +75,6 @@ define([ this.mapStartBasemap = this.basemapsToShow[0]; } - this.currentBasemap = this.mapStartBasemap || null; - if (this.mode === 'custom') { this.gallery = new BasemapGallery({ map: this.map, @@ -62,13 +85,24 @@ define([ }); this.gallery.startup(); } - this.menu = new DropDownMenu({ style: 'display: none;' }); array.forEach(this.basemapsToShow, function (basemap) { if (this.basemaps.hasOwnProperty(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; + } + } + } var menuItem = new MenuItem({ id: basemap, label: this.basemaps[basemap].title, @@ -81,14 +115,19 @@ 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)) { + if (!this.basemaps.hasOwnProperty(basemap)) { + return; + } this.currentBasemap = basemap; if (this.mode === 'custom') { this.gallery.select(basemap); } else { this.map.setBasemap(basemap); } + var ch = this.menu.getChildren(); array.forEach(ch, function (c) { if (c.id === basemap) { @@ -99,15 +138,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); } } }