So I have some layers that have labels (turned on in the map service itself). I'm using the basemap gallery widget and if I choose the dark gray canvas, imagery or imagery with labels basemaps, the feature labels get wonky. They look vaguely like number signs. Is this a known bug? I couldn't find anything. The labels are fine with all the other basemaps.
Solved! Go to Solution.
Lloyd,
You really have to learn to use your browsers web console to see your code errors.
I had the dojo/_base/array aliased as "array" and you have "arrayUtils"
I had the title pane id as "bmTitlePane" and you have "TitlePane"
So here is the corrected code for yours
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
toggleReference: true,
map: map
}, "basemapGallery");
basemapGallery.on('load', function() {
arrayUtils.some(basemapGallery.basemaps, function(basemap) {
if (basemap.title === "Dark Gray Canvas") {
basemapGallery.remove(basemap.id);
return true;
}
});
});
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function() {
dijit.byId("TitlePane").toggle();
});
Lloyd,
Care to share a screenshot?
The default:
After switching:
Lloyd,
I have never seen that one before. You should call this one in to esri tech support.
Ok, will do. In the meantime I'm trying to remove the offenders from the gallery list, but I can't get basemapGallery.remove(); to work. I've been trying this method from the API reference page.
function removeBasemap(){
basemapGallery.remove("dark-gray");
}
basemapGallery.on("remove",function(evt){
console.log(evt.basemap.title + " removed from the gallery");
});
Lloyd,
The id for the remove function is not the string you are thinking about:
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
toggleReference: true,
map: map
}, "basemapGallery");
basemapGallery.on('load',function(){
var items = array.some(basemapGallery.basemaps, function(basemap){
if(basemap.title === "Dark Gray Canvas"){
basemapGallery.remove(basemap.id);
return true;
}
});
});
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function() {
dijit.byId("bmTitlePane").toggle();
});
I put this in and the basemap gallery is empty.
Lloyd,
Here is the complete sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, googleLayer;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"dojo/parser", "dojo/_base/array",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils,
parser, array
) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-105.255, 40.022],
zoom: 13
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
toggleReference: true,
map: map
}, "basemapGallery");
basemapGallery.on('load',function(){
array.some(basemapGallery.basemaps, function(basemap){
if(basemap.title === "Dark Gray Canvas"){
basemapGallery.remove(basemap.id);
return true;
}
});
});
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function() {
dijit.byId("bmTitlePane").toggle();
});
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane" id="bmTitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Lloyd,
You really have to learn to use your browsers web console to see your code errors.
I had the dojo/_base/array aliased as "array" and you have "arrayUtils"
I had the title pane id as "bmTitlePane" and you have "TitlePane"
So here is the corrected code for yours
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
toggleReference: true,
map: map
}, "basemapGallery");
basemapGallery.on('load', function() {
arrayUtils.some(basemapGallery.basemaps, function(basemap) {
if (basemap.title === "Dark Gray Canvas") {
basemapGallery.remove(basemap.id);
return true;
}
});
});
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function() {
dijit.byId("TitlePane").toggle();
});
Ah yes, that's what I get for being in a hurry. Thanks! I just figured out the original issue. I needed to change the text anti-alias settings in the ArcGIS server to "none."