topic Re: Hiding/showing graphics using .hide and .show issue in ArcGIS JavaScript Maps SDK Questions

Hiding/showing graphics using .hide and .show issue

MatthewGoulet1 — Wed, 20 Mar 2013 17:11:33 GMT

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

Re: Hiding/showing graphics using .hide and .show issue

StephenLead — Wed, 20 Mar 2013 23:28:53 GMT

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

Re: Hiding/showing graphics using .hide and .show issue

MatthewGoulet1 — Thu, 21 Mar 2013 14:57:27 GMT

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/FeatureServer/2" );
   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>

Re: Hiding/showing graphics using .hide and .show issue

StephenLead — Sat, 11 Dec 2021 13:31:32 GMT

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

Re: Hiding/showing graphics using .hide and .show issue

derekswingley1 — Fri, 22 Mar 2013 13:46:02 GMT

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