With the update to reference 3.18 we are now finding that we get this message returned:
esri.dijit.BasemapGallery: Unable to switch basemap because new basemap has a different spatial reference.
Yet if we select our Basemap toggle we can switch without issue; the problem only happens on the initial load of the page.
Solved! Go to Solution.
This will be fixed in 3.19. A temporary workaround is to set the initial basemap like:
basemap: "satellite"
There is a slight flash, at least in Chrome, but it prevents the map loading issue.
Hello David!
If you read the Api for the BasemapGallery you will find, that all
BasemapLayers need the same SpatialReference.
All basemaps added to the gallery need to have the same spatial reference. If the default ArcGIS.com basemaps are used then all additional items added to the gallery need to be in Web Mercator (wkids: 102100, 102113 and 3857). If the default basemaps are not used you can add basemaps in any spatial reference as long as all the items added to the gallery share that spatial reference. For best performance, it is recommended that all basemaps added to the gallery are cached (tiled) layers.
But that requirement is not new for 3.18, right? Code that worked with 3.17 is now breaking with 3.18.
They are all the same reference; this has been verified in all the rest endpoints 102100 (3857). If I swap back to 3.17 there is no issue; so this is something that changed at 3.18 that is affecting it.
The only change i can see for the Basemaps from 3.17 to 3.18 is that the BasemapGallery widget no longer sends an export image request when requesting tiles on cached image services.
Maybe this is affecting you Basemaps?
I don't see that as being a potential cause for a projection/SR related alert. What is surprising is being able to select from my menu a new map and everything toggles properly through the stack no matter which is selected.
Below are links to JSFiddles showing that 3.17 and 3.18 behave differently.
Below is the code from the fiddles (in case the above links break in the future).
<div id="map"></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;
}
require([
"esri/config",
"esri/map",
"esri/geometry/Extent",
"esri/dijit/BasemapGallery",
"esri/layers/ArcGISDynamicMapServiceLayer"
], function (esriConfig, Map, Extent, BasemapGallery, ArcGISDynamicMapServiceLayer) {
"use strict";
var map, basemapGallery, scalebar, wsdotBasemap, wsdotBasemapLayer;
esriConfig.defaults.io.corsEnabledServers.push("data.wsdot.wa.gov");
esriConfig.defaults.io.corsEnabledServers.push("basemap.nationalmap.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
}, "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 with Labels";
});
if (basemaps && basemaps.length > 0) {
basemap = basemaps[0];
basemapGallery.select(basemap.id);
}
});
});
Thanks Jeff; that is a really good way to show what is happening. The fact that you have to trigger the selection after the error response seems odd to me.
Hi David,
We have already logged this issue [BUG-000099696 Basemap Gallery widget not able to load the initial basemap if map object not define the "basemap" property]
It seems like the issue only reproduced in 3.18. Thanks for bring us attention.
Best Regards,
Nathan
This will be fixed in 3.19. A temporary workaround is to set the initial basemap like:
basemap: "satellite"
There is a slight flash, at least in Chrome, but it prevents the map loading issue.