bgfield

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

Discussion created by bgfield on Jan 9, 2014
Latest reply on Jan 10, 2014 by JUihlein-esristaff
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>

Outcomes