Hello,
during implementation of basemapGallery for basemaps switching I came to the issue when some basemaps are not loaded after switch on.
I have got 3 maps that have tileInfo and are cached and one that have no tileInfo and it is not cached. When the basemap with no cache is inserted as first into basemapGallery, the others cached maps will not show after switch. Server will not send any images, only OK response for .../MapServer?f=json request.
If I put into basemapGallery as first another basemap with tileInfo and cache, then I am able to switch between all basemaps. If I want to have shown as first the basemap with no cache, the workaround is also to put it as last and after map load event select last basemap in basemapGallery. Then also everything is working fine.
What is the root cause of this issue please. I've got feeling that it could have something with extent or levels of detail or so, because also zoom buttons are not disabled in that case. How to solve it with no workaround? Where is the fail? Am I doing something wrong or should I add some option in map or layer creation?
Many thanks for your answers and help.
It could be reproduced even with slightly modified basemapGallery sample code:
Basemap Gallery - user-defined items | ArcGIS API for JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Display Multiple ArcGIS Online Services</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#map {
border: solid 1px #B5BCC7;
padding: 0;
}
#paneHeader {
background: url(images/header.png) repeat-x;
color: white;
border-bottom: solid 1px #B5BCC7;
text-align: center;
height: 30px;
margin: 0;
overflow: hidden;
font-size: 16px;
padding: 8px 5px;
}
#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
</style>
<script>var dojoConfig = {parseOnLoad:true};</script>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
dojo.require("esri.map");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
var map;
function init() {
map = new esri.Map("map");
createBasemapGallery();
}
function createBasemapGallery() {
//manually create basemaps to add to basemap gallery
var basemaps = [];
var waterTemplateLayer = new esri.dijit.BasemapLayer({
url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructu..."
});
var waterBasemap = new esri.dijit.Basemap({
layers :[waterTemplateLayer],
title :"Water Template",
thumbnailUrl:"images/waterThumb.png"
});
basemaps.push(waterBasemap);
var publicSafetyLayer = new esri.dijit.BasemapLayer({
url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..."
});
var publicSafetyBasemap = new esri.dijit.Basemap({
layers :[publicSafetyLayer],
title :"Public Safety",
thumbnailUrl:"images/safetyThumb.png"
});
basemaps.push(publicSafetyBasemap);
// no cache and tileInfo map. If I put this as first, the other ones won't work
var dLayer = new esri.dijit.BasemapLayer({
url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer..."
});
var dBasemap = new esri.dijit.Basemap({
layers :[dLayer],
title :"Demographic",
thumbnailUrl:"images/safetyThumb.png"
});
basemaps.push(dBasemap);
var basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps:false,
basemaps :basemaps,
map :map
}, "basemapGallery");
basemapGallery.startup();
dojo.connect(basemapGallery, "onError", function (error) {
console.log(error);
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
html, body {
margin: 0;
}
</style>
<![endif]-->
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width:100%;height:100%;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'right'" id="rightPane">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;">
<div id="paneHeader"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">
<span>Select Basemap</span>
</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>
