The Imagery selected is not shown when reload... Instead the default one

Hi Everyone,
I want to perform Imagery selection so that the imagery the user selected, that imagery will be used when the website reloaded or the a new window is code is found below…

var imageryViewModels = ;
imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Open\u00adStreet\u00adMap’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/openStreetMap.png’),
tooltip : ‘OpenStreetMap (OSM) is a collaborative project to create a free editable
map of the world.\n’,
creationFunction : function() {
return Cesium.createOpenStreetMapImageryProvider({
url : ‘

imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Black Marble’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/blackMarble.png’),
tooltip : ‘The lights of cities and villages trace the outlines of civilization
in this global view of the Earth at night as seen by NASA/NOAA’s Suomi NPP satellite.’,
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : ‘’,
credit : ‘Black Marble imagery courtesy NASA Earth Observatory’,
flipXY : true

imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Natural Earth\u00a0II’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/naturalEarthII.png’),
tooltip : ‘Natural Earth II, darkened for contrast.\n’,
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’)

//Create a CesiumWidget without imagery, if you haven’t already done so.
var cesiumWidget = new Cesium.CesiumWidget(‘cesiumContainer’, { imageryProvider: false });

//Finally, create the baseLayerPicker widget using our view models.
var layers = cesiumWidget.imageryLayers;
var baseLayerPicker = new Cesium.BaseLayerPicker(‘baseLayerPickerContainer’, {
globe : cesiumWidget.scene.globe,
imageryProviderViewModels : imageryViewModels

this.selectedImagery = undefined;
var selectedImageryViewModel = knockout.observable();

    this._currentImageryProviders = [];
    knockout.defineProperty(this, 'selectedImagery', {
        get : function() {
            return selectedImageryViewModel();
        set : function(value) {
            if (selectedImageryViewModel() === value) {
                this.dropDownVisible = false;

            var i;
            var currentImageryProviders = this._currentImageryProviders;
            var currentImageryProvidersLength = currentImageryProviders.length;
            var imageryLayers = this._globe.imageryLayers;
            for (i = 0; i < currentImageryProvidersLength; i++) {
                var layersLength = imageryLayers.length;
                for ( var x = 0; x < layersLength; x++) {
                    var layer = imageryLayers.get(x);
                    if (layer.imageryProvider === currentImageryProviders[i]) {

            if (defined(value)) {
                var newProviders = value.creationCommand();
                if (isArray(newProviders)) {
                    var newProvidersLength = newProviders.length;
                    for (i = newProvidersLength - 1; i >= 0; i--) {
                        imageryLayers.addImageryProvider(newProviders[i], 0);
                    this._currentImageryProviders = newProviders.slice(0);
                } else {
                    this._currentImageryProviders = [newProviders];
                    imageryLayers.addImageryProvider(newProviders, 0);
            this.dropDownVisible = false;

can you please help me??
Thank you

Hi Abdullah,

There’s no way to save information about what base layer is selected with Cesium itself between refreshes. You will need to do so as part of your application.



Does cookies(javascript) help in this task???

Cookies are one way of having data persist between session, but you’ll probably get a better response if you ask this question to a more general forum like Stack Overflow.

Hi Gabby,
I think I managed to perform the selection of imagery when reloaded… Here is my code below…

Console @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

Th Result is successful, if i select one of the images and when I reloaded or close and open the browser, that selection image is shown rather than the default image…

Is my coding correct or do I need to improve it???

Which one do I need to improve it??