Issue with using map.centerAt and features not drawing when zoomed in - Firefox

BrettGreenfield__DNR_ · ‎01-09-2014

I've got a map with a dojo dGrid. When you click on an item in the grid, the map pans to that point via map.centerAt. This works fine, until you're zoomed in extremely close (it seems to happen at the three highest zoom levels). When zoomed in, the map will center at the point, but it won't actually draw the point until you zoom in/out again. I've only found this to happen in Firefox (I'm running version 26.0), and it doesn't seem to happen every single time, but frequently enough to be an issue. I thought it was my code but I tried the sample map for the dojo dGrid found here: http://developers.arcgis.com/en/javascript/samples/fl_dgrid/ which also uses the centerAt method and it happens on that map as well.

You can also see it happen on my map with this code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>True Blue Program Participants</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
    html, body { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      overflow: hidden;
    }
 td
 {
 padding:3px;
 }
    #BasemapToggle {
      position: fixed;
      top: 3%;
      right: 20px;
      z-index: 50;
    } 
    #container { 
      height: 100%; 
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
 .dgrid-column-Email {
   width: 26%;
 }
 .dgrid-column-MaxSize {
   width: 6%;
 }
 .dgrid-column-Phone {
   width: 6%;
 }
    td.field-id { cursor: pointer; 
   text-decoration:underline;
   color:blue;
 }
  </style>

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
    require([
      "dojo/ready",
      "dgrid/OnDemandGrid",
      "dgrid/Selection", 
      "dojo/store/Memory", 
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map", 
      "esri/layers/FeatureLayer",
   "esri/dijit/Legend",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
   "esri/dijit/BasemapToggle",
      "dojo/_base/declare", 
      "dojo/number", 
      "dojo/on", 
      "dojo/parser", 
      "dijit/layout/BorderContainer", 
      "dijit/layout/ContentPane"
      ], function(
        ready,
        Grid, 
        Selection, 
        Memory, 
        array,
        domStyle,
        registry,
        Map,
        FeatureLayer,
        Legend,
        QueryTask,
        Query,
  BasemapToggle,
        declare, 
        dojoNum, 
        on, 
        parser
      )
  {
        ready(function() {

          parser.parse();

          // create the dgrid
          window.grid = new (declare([Grid, Selection]))({
            bufferRows: Infinity,
            columns: {
              "id": "Business Name",
              "Address": "Address",
     "City": "City",
     "State": "State",
     "Zip": "Zip Code",
     "Type": "Business Type"
            }
          }, "grid");

          grid.on(".field-id:click", selectParticipant);

          window.map = new Map("map", {
            basemap: "streets",
            center: [-76.5, 38.9],
            zoom: 8
          });
    
    var toggle = new BasemapToggle({
   map: map,
   basemap: "satellite"
    }, "BasemapToggle");
    toggle.startup();    

          window.trueblueUrl = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/TrueBlueMap/FeatureServer/0";
          window.outFields = ["Business_N", "Address", "City_1", "State", "Zip", "Type"];
    
          var infoTemplate = new esri.InfoTemplate();
          infoTemplate.setTitle("${Business_N}");
    infoTemplate.setContent( "<table border='0', width='100%'>"
         + "<tr><td width='50%' width='100%' valign='top'>Address:</td><td width='50%' valign='bottom'> ${Address}</td></tr>"
         + "<tr><td width='50%' width='100%' valign='top'>City:</td><td width='50%' valign='bottom'> ${City_1}</td></tr>"
         + "<tr><td width='50%' width='100%' valign='top'>State:</td><td width='50%' valign='bottom'> ${State}</td></tr>"
         + "<tr><td width='50%' width='100%' valign='top'>Zip:</td><td width='50%' valign='bottom'> ${Zip}</td></tr>"
         + "<tr><td width='50%' width='100%' valign='top'>Business Type:</td><td width='50%' valign='bottom'> ${Type}</td></tr>"
         + "</table>"
    );
        
    
    map.infoWindow.resize(425,150);
    
    var highlight = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255]), 3), new dojo.Color([50,50,255,0]));
    
          var fl = new FeatureLayer(window.trueblueUrl, {
            id: "participants",
            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
            outFields: window.outFields,
   infoTemplate: infoTemplate
          });
    
    fl.on("click", function(e) {
      fl.clearSelection();
   map.graphics.clear();
   map.graphics.add(new esri.Graphic(e.graphic.geometry, highlight));
   grid.clearSelection();
    });

          fl.on("mouse-over", function() {
            map.setMapCursor("pointer");
          });
          fl.on("mouse-out", function() {
            map.setMapCursor("default");
          });

    dojo.connect(map.infoWindow, "onHide", function() {
   map.graphics.clear();
   });

    
          map.addLayers([fl]);   

          map.on("load", function( evt ){
            domStyle.set(registry.byId("container").domNode, "visibility", "visible");
            populateGrid(Memory);
          });

          function populateGrid(Memory) {
            var qt = new QueryTask(window.trueblueUrl);
            var query = new Query();
   bType = document.getElementById("businessFilter").value;
            query.where = "Type LIKE '%" + bType + "%'";
            query.returnGeometry = false;
            query.outFields = window.outFields;
            qt.execute(query, function(results) {
              var data = array.map(results.features, function(feature) {
                return {
                  "id": feature.attributes[window.outFields[0]],
                  "Address": feature.attributes[window.outFields[1]],
      "City": feature.attributes[window.outFields[2]],
      "State": feature.attributes[window.outFields[3]],
      "Zip": feature.attributes[window.outFields[4]],
      "Type": feature.attributes[window.outFields[5]]
                }
              });
              var memStore = new Memory({ data: data });
              window.grid.set("store", memStore);
            });
          }
          // fires when a row in the dgrid is clicked
          function selectParticipant(e) {
      map.graphics.clear();
      map.infoWindow.hide();
            var fl = map.getLayer("participants");
            var query = new Query();
            businessName = (e.target.innerHTML);
   query.where = "Business_N = " + "'" + businessName.replace("'", "''") + "'";  
            fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
              map.centerAt(result[0].geometry);
     result[0].getDojoShape().moveToFront();
     map.graphics.add(new esri.Graphic(result[0].geometry, highlight));
            });  
          }  
    document.getElementById("businessFilter").onchange = function (businessTypeQuery) {
      businessType = document.getElementById("businessFilter").value;
   fl.setDefinitionExpression("Type LIKE'%" + businessType + "%'")
   populateGrid(Memory);
    };    
        }
      );
    });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false, design: 'sidebar', liveSplitters:true">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center', splitter:true" style="z-index:2">
   <span id="BasemapToggle"></span>
   <span id="Filter" style="position:fixed; left:4.5%; z-index:1; top:2.1%; background-color:#FFFFFF; border:2px solid #666666; border-radius:6px; font-size:18px"><table id="filterTable", border='0', width='100%'><tr><td>Sort by:</td><td><select id='businessFilter' onchange="businessTypeQuery(this.value)"><option value='''>All Business Types</option><option value='Carry Out'>Carry Out</option><option value='Caterer'>Caterer</option><option value='Distributor'>Distributor</option><option value='Food Truck'>Food Truck</option><option value='Institutional'>Institutional</option><option value='Restaurant'>Restaurant</option><option value='Retail'>Retail</option><option value='Wholesale'>Wholesale</option></td></tr></table></span>
 </div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter:true"> <div id="grid"></div>
    </div>
  </div>
</body>
</html>

JonathanUihlein · ‎01-09-2014

Here is the code that bgfield posted in a working jsfiddle sample: http://jsfiddle.net/U23kr/

Using the sample, I was able to confirm that graphics sometimes do not show up at extremely close zoom levels.

However, after viewing the documentation, it looks like centerAt() returns a deferred.
You could probably wait until the centerAt() operation is complete, and use a .then() to add the graphic.
If the issue still persists after this change, please let me know.

BrettGreenfield__DNR_ · ‎01-09-2014

I actually tried getting rid of the map.graphics.add part entirely to see if there was an issue with drawing the graphic, and that didn't have an effect on the bug.

JohnGrayson · ‎01-10-2014

Jon is correct, you need to wait until after the map has finished moving to the new location before you can use .getDojoShape().moveToFront(). Here's a modified version of the jsfiddle with the updated code:

http://jsfiddle.net/23tDs/

BrettGreenfield__DNR_ · ‎01-10-2014

Hmm. I just tried that jsfiddle and the error still occurs (again, only in Firefox). Is it working correctly for you?

JonathanUihlein · ‎01-10-2014

Confirming the issue still exists in the modified sample (Firefox).

Like before, the graphic appears after zooming in/out.
Not sure why; there's no apparent consistancy as to when a graphic displays or not.

Going to look into it.