Customize BaseMapGallery & get selected BaseMap

2420
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
14 Replies
EssaddekMohammed
New Contributor II

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

Regards

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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>
EssaddekMohammed
New Contributor II

Hello,

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

Thanks for your answer.

Regards

0 Kudos
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);
      });
EssaddekMohammed
New Contributor II

Thank You, it works !

0 Kudos