topic Re: persist basemap across maps within browser session in ArcGIS JavaScript Maps SDK Questions

persist basemap across maps within browser session

ericliprandi — Tue, 05 Mar 2013 03:54:31 GMT

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

Re: persist basemap across maps within browser session

KellyHutchins — Sat, 11 Dec 2021 07:43:49 GMT

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

Re: persist basemap across maps within browser session

ericliprandi — Tue, 05 Mar 2013 18:56:27 GMT

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.

Re: persist basemap across maps within browser session

ericliprandi — Sat, 11 Dec 2021 07:43:52 GMT

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