topic Re: Customize BaseMapGallery & get selected BaseMap in ArcGIS JavaScript Maps SDK Questions

Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Mon, 22 Oct 2018 10:39:54 GMT

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

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Mon, 22 Oct 2018 12:48:25 GMT

Mohammed,

What version of the JS API is this question about?

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Mon, 22 Oct 2018 13:52:11 GMT

I am using 4.9

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:02:55 GMT

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);‍

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Mon, 22 Oct 2018 14:13:15 GMT

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.

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Mon, 22 Oct 2018 14:39:51 GMT

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-gallery-widget

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Sun, 12 Dec 2021 02:02:58 GMT

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

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Mon, 22 Oct 2018 15:52:26 GMT

Mohammed,

So just change to:

console.info(evt);

The evt object is a Basemap class.

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Mon, 22 Oct 2018 16:02:19 GMT

Robert,

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

Regards

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Mon, 22 Oct 2018 16:07:02 GMT

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

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Tue, 23 Oct 2018 09:27:24 GMT

This is not possible i think, i will look for a solution once i find it i will share it with the community.

Regards

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:03:01 GMT

Here is what I was referring to:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>BasemapGallery widget - 4.9</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.9/"></script>
  <script>
    var sbasemap = '';
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/BasemapGallery"
    ], function(
      Map, SceneView, BasemapGallery
    ) {
      var map = new Map({
        basemap: "gray"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        center: [139.68, 35.68],
        zoom: 3
      });

      var basemapGallery = new BasemapGallery({
        view: view
      });

      // Add the widget to the top-right corner of the view
      view.ui.add(basemapGallery, {
        position: "top-right"
      });
      
      map.watch('basemap', function(evt){
        switch(evt.title){
          case 'Streets':
            sbasemap = 'streets';
            break;
          case 'Imagery':
            sbasemap = 'satellite';
            break;
          case 'Imagery with Labels':
            sbasemap = 'hybrid';
            break;
          case 'Topographic':
            sbasemap = 'topo';
            break;
          case 'Light Gray Canvas':
            sbasemap = 'gray';
            break;
          case 'Dark Gray Canvas':
            sbasemap = 'dark-gray';
            break;
          case 'Oceans':
            sbasemap = 'oceans';
            break;
          case 'National Geographic':
            sbasemap = 'national-geographic';
            break;
          case 'Terrain with Labels':
            sbasemap = 'terrain';
            break;
          case 'OpenStreetMap':
            sbasemap = 'osm';
            break;
          default:
            sbasemap = 'noStringConstant';
        }
        console.info(sbasemap);
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Tue, 23 Oct 2018 14:20:31 GMT

Hello,

Since my application is multilingual, it would be harder to hold up all the names.

Thanks for your answer.

Regards

Re: Customize BaseMapGallery & get selected BaseMap

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:03:04 GMT

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);
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Customize BaseMapGallery & get selected BaseMap

EssaddekMohammed — Tue, 23 Oct 2018 15:27:46 GMT

Thank You, it works !