Customize BaseMapGallery & get selected BaseMap

2378
14
Jump to solution
10-22-2018 03:39 AM
EssaddekMohammed
New Contributor II

Hello,

I am using BaseMapGallery to give user the ability to customize map.

I have Two Questions :

  • How to add custom basemaps ? (the default arcgis basemaps are not all available in the widget)
  • How to get selected basemap when the map basemap change ?

Regards

Mohammed

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

In that case just use the portalItem Id:

      map.watch('basemap', function(evt){
        //console.info(evt.portalItem.id);
        switch(evt.portalItem.id){
          case 'd8855ee4d3d74413babfb0f41203b168':
            sbasemap = 'streets';
            break;
          case '86de95d4e0244cba80f0fa2c9403a7b2':
            sbasemap = 'satellite';
            break;
          case '413fd05bbd7342f5991d5ec96f4f8b18':
            sbasemap = 'hybrid';
            break;
          case '6e03e8c26aad4b9c92a87c1063ddb0e3':
            sbasemap = 'topo';
            break;
          case '8b3b470883a744aeb60e5fff0a319ce7':
            sbasemap = 'gray';
            break;
          case '25869b8718c0419db87dad07de5b02d8':
            sbasemap = 'dark-gray';
            break;
          case '48b8cec7ebf04b5fbdcaf70d09daff21':
            sbasemap = 'oceans';
            break;
          case '509e2d6b034246d692a461724ae2d62c':
            sbasemap = 'national-geographic';
            break;
          case 'aab054ab883c4a4094c72e949566ad40':
            sbasemap = 'terrain';
            break;
          case '5d2bfa736f8448b3a1708e1f6be23eed':
            sbasemap = 'osm';
            break;
          default:
            sbasemap = 'noStringConstant';
        }
        console.info(sbasemap);
      });

View solution in original post

14 Replies
RobertScheitlin__GISP
MVP Emeritus

Mohammed,

   What version of the JS API is this question about?

0 Kudos
EssaddekMohammed
New Contributor II

I am using 4.9

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohammed,

1.  What do you mean not all the default basemaps are available? 

The BasemapGallery widget displays a collection images representing basemaps from ArcGIS.com or a user-defined set of map or image services.

2.  You can watch the basemap property or just check the basemap property.

map.watch('basemap', function(evt){
  console.info(evt.title);
});‍‍‍‍
console.info(map.basemap.title);
0 Kudos
EssaddekMohammed
New Contributor II

Riobert,

I mean by that :

The BasemapGallery widget displays a collection images representing basemaps from ArcGIS.com or a user-defined set of map or image services.

I don't find all basemaps mentionned in this URL : Map | API Reference | ArcGIS API for JavaScript 4.9.

I will try the given code.

Regards.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Essaddek,

   So if it is the vector basemaps that you are wanting then see this thread;

https://community.esri.com/thread/218581-easiest-way-to-add-vector-tile-basemaps-to-default-basemap-... 

0 Kudos
EssaddekMohammed
New Contributor II

Hello Robert, i will try the sample once i can.

I've tried this code :

map.watch('basemap', function(evt){
  console.info(evt.title);
});

but this return the name of basemap as shown in the basemapgallery, not the id like : satellite.

Regards

Mohammed

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohammed,

  So just change to: 

console.info(evt);

The evt object is a Basemap class.

0 Kudos
EssaddekMohammed
New Contributor II

Robert,

Unfortunately, i didn't get the information i need. May be it is encapsulated somewhere.

Regards

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Not sure about that. But to can easily determine the id of the basemap based on the title in your code.

0 Kudos