Feature Labels/Basemaps Issue

LloydBronn · ‎11-07-2016

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.

RobertScheitlin__GISP · ‎11-08-2016

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();
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-07-2016

Lloyd,

Care to share a screenshot?

LloydBronn · ‎11-07-2016

The default:

After switching:

RobertScheitlin__GISP · ‎11-07-2016

Lloyd,

I have never seen that one before. You should call this one in to esri tech support.

LloydBronn · ‎11-07-2016

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");
     });
       ‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-07-2016

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();
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LloydBronn · ‎11-08-2016

I put this in and the basemap gallery is empty.

RobertScheitlin__GISP · ‎11-08-2016

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-08-2016

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();
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LloydBronn · ‎11-08-2016

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."