Hiding/showing graphics using .hide and .show issue

MatthewGoulet1 · ‎03-20-2013

Panning seems to be fairly choppy when there are numerous objects on the graphics layer (in my case, building footprints). I decided that a workaround would be to hide the graphics layer while panning, and then restore visibility.

The code, I think, should be fairly simple, but the following script does not work. I've tried setting the visibility, doing a redraw/refresh on the lyrBuildings layer. Nothing seems to bring those objects back except zooming in or out. What am I missing?

dojo.connect(map, "onPanStart", function(){
lyrBuildings.hide();
});

dojo.connect(map, "onPanEnd", function(){
lyrBuildings.show();
});

StephenLead · ‎03-20-2013

The map has a displayGraphicsOnPan option, which you could try:

When true, graphics are displayed during panning. When false, the graphics are turned off during pan movement. Setting to false may improve performance in Internet Explorer. The default is true.

I'm not sure why your layer show/hide isn't working without seeing more of the code. Can you post the full extract if the above doesn't help?

Cheers,
Steve

MatthewGoulet1 · ‎03-21-2013

Steve,

Thanks for your suggestion. Unfortunately, it applies only to the map object, not its constituent layers.

Here is my code; I apologize if it is very messy!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>



<script type="text/javascript">

dojo.require("esri.map");
dojo.require("esri.tasks.query");

var map, lyrBuildings;
var queryTask, query, initialExtent;
var $dialogBox;
var buildingSymbol;

function init() {

   buildingSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
   new dojo.Color([70,67,54,1]), 1),new dojo.Color([255,255,188,1]));

   esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
   initialExtent = new esri.geometry.Extent( -8074819,5218852,-8072249,5220094, new esri.SpatialReference({"wkid":3857}));

   map = new esri.Map("map", {
    basemap: "topo"
    ,extent: initialExtent
    ,displayGraphicsOnPan: false
   });

         dojo.connect(map, "onPanStart", function(){
          lyrBuildings.hide();
         });

         dojo.connect(map, "onPanEnd", function(){
          lyrBuildings.show();
         });

   var queryTask = new esri.tasks.QueryTask("https://maps.admin.umass.edu/arcgis/rest/services/umaFacilities/umaFacilitiesOperationalLayers/Featu..." );
   var query = new esri.tasks.Query();
   query.where = "1=1";
   query.returnGeometry = true;
   query.outFields = ["LONGNAME"];
   queryTask.execute(query, addPointsToMap);

         map.infoWindow.resize(245,105);

       function addPointsToMap(featureSet) {
    var defaultRenderer = new esri.renderer.SimpleRenderer(
     new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([100,255,255,0.50])));

    lyrBuildings.setRenderer(defaultRenderer);

    var features = featureSet.features;

    dojo.forEach(features,function(feature){
     //map.graphics.add(feature);
     lyrBuildings.add(feature);
    });

    //dojo.connect(lyrBuildings,"onClick",identifyFeatures);
       }

      lyrBuildings = new esri.layers.GraphicsLayer();
      map.addLayer(lyrBuildings);

} //End Init

dojo.ready(init);

</script>

</head>

<body class="claro" style="height: 100%; margin: 0;">
<div id="map" style="padding:0; margin: 0;"></div>
</body>

</html>

StephenLead · ‎03-21-2013

Just a tip, when you paste code in the forums, use the # option at the top right - this prevents the forum from stripping your formatting.

I can't get to your buildings layer so it's hard to test, but your code looks right to me. Have you tried putting a debug breakpoint on lines 40 and 44 to see whether the show/hide code is firing?

One question is why you need to run a query then add the graphics to the layer - why not just define the buildings layer as a standard feature layer? This may handle the number of graphics better.

You could also try putting the query inside the map's onLoad event:

dojo.connect(map, "onLoad", function() {
    var queryTask = new esri.tasks.QueryTask("https://maps.admin.umass.edu/arcgis/rest/services/umaFacilities/umaFacilitiesOperationalLayers/FeatureServer/2" );
    var query = new esri.tasks.Query();
    query.where = "1=1";
    query.returnGeometry = true;
    query.outFields = ["LONGNAME"];
    queryTask.execute(query, addPointsToMap);
});

Sorry I can't help more,
Steve

derekswingley1 · ‎03-22-2013

You can set displayOnPan on a per layer basis: it's an option to the constructor for graphics layer (as well as feature layer).