1

Context: I am trying to simply create a 'Save Button' from selection of basemap in basemap gallery...

The only thing missing is I cannot find the 'well known string ids' from the basemaps in the basemap gallery for which I can use to reference later, i.e. streets, streets-vector, topo dark-gray, etc etc.

I am getting the objects responses with the below on any change of selection to the basemap gallery, I am seemingly getting EVERYTHING back but the 'well known string ids' in which I can save and use later to render that basemap. I am getting the title and property ID but the ids to change the map, i.e. topo are no where to be found within the object responses.

basemapGallery.watch('activeBasemap', function(newBasemap, property, object) 
      console.log('new active basemap', {newBasemap, property, object});
.......... // also have tried pulling in the basemap obj here as well

i.e. I can programmatically, manually, change the basemap in my application or in the dev console with the below.

myapp.widgets.basemapManager.basemapGallery.activeBasemap = "streets"

The docs lead me to believe I can use portal item id to reference the basemaps but this did not work. I have tried to reference it every which way in accordance to the above line.

Below is a screenshot of my watch function after a selection has been made to the basemap gallery. No named string ids to change the map found, i.e. 'dark-grey' 'topo' 'streets' etc.

enter image description here

enter image description here

Improve this question
1
  • Emilio, the named basemaps are different from what you usually see in the BasemapGallery. Did you create the BasemapGallery so that it contains the named basemaps? Or is the basemaps in your BaseMapGallery coming from the default (or your organizations) basemap group?
    – Bjorn Svensson
    Commented Feb 29, 2020 at 4:03

1 Answer 1

Reset to default
1

One way could be that you provide the collection of basemaps to the BasemapGallery and then you just need to compare the instances, to know which map is it. Something like this

<!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.14</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/4.14/"></script>
    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/BasemapGallery",
        "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
        "esri/Basemap"
      ], function(Map, SceneView, BasemapGallery, LocalBasemapsSource, Basemap) {
        var map = new Map({
          basemap: "gray"
        });

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

        var basemaps = [
          Basemap.fromId('streets'),
          Basemap.fromId('gray'),
          Basemap.fromId('satellite')
        ];
        var source = new LocalBasemapsSource({
          basemaps: basemaps
        });

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

        // Add the widget to the top-right corner of the view
        view.ui.add(basemapGallery, {
          position: "top-right"
        });

        basemapGallery.watch('activeBasemap', 
          (newBasemap, property, object) => 
          console.log(basemaps.indexOf(newBasemap))
        );
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Hope it helps.

Improve this answer
2
  • @Captain Ron, did this solution help you?.
    – cabesuon
    Commented Feb 12, 2020 at 23:30
  • This solution works however some of the base layer thumbnails are not displayed in BasemapGallery and shows some placeholder instead.
    – Alex Ryltsov
    Commented Aug 31, 2022 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.