nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I select which basemap is selected in the gallery AT STARTUP?

ericliprandi

Here is our situation:

users can have a custom list of basemaps
we use the BasemapGallery to allow them to select their basemap
we persist the basemap id in a cookie to load that same basemap the next time they visit their app

At this point what is the official way to load the Basemap gallery against a map with a specific basemap selected?

The only 2 lines of code involved in setting up the gallery with the map are:

var gallery = new BasemapGallery( options );
gallery.startup();

As far as we can tell, there is nothing in the options that allows this. We don't see a selected property on the Basemap.

So far, our only option is to let it load the gallery, using the first basemap, then, as soon as it's loaded, call select(id) on the gallery. But as you can guess, the experience is horrible at best. The map loads first with a basemap and within a second or two switches to the one the user really wanted.

Find more posts tagged with

Accepted answers

All comments

ChrisSmith7

Eric,

Off top hand, I'm not sure... I would need to dig a bit to see if there are any options. However, I wanted to share a technique I employ for a similar scenario.

We have a bit of stuff that runs in the background that causes rendering artifacts to manifest on the front-end. Really, we could probably adjust the timing of events and that would probably prevent the artifacts, but I implemented a workaround by calling a dojo standby - dojox.widget.Standby — The Dojo Toolkit - Reference Guide - then fading-in the map container after all pre-processing completes. So, the user simply sees a spinner until the map is ready, then it fades-in. It looks pretty slick... you could call your fade-in routine and dismiss the spinner after the persisted basemap loads.

This still seems like a kludge, just less kludgey!

thejuskambi

Hello eric,

There are a couple of way you can do this.

if you are creating the custom list in esriBasemaps as shown here esri/basemaps | API Reference | ArcGIS API for JavaScript then you can set basemap you want while initializing the map itself.

otherwise, you could save your custom as json string instead of just saving the name and then pass while initializing the map. Once the map is loaded you can use select(id) to sync the map and BasemapGallery.

ericliprandi

Chris, yeah that was the route we were heading down too. We are primarily an AngularJS app and were going to use their animations and all to do what you suggest: wait for us to know the map is ready for interaction, hide it until then.

There are other implications though of setting a "random" basemap first and then select the one you want. in particular, I believe our customers have reported issues with LODs not updating as you switch basemaps.

ericliprandi

thejus,

I am not sure I understand your suggestion(s). Let me see if I can clarify:

We are an ISV, so our customers want a fair bit of flexibility in specifying their list of basemaps. Because we are an Esri partner, we are frequently pushed to make use of the ArcGIS Basemaps (from ArcGIS.com) even though most of our real customers don't use them. It apparently looks good when we demo and Esri personnel is in the room.

That being said, we allow them to use the showArcGISBasemaps option. When they do that, I can't see a way to control order or anything. It always loads the first one in the list (Imagery right now I think). It does that as soon as the gallery is built.

I am not sure what you are referring to as "save your custom as json string". I know how to build my own list of basemaps (at least I think I do). I use the Basemap and BasemapLayer with the proper set of id, type, etc., build an array and pass that to the constructor.

However, I have the same problem with that: as soon as I provide the list to the gallery (as the constructor parameter), it will automatically select the first one and apply to the map. After which, I have to wait "a little bit" and I can then call select(id) on the gallery.

Thanks for helping and please let me know I misunderstood anything.

RichRuh

Although utilities will often not use Esri-provided basemaps, they are free to create their own from their own proprietary sources of data.

thejuskambi

see the example I had added a link. In the below case a custom basemap is created first and then map is initialized with that custom basemap.

require([
    "esri/basemaps",
    "esri/map",
    "dojo/domReady!"
  ], function (esriBasemaps, Map){
    esriBasemaps.delorme = {
      baseMapLayers: [{url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"}
      ],
      thumbnailUrl: "http://servername.fqdn.suffix/images/thumbnail_2014-11-25_61051.png",
      title: "Delorme"
    };
    var map = new Map("ui-map", {
      basemap: "delorme",
      center: [-111.879655861, 40.571338776], // long, lat
      zoom: 13,
      sliderStyle: "small"
    });
});

again in the above example you can see that the basemap is kind of converted to json string. I was asking you to save that string.

I have not seen the behavior you are saying just because you are initializing BasemapGallery, the map should not be affected by it. Can you share the code. Robert Scheitlin, GISP can you please confirm if that is an expected behavior.

RobertScheitlin__GISP

Eric,

The first basemap in the basemaps array is always the selected base map (unless you use showArcGISBasemaps). So if you need a different on selected initially when your app starts up then all you have to do is re-order your basemap array before your startup the basemap gallery widget. The issue you will run into is if you choose to use the arcgis base maps and what a specific basemap selected first then you will have to manually add the arcgis basemaps to the basemap array and NOT use "showArcGISBasemaps".

Here is a sample that shows how to manually load the ArcGISBasemaps and some comments in the code that tell you how to make a specific basemap the first selected basemap:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser, BasemapLayer, Basemap
    ) {
      parser.parse();

      map = new Map("map");

      var basemaps = [];

      var imgeryLayer = new BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
      });
      var ImageryBasemap = new Basemap({
        layers: [imgeryLayer],
        title: "Imagery",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg"
      });

      var imgLayer = new BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
      });
      var imgLayer2 = new BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"
      });
      var ImagerywLblBasemap = new Basemap({
        layers: [imgLayer, imgLayer2],
        title: "Imagery with Labels",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg"
      });

      var streetsLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
      });
      var StreetsBasemap = new Basemap({
        layers: [streetsLayer],
        title: "Streets",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/d8855ee4d3d74413babfb0f41203b168/info/thumbnail/world_street_map.jpg"
      });

      var topoLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
      });
      var TopoBasemap = new Basemap({
        layers: [topoLayer],
        title: "Topographic",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg"
      });

      var dgLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
      });
      var dgLayer2 = new BasemapLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer"
      });
      var DGBasemap = new Basemap({
        layers: [dgLayer, dgLayer2],
        title: "Dark Gray Canvas",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/25869b8718c0419db87dad07de5b02d8/info/thumbnail/DGCanvasBase.png"
      });

      var lgLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
      });
      var lgLayer2 = new BasemapLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
      });
      var LGBasemap = new Basemap({
        layers: [lgLayer, lgLayer2],
        title: "Light Gray Canvas",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/8b3b470883a744aeb60e5fff0a319ce7/info/thumbnail/light_gray_canvas.jpg"
      });

      var natgeoLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
      });
      var natgeoBasemap = new Basemap({
        layers: [natgeoLayer],
        title: "National Geographic",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/509e2d6b034246d692a461724ae2d62c/info/thumbnail/natgeo.jpg"
      });

      var oLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
      });
      var oLayer2 = new BasemapLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer"
      });
      var OceanBasemap = new Basemap({
        layers: [oLayer, oLayer2],
        title: "Oceans",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/48b8cec7ebf04b5fbdcaf70d09daff21/info/thumbnail/tempoceans.jpg"
      });

      var terrLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
      });
      var terrLayer2 = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
      });
      var TerrBasemap = new Basemap({
        layers: [terrLayer, terrLayer2],
        title: "Terrain with Labels",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/aab054ab883c4a4094c72e949566ad40/info/thumbnail/terrain_labels.jpg"
      });

      var osmLayer = new BasemapLayer({
        type: "OpenStreetMap"
      });
      var osmBasemap = new Basemap({
        layers: [osmLayer],
        title: "OpenStreetMap",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/5d2bfa736f8448b3a1708e1f6be23eed/info/thumbnail/temposm.jpg"
      });

      var usatopoLayer = new BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
      });
      var usaTopoBasemap = new Basemap({
        layers: [usatopoLayer],
        title: "USA Topo Maps",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/931d892ac7a843d7ba29d085e0433465/info/thumbnail/usa_topo.jpg"
      });

      var USGSNatMapLayer = new BasemapLayer({
        url: "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer"
      });
      var USGSNatMapBasemap = new Basemap({
        layers: [USGSNatMapLayer],
        title: "USGS National Map",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6d9fa6d159ae4a1f80b9e296ed300767/info/thumbnail/national_map.jpg"
      });

      /*This is the standard order of the ArcGISBasemaps*/
      /*If you want to set a specific basemap as the first selected basemap
        then just move it to the first position in the array*/
      basemaps.push(ImageryBasemap);
      basemaps.push(ImagerywLblBasemap);
      basemaps.push(StreetsBasemap);
      basemaps.push(TopoBasemap);
      basemaps.push(DGBasemap);
      basemaps.push(LGBasemap);
      basemaps.push(natgeoBasemap);
      basemaps.push(OceanBasemap);
      basemaps.push(TerrBasemap);
      basemaps.push(osmBasemap);
      basemaps.push(usaTopoBasemap);
      basemaps.push(USGSNatMapBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer"
       data-dojo-props="design:'headline', gutters:false"
       style="width:100%;height:100%;margin:0;">

    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

JeffJacobson

Here is a JSFiddle sample that demonstrates how to do this. I'll paste the same code below in case something happens to the JSFiddle.

<div id="map"></div>
<div class="layer-list">
    <ul>
        <li>
            <input id="countyBoundariesCheckbox" type="checkbox" data-layer-id="County Boundaries" />
            <label for="countyBoundariesCheckbox">County Boundaries</label>
        </li>
    </ul>
</div>
<div id="basemapGalleryContainer">
    <div id="basemapGallery"></div>
</div>

html, body {
    height: 100%;
    overflow-y: hidden;
}
html, body, #map, .map.container {
    padding:0;
    margin:0;
}
#map, .map.container {
    height: calc(100% - 10em);
}
#basemapGalleryContainer {
    height: 10em;
    overflow-y: scroll;
}
.layer-list {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    padding: 0.5em;
    background-color: RGBA(255, 255, 255, 0.75)
}

require([
    "esri/config",
    "esri/map", 
    "esri/geometry/Extent", 
    "esri/dijit/BasemapGallery",
    "esri/layers/ArcGISTiledMapServiceLayer"
], function (esriConfig, Map, Extent, BasemapGallery, ArcGISTiledMapServiceLayer) {
    "use strict";
    var map, basemapGallery, scalebar, wsdotBasemap, wsdotBasemapLayer;
    esriConfig.defaults.io.corsEnabledServers.push("www.wsdot.wa.gov");


    // Create the map, explicitly setting the LOD values.
    map = new Map("map", {
        extent: new Extent({
            "xmin": -14058520.2360666,
            "ymin": 5539437.0343901999,
            "ymax": 6499798.1008670302,
            "xmax": -12822768.6769759,
            "spatialReference": {
                "wkid": 3857
            }
        }),
        lods: [
            {"level": 0,"resolution": 56543.033928,"scale": 591657527.591555}, 
            {"level": 1,"resolution": 78271.5169639999,"scale": 295828763.795777},
            {"level": 2,"resolution": 39135.7584820001,"scale": 147914381.897889},
            {"level": 3,"resolution": 19567.8792409999,"scale": 73957190.948944},
            {"level": 4,"resolution": 9783.93962049996,"scale": 36978595.474472},
            {"level": 5,"resolution": 4891.96981024998,"scale": 18489297.737236},
            {"level": 6,"resolution": 2445.98490512499,"scale": 9244648.868618},
            {"level": 7,"resolution": 1222.99245256249,"scale": 4622324.434309},
            {"level": 8,"resolution": 611.49622628138,"scale": 2311162.217155},
            {"level": 9,"resolution": 305.748113140558,"scale": 1155581.108577},
            {"level": 10,"resolution": 152.874056570411, "scale": 577790.554289}, 
            {"level": 11,"resolution": 76.4370282850732,"scale": 288895.0},
            {"level": 12,"resolution": 38.2185141425366,"scale": 144447.638572},
            {"level": 13,"resolution": 19.1092570712683,"scale": 72223.819286},
            {"level": 14,"resolution": 9.55462853563415,"scale": 36111.909643},
            {"level": 15,"resolution": 4.77731426794937,"scale": 18055.954822},
            {"level": 16,"resolution": 2.38865713397468,"scale": 9027.977411},
            {"level": 17,"resolution": 1.19432856685505,"scale": 4513.988705},
            {"level": 18,"resolution": 0.597164283559817,"scale": 2256.994353},
            {"level": 19,"resolution": 0.298582141647617,"scale": 1128.497176}
        ],
        minZoom: 7,
        maxZoom: 19
    });


    // Create the basemap gallery using basemaps defined in a WSDOT group.
    basemapGallery = new BasemapGallery({
        map: map,
        basemapsGroup: {
            id: "085a9cb0bb664d29bf62b731ccc4aa64"
        },
        basemapIds: map.layerIds
    }, "basemapGallery");
    basemapGallery.startup();
    
    // When the basemap gallery loads, select the first basemap with 
    // the title "Imagery Hybrid". (There should be only one, but that's what
    // the code is doing.)
    basemapGallery.on("load", function() {
        var basemap, basemaps = basemapGallery.basemaps.filter(function(basemap){
            return basemap.title === "Imagery Hybrid";
        });
        if (basemaps && basemaps.length > 0) {
            basemap = basemaps[0];
            basemapGallery.select(basemap.id);
        }
    });
    
    map.on("load", function(){
        var toggleLayer = function() {
            var layer = map.getLayer(this.dataset.layerId);
            if (this.checked) {
                layer.show();
            } else {
                layer.hide();
            }
        };
        var checkbox = document.getElementById("countyBoundariesCheckbox");
        map.addLayer(new ArcGISTiledMapServiceLayer("http://www.wsdot.wa.gov/geosvcs/ArcGIS/rest/services/Shared/CountyBoundaries/MapServer", {
            id: "County Boundaries",
            visible: checkbox.checked
        }));    
        

        checkbox.onclick = toggleLayer;
    });    
});

RobertScheitlin__GISP

Jeff,

Your way is a lot easier.

ericliprandi

Thejus,

Thanks for the reply. This was looking promising. Unfortunately, with this technique, Bing maps do not appear to be supported. I tried setting the type property on the layer and it does not take it. It works great for OpenStreetMap, but no luck for Bing

    require(['dojo/ready',
      'esri/basemaps',
      'esri/map'
    ], function(ready, basemaps, Map) {
      ready(function() {
        var custom = {
          title: "Eric Map",
          thumbnailUrl: "http://js.arcgis.com/3.14/esri/images/basemap/streets.jpg",
          baseMapLayers: [{
            type: 'OpenStreetMap'
               // type: 'BingMapsAerial' does not work
          }]
        };
        basemaps.custom = custom;


        // map
        var map = new Map('map', {
          basemap: 'custom'
        });
      });
    });

I assume the type value is the same used by the Basemap.

Regards,

Eric.

ericliprandi

Jeff,

Thanks a lot for the long example. I hope you had that code already on hand... This is much appreciated. I definitely like the idea of the basemaps group defined in AGOL or Portal. And if we were to build custom apps, that would definitely be the way I would go. Unfortunately, we are an ISV and based on the number of combinations possible to build a basemap gallery, we had to settle on a compromise.

Just like we did 3 years ago when we built v1 of this app, we built our own gallery. It was not complicated and in the end gave us all the functionality we wanted. When the use of Portal and AGOL becomes more widely spread with our customers, we will likely go down the basemaps group path. Just too much legacy customers at this point.

Regards,

Eric.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.