Basemap gallery

KeisukeNozaki — Thu, 14 Aug 2014 13:31:15 GMT

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.

Re: Basemap gallery

TimWitt2 — Thu, 14 Aug 2014 13:32:58 GMT

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

Re: Basemap gallery

KeisukeNozaki — Thu, 14 Aug 2014 14:40:30 GMT

Thanks!

I am not familiar with legacy but understand the concept.

Hope esri will update the code for AMD.

Re: Basemap gallery

TimWitt2 — Thu, 14 Aug 2014 14:43:53 GMT

This might help: The abc’s of AMD | ArcGIS Blog‌

Re: Basemap gallery

BrandonVan_Horn — Thu, 14 Aug 2014 16:34:25 GMT

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

Re: Basemap gallery

StanMcShinsky — Thu, 14 Aug 2014 16:42:19 GMT

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/MapServer"

});

var basemap = new Basemap({

    layers:[layer],

    title:"Public Safety",

    thumbnailUrl:"images/safetyThumb.png"

});

basemapGallery.add(basemap);

...
});

topic Re: Basemap gallery in ArcGIS JavaScript Maps SDK Questions

Basemap gallery

Re: Basemap gallery

Re: Basemap gallery

Re: Basemap gallery

Re: Basemap gallery

Re: Basemap gallery