persist basemap across maps within browser session

[ericliprandi]

Hi,
We are building an app in which our users would like to select a particular basemap from the gallery. Our application consists of many pages showing various assets. We would like to persist the basemap for the user's current session. This seems to be pretty simple if we can store the basemap id the user last selected. This works fine using the "onSelectionChange" event of the BasemapGallery.

However, we are having a terrible trying to set the basemap programmatically when the new page loads. We read the cookie properly, but we can't seem to figure out the right time to call select(id) on the BasemapGallery. It seems that the BasemapGallery always fires once with the first map selection. Yes, we can handle this, but the result is very hacky in our mind. Is there a way to specify which basemap to use after startup()?
Here is our latest attempt:

dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dojo/cookie");

var map;

function init() {
    map = new esri.Map("mapDiv", {
        center: [19.461, 53.914],
        zoom: 5
    });
    var basemapGallery = new esri.dijit.BasemapGallery({
        showArcGISBasemaps: true,
        bingMapsKey: 'afdafadsfdsafsdfasdfdsfdsf_afdfafdasfdsaf',
        map: map
    }, "basemapGallery");

    basemapGallery.startup();

    dojo.connect(basemapGallery, "onError", function (msg) { console.log(msg); });

    dojo.connect(basemapGallery, "onLoad", function() {
        var basemapId = dojo.cookie("userSelectedBaseMap");
        if (basemapId != null) {
            basemapGallery.select(basemapId);
        }
        dojo.connect(basemapGallery, "onSelectionChange", function () {
            var selected = basemapGallery.getSelected();
            dojo.cookie("userSelectedBaseMap", selected.id);
        });
    });
            

}
dojo.ready(init);

Is there a recommended way to achieve what we are trying to do? how about a recommendation on when to programmatically set the basemap selection?

Thanks for any help,

Eric

[KellyHutchins]

Hi Eric,

You might want to edit your code sample above to remove your bing maps key.

Try setting the selected basemap when the gallery loads.  Here's a code snippet showing this approach:

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11727455,"ymin":4861652,"xmax":-11706340,"ymax":4871512,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          center: [-105.255, 40.022],
          zoom: 8
        });


        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        dojo.connect(basemapGallery, "onLoad", function(){
          basemapGallery.select("basemap_8");
        })

        basemapGallery.startup();
        

      }
      dojo.ready(init);

[ericliprandi]

Kelly,
Thanks for the Bing Maps stuff... I meant to do it and something went wrong... anyway, done now.

As for your code, how is it different from what I am doing? I too am listening to the "onLoad" event and setting the basemap. Ok, I read it from a cookie using dojo, but otherwise, this seems to be the same code. Am I missing something?

Is it worth mentioning that we are still using v3.1?

The issue is that, from my experiments, the gallery always selects the first basemap when it loads. So, in my code, since I want to persist the basemap selection for subsequent pages, it overwrites the cookie with that first basemap.
I am tempted to just "skip" the first selection. However, it will start loading the first basemap (whatever that is) and then will switch to the basemap our customer actually wants to use.
IS there a way to have the gallery load but not select a basemap?

Regards,

Eric.

[ericliprandi]

FYI, I am unable to prevent the map from rendering with the first basemap in the BasemapGallery. Even if I do not call the startup() method, a layer is added to the map and it starts loading.

In the end, I ended up suspending the first layer that gets assigned to the map and then, I select the basemap I want. This seems to stop the rendering before it begins and giving a much better user experience. In the end, here is the code I have:

var basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,
    bingMapsKey: bingKey,
    map: map
}, "basemapGalleryDiv");
basemapGallery.startup();


var selectionHandler = function() {
    dojo.connect(basemapGallery, "onSelectionChange", function() {
        $('#basemapGalleryModal').modal('hide');
        var selected = basemapGallery.getSelected();
        dojo.cookie("selectedBasemapId", selected.id, { path: "/" });
    });
};
            
var savedBaseMapId = dojo.cookie("selectedBasemapId");
if (savedBaseMapId != null) {
    // we are going to changed the basemap, maybe, so prevent original drawing
    var initialLayerHandler = dojo.connect(map, "onLayerAdd", function(layer) {
        dojo.disconnect(initialLayerHandler);
        layer.suspend();

        basemapGallery.select(savedBaseMapId);
        map.addLayers(layers);
    });
} else {
    selectionHandler();
}