I wonder if there is a way to customize basemap gallery to set own tiled map services instead of ArcGIS.com maps.
Thank you for your advice.
Hey Keisuke,
Check out this example:
Basemap Gallery - user-defined items | ArcGIS API for JavaScript
It is in legacy, but it should give you an idea on how to do it.
Tim
Thanks!
I am not familiar with legacy but understand the concept.
Hope esri will update the code for AMD.
This might help: The abc’s of AMD | ArcGIS Blog
I have this implemented in AMD. I use a config file with the basemaps that I want included, and I call createBasemapGallery() at the end of my map load event.
function createBasemapGallery() {
/// <summary>manually create basemaps to add to basemap gallery</summary>
try {
var basemaps = [];
require(["esri/dijit/BasemapGallery", "esri/dijit/BasemapLayer", "esri/dijit/Basemap"], function (
BasemapGallery, BasemapLayer, Basemap
) {
for (b in mybasemaps) {
//load from config array of basemaps
if (mybasemaps.addtomap == true) {
var bm = null
bm = new esri.dijit.BasemapLayer({ url: mybasemaps.url });
var layerBasemap = new esri.dijit.Basemap({
layers: [bm],
id: mybasemaps.svcid,
title: mybasemaps.title,
thumbnailUrl: mybasemaps.thumbnailUrl
});
basemaps.push(layerBasemap)
};
};
//add the basemap gallery, in this case we'll display maps from ArcGIS.com
var basemapGallery = new BasemapGallery({
basemaps: basemaps,
showArcGISBasemaps: false /*config.external*/,
map: map
}, "basemapGallery");
basemapGallery.startup();
// if (config.external) {
// basemapGallery.select('ESRITerrain');
// }
basemapGallery.on("error", handleProcessError);
});
} catch (err) {
errorHandler(err, "createBasemapGallery")
};
};
//config array of mybasemaps
var mybasemaps = {
"ESRITerrain": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",
"svcid": "ESRITerrain", "title": "Terrain (Default)", "thumbnailUrl": "img/thumbs/Terrain_ne_usa.png", "addtomap": config.external
},
"Pic2013": { "url": ArcServer + "Pictometry2013/MapServer",
"svcid": "Pic2013", "title": "Prescott/Prescott Valley 2013", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
},
"ESRIImagery": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
"svcid": "ESRIImagery", "title": "ESRI Imagery", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": config.external
},
// },"NAIP2013": { "url":"http://gis.apfo.usda.gov/arcgis/rest/services/NAIP/Arizona_2013_1m_NC/ImageServer",
// "svcid": "NAIP2013", "title": "NAIP 2013", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
// },
"NAIP2011": { "url": ArcServer + "NAIP2010/MapServer",
"svcid": "NAIP2010", "title": "NAIP 2010", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
},
"AE2009": { "url": ArcServer + "AE2009a/MapServer",
"svcid": "AE2009", "title": "Aerial Express 2009", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
},
"DG2007": { "url": ArcServer + "DG2007/MapServer",
"svcid": "DG2007", "title": "Digital Globe 2007", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
},
"NAIP2007": { "url": ArcServer + "NAIP2007/MapServer",
"svcid": "NAIP2007", "title": "NAIP 2007", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true
},
"Blank": { "url": "http://gis.yavapai.us/arcgis/rest/services/NoBasemap/MapServer",
"svcid": "Blank", "title": "No Basemap", "thumbnailUrl": "img/thumbs/Terrain_ne_usa.png", "addtomap": true
},
"ESRIStreets": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
"svcid": "ESRIStreets", "title": "Streets", "thumbnailUrl": "img/thumbs/streets.jpg", "addtomap": config.external
},
"ESRINatGeo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
"svcid": "ESRINatGeo", "title": "National Geographic", "thumbnailUrl": "img/thumbs/natgeo.jpg", "addtomap": config.external
},
"ESRI_Topo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
"svcid": "ESRI_Topo", "title": "Topographic", "thumbnailUrl": "img/thumbs/topographic.jpg", "addtomap": config.external
},
"Delorme_Topo": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
"svcid": "Delorme_Topo", "title": "Delorme Topo", "thumbnailUrl": "img/thumbs/topographic.jpg", "addtomap": config.external
},
"USATopo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",
"svcid": "USATopo", "title": "USGS Topo", "thumbnailUrl": "img/thumbs/usa_topo.jpg", "addtomap": config.external
}
};
Hope that helps
In the ESRI JS API reference there is sample code to show how to do this using arcgis online basemaps and custom ones.
You need to use the BasemapLayer dijit.
basemapgallery-amd | API Reference | ArcGIS API for JavaScript
Here is how you would add your own basemap to a gallary
require([
"esri/dijit/BasemapLayer", "esri/dijit/Basemap", ...
], function(BasemapLayer, Basemap, ... ) {
var layer = new BasemapLayer({
url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..."
});
var basemap = new Basemap({
layers:[layer],
title:"Public Safety",
thumbnailUrl:"images/safetyThumb.png"
});
basemapGallery.add(basemap);
...
});