ArcGIS Online Basemap Gallery Group - Call From JavaScript API?

2748
2
12-31-2015 11:38 AM
BrianCollins
Occasional Contributor

Looking for some help calling a custom basemap gallery (group) from ArcGIS Online into our custom JavaScript web application. We could add each of the basemaps individually in the code, but seems like there should be a way to grab the whole group (shared to Everyone) and populate the basemap gallery in our application.

Tags (1)
0 Kudos
2 Replies
ChrisSmith7
Frequent Contributor

Regarding your first solution, adding them individually, I'm assuming you're referring to something like this?

require([
  "esri/dijit/Basemap", ... 
], function(Basemap, ... ) {
  var basemaps = [];
  var waterBasemap = new Basemap({
    layers: [waterTemplateLayer],
    title: "Water Template",
    thumbnailUrl: "images/waterThumb.png"
  });
  basemaps.push(waterBasemap);
  ...

});

On the same API reference page (BasemapGallery | API Reference | ArcGIS API for JavaScript), there's some info on calling a basemap gallery group:

require([
  "esri/map", "esri/dijit/BasemapGallery", "dojo/dom-construct", ...  
], function(Map, BasemapGallery, domConstruct, ... ) {
  var map = new Map( ... );
  var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: true,
    basemapsGroup: { owner: "esri", title: "Community Basemaps" },
    map: map
  }, domConstruct.create('div'));
  ...
});

According to the documentation:

The group can be defined by specifying either the id or the owner and title of the group. If all three parameters are defined only the id is used. If a valid basemapsGroup is defined then the value of showArcGISBasemaps is ignored and the default ArcGIS.com basemaps are not displayed.

BrianCollins
Occasional Contributor

Thanks for the input Chris Smith​...I ended up making a modification from the default call:

var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map,
          portalUrl: "http://myportal.arcgis.com"
        }, "basemapGallery");
basemapGallery.startup();

to add the basemapsGroup param like this:

var basemapGallery = new BasemapGallery({
    map: map,
    basemapsGroup: {
        id: "my arcgis online group id"
    },
    basemapIds: map.layerIds
}, "basemapGallery");
basemapGallery.startup();

Problem solved.