[GIS] Basemap Gallery Error – ESRI JS API

arcgis-javascript-apiarcgis-online-basemapsdojo

I'm getting an error when trying to switch basemaps in my application(right now only works in IE9).

TypeError: Unable to get value of the property '_basemapGalleryLayerType': object is null or undefined

I'm using standard code provided in the ESRI samples. The full code is a mashup of various samples, so my error may be in the order I've placed things. However, I've tried reordering the code and haven't had any luck.

When I remove mapReady from the dojo.connect(map, "onLoad", mapReady); listener, the basemap gallery works, however it causes my initial basemap to fail and the mapReady function to fail as well (obviously). There is no link that I can determine between the initial basemaps and my mapReady function so I'm not sure what the deal is there…

Also, if I clear the browser cache the entire app will work, 1 time only, then on refresh, it fails as described above. Very inconsistent behavior.

Any help would be greatly appreciated.

Best Answer

This works for me:

function createBasemapGallery() {
        // Add the basemap gallery
        basemapGallery = new esri.dijit.BasemapGallery({showArcGISBasemaps: true, map: globals.map}, "basemapGallery");
        basemapGallery.startup(); 
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

Then, inside init() function and after creating the map:

createBasemapGallery();
dojo.connect(map, 'onLoad', function(theMap) {
    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
}

Then on the HTML:

<div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
    <div id="basemapGallery" ></div>
</div>

Related Solutions

[GIS] ArcGIS JavaScript API layer order

I'm sure there is a better way of doing this but here is how I did it:

I stored the layers to be added in a module level variable (layersToAdd) and in each layer onLoad event I pushed the layer in to this array. I then called a function addLayers which checked if the length of addLayers was equal to the total layers to be added. The function sorts the array based on index and then adds them.

For the missing layer in the onError event I removed the item from the array and called addLayer.

There will be a performance hit but I couldn't think of another way. I guess another option would be to add the layers as soon as they are available and then re-order the layers once the total count is reached.

for (var i = 0; i < mapConfig.Services.length; i++) {
    layer = this.loadMapService(mapConfig.Services[i], true);
    if (layer != null) {
        //In Internet Explorer, due to resource caching, the onLoad event is fired as soon as the layer is constructed. Consequently you should check whether the layer's loaded property is true before registering a listener for the onLoad event:
        //http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_events.htm
        layer.index = i;
        if (layer.loaded) {
            this.layersToAdd.push(layer);
            this.addLayers();
        }
        else {
            dojo.connect(layer, "onLoad", dojo.hitch(this, function (addlayer) {
                this.layersToAdd.push(addlayer);
                this.addLayers();
            }));

            dojo.connect(layer, "onError", dojo.hitch(this, function (err) {
                var self = this;
                //log error
                dojo.forEach(self.configData.Map.Services, function (entry, ix) {
                    if (entry.ServiceID == layer.id) {
                        self.configData.Map.Services.splice(ix, 1);
                    }
                }, self);
                self.addLayers();
            }));
        }
    }
};


addLayers: function () {
        if (this.layersToAdd.length == this.configData.Map.Services.length) {
            this.layersToAdd.sort(function(a, b) {
                return a.index - b.index;
            });
            dojo.forEach(this.layersToAdd, function (entry, i) {
                this.map.addLayer(entry);
            }, this);
            this.layersToAdd = null;
        }
 },

[GIS] Map Application Requires Refresh to Initialize

I would consolidate all of those dojo.addOnLoad() calls. I suspect something isn't getting loaded before a function is getting called.

Strip all dojo.addOnLoad calls from all of your external javascript files and bundle them into one call in your main HTML file. Put all the functions you want to fire on load into a new function at the bottom of your javascript like this:

function init() {
  basemapToggle();
  layerToggle();
  whatEver();
}
dojo.addOnLoad(init);

This will ensure that everything has loaded before trying to fire off any functions.

Best Answer

Related Solutions

[GIS] ArcGIS JavaScript API layer order

[GIS] Map Application Requires Refresh to Initialize

Related Question