how to clear just one of multiple graphics layers?

MikeKillion · ‎07-12-2010

Hello,
I'm trying to set up 2 graphics layers - one to display a highlight of an identified point and one to display a second highlight of a user-selected point. My problem is that clearing the first graphics layer clears the highlights from the second graphics layer too. Code snippets attached. The problem code seems to be the "idGraphics.clear();" line - it clears both the idGraphics layer and the xSectionGraphics layer.

Any thoughts appreciated.

derekswingley1 · ‎07-14-2010

Derek,
Here's a mock up of what I'm trying to do. In the real application the 'Clear Default Graphics Layer' button would be replaced by uncommenting 'map.graphics.clear()' on line 58. The goal is to let the user examine points and add and highlight some to be used later in creating a geologic cross section. Currently however, when the user goes to examine another point, the previously selected point is lost.

Ravi,
I haven't had a chance to look at your code yet - will do so soon.

Thanks,
Mike
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

<script type="text/javascript">
 dojo.require("esri.map");
 dojo.require("esri.tasks.identify");

 var map;
 
 var xSectionFeature;
         
        ...snip...

  map.graphics.add(feature);
  
  xSectionFeature = feature;
 }
 
 ...snip...

    <div id="map" style="background-color:white; height:600px; width:800px;"></div>
</body>
</html>

I think your problem is the line in red. You should create a new graphic to add to your xSectionGraphics layer rather than assigning xSectionFeature to the object referenced by the feature variable. Changing that line to xSectionFeature = new esri.Graphic(feature.geometry, null, feature.attributes); would do the trick. But then you'll need to do some layer ordering managment...

View solution in original post

RaviKonaparthi · ‎07-12-2010

Hi,

While adding graphics layer assign an unique id to the layer.

Ex: var xSectionGraphics = new esri.layers.GraphicsLayer();
xSectionGraphics.id = 'uniqueId1';

and when you want to clear a particular graphic layer. Get the layer by its Id assigned and call the clear method.

Ex: map.getLayer('uniqueId1').clear();

Let me know if you face any problem.

Regards,
Ravi.

MikeKillion · ‎07-13-2010

Ravi,
Still having the same problem.

To restate the problem, I'm adding a feature to graphics layer A, and adding a feature to graphics layer B. I have 2 buttons - one which is supposed to clear layer A, one to clear layer B. I'm using map.getLayer('A').clear to clear the layers. When I click button B, only the graphics on layer B are cleared which is correct. However, when I click button A, graphics on both layers are cleared.

The same behavior occurs if I use map.graphics.clear() - both graphic layers get cleared.

Mike

derekswingley1 · ‎07-13-2010

Can you post a more complete code sample? What you're describing isn't making sense to me. If you use map.graphics.clear(), that should clear any graphics on the map's default graphics layer. It shouldn't affect graphics layers you've created and added to the map.

derekswingley1 · ‎07-13-2010

Here's a modified version of the multiple graphics layers sample. This is very brittle and just illustrating a point...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Multiple Graphics Layers</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>

    <script type="text/javascript" charset="utf-8">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map, cityLayer, countyLayer;

      function init() {
        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326}))),
          slider: false
        });
        dojo.connect(map, "onLoad", doQueries);
        dojo.connect(dojo.byId('clear_counties'), 'onclick', function() { countyLayer.clear(); });
        dojo.connect(dojo.byId('clear_cities'), 'onclick', function() { cityLayer.clear(); });
        dojo.connect(dojo.byId('do_queries'), 'onclick', function() { doQueries(map); });
        dojo.connect(dojo.byId('clear_default_graphics'), 'onclick', function() { map.graphics.clear(); });
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
      }

      function doQueries(map) {
        queryCounties(map);
        queryCities(map);
      }

      function queryCounties(map) {
        //Query all counties in Kansas
        var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
        var countyQuery = new esri.tasks.Query();
        countyQuery.outFields = ["*"];
        countyQuery.returnGeometry = true;
        countyQuery.outSpatialReference = map.spatialReference;
        countyQuery.where = "STATE_NAME = 'Kansas'";
        countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);
      }
      
      function queryCities(map) {
        //Query all cities in Kansas
        var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
        var cityQuery = new esri.tasks.Query();
        cityQuery.outFields = ["*"];
        cityQuery.returnGeometry = true;
        cityQuery.outSpatialReference = map.spatialReference;
        cityQuery.where = "STATE_NAME = 'Kansas'";
        cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
      }
      
      function addCountyFeatureSetToMap(featureSet) {
        var symbol = new esri.symbol.SimpleFillSymbol();
        symbol.setColor(new dojo.Color([150,150,150,0.5]));

        //Create graphics layer for counties
        countyLayer = new esri.layers.GraphicsLayer();
        map.addLayer(countyLayer);

        var infoTemplate = new esri.InfoTemplate("${NAME}","${*}");

        //Add counties to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {
          countyLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
        });
      }

      function addCityFeatureSetToMap(featureSet) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setColor(new dojo.Color([0,0,255]));

        //Create graphics layer for cities
        cityLayer = new esri.layers.GraphicsLayer();
        map.addLayer(cityLayer);
        map.reorderLayer(cityLayer,1);

        var infoTemplate = new esri.InfoTemplate("${CITY_NAME}","${*}");

        //Add cities to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {
          cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
        });
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    <div id="map" class="tundra" style="width:800px; height:400px; border:1px solid #000;"></div>
    <button id="clear_counties">Clear Counties</button>
    <button id="clear_cities">Clear Cities</button>
    <button id="do_queries">Do Queries</button>
    <button id="clear_default_graphics">Run map.graphics.clear()</button>
  </body>
</html>

RaviKonaparthi · ‎07-14-2010

Mike,

I have created a sample application by clearing a specific graphics layer.

Please let me know if you need any help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
    <script type="text/javascript" language="Javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        dojo.require("esri.layers.FeatureLayer");
        var map;

        function init() {
            //var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28, new esri.SpatialReference({ wkid: 4326 }));
            //create map
            map = new esri.Map("mapDiv");
            //create and add new layer
            var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(layer);
            dojo.connect(map, "onLoad", MapInitFunction);
        }

        function MapInitFunction(map) {
            var gLayer = new esri.layers.GraphicsLayer();
            gLayer.id = 'layer1';
            map.addLayer(gLayer);

            gLayer = null;

            gLayer = new esri.layers.GraphicsLayer(); 
            gLayer.id = 'layer2';
            map.addLayer(gLayer);

        }

        function addGraphic(layerId, image, imageSize) {
            var mapPoint = new esri.geometry.Point(-9862211.137463994, 4070118.8821280002, map.spatialReference);
            AddGraphictoLayer(image, mapPoint, map.getLayer(layerId), imageSize);
        }

        //function to add a graphic to a layer
        function AddGraphictoLayer(image, mapPoint, tempLayer, imageSize) {
            var symbol = new esri.symbol.PictureMarkerSymbol(image, imageSize, imageSize);
            var graphic = new esri.Graphic(mapPoint, symbol, null, null);
            var features = [];
            features.push(graphic);
            var featureSet = new esri.tasks.FeatureSet();
            featureSet.features = features;
            tempLayer.add(featureSet.features[0]);
        }

        function clearGraphics(layerId) {
            map.getLayer(layerId).clear();
        }

        dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">
    <input type="button" value="Add Graphic Layer1" onclick="addGraphic('layer1', 'images/home.png', 40);" />
       
    <input type="button" value="Add Graphic Layer2" onclick="addGraphic('layer2', 'images/circle.png', 20);" />
       
    <input type="button" value="Clear Graphic Layer1" onclick="clearGraphics('layer1')" />
       
    <input type="button" value="Clear Graphic Layer2" onclick="clearGraphics('layer2')"/>
       
    <div id="mapDiv" style="width: 800px; height: 400px; border: 1px solid #000;">
    </div>
</body>
</html>

Regards,
Ravi.

MikeKillion · ‎07-14-2010

Derek,
Here's a mock up of what I'm trying to do. In the real application the 'Clear Default Graphics Layer' button would be replaced by uncommenting 'map.graphics.clear()' on line 58. The goal is to let the user examine points and add and highlight some to be used later in creating a geologic cross section. Currently however, when the user goes to examine another point, the previously selected point is lost.

Ravi,
I haven't had a chance to look at your code yet - will do so soon.

Thanks,
Mike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

<script type="text/javascript">
 dojo.require("esri.map");
 dojo.require("esri.tasks.identify");

 var map;
 
 var xSectionFeature;
 var xSectionGraphics = new esri.layers.GraphicsLayer();
 
 var sr = new esri.SpatialReference({ wkid:102100 });
 var initExtent = new esri.geometry.Extent(-10940643, 4490465, -10931186, 4496141, sr);

 dojo.addOnLoad(init);

 function init(){
  map = new esri.Map("map", { nav:true });

  dojo.connect(map, 'onLoad', function(){
   dojo.connect(map, "onClick", executeIdTask);
   
   map.addLayer(xSectionGraphics); 
  });

  baseLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
  wellsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://giselle.kgs.ku.edu/arcgis/rest/services/mk_graphicstest/MapServer");
  
  map.addLayer(baseLayer);
  map.addLayer(wellsLayer);
  map.setExtent(initExtent, true);
 }

 function executeIdTask(evt) {
  var identify = new esri.tasks.IdentifyTask("http://giselle.kgs.ku.edu/arcgis/rest/services/mk_graphicstest/MapServer");
  
        var identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
  identifyParams.mapExtent = map.extent;
  identifyParams.geometry = evt.mapPoint;
  
  identify.execute(identifyParams, function(fset) {
   showPoint(fset,evt);
  });
 }

 function showPoint(fset, evt) {
  // I need to uncomment next line so highlight is cleared as user selects a new point.
  //map.graphics.clear();
 
  var feature = fset[0].feature;

  var ptSymbol = new esri.symbol.SimpleMarkerSymbol();
  ptSymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 3));
  ptSymbol.size = 20;
  feature.setSymbol(ptSymbol);

  map.graphics.add(feature);
  
  xSectionFeature = feature;
 }
 
 function addXSectionPt() {
  var sym = new esri.symbol.SimpleMarkerSymbol();
  sym.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3));
  sym.size = 20;
  xSectionFeature.setSymbol(sym);

  xSectionGraphics.add(xSectionFeature);
 }
</script>
</head>

<body class="soria">
    1) Click on a point.<br />
    2) Click 'Add Selected Point to 2nd Graphics Layer' button.<br />
    3) Click on a second point.<br />
    4) Clicking on the 'Clear 2nd Graphics Layer' button clears only the red highlight, as it should.<br />
    5) Click on 'Clear Default Graphics Layer' and repeat steps 1-3 so that a red point and a yellow point are displayed.<br />
    6) Now click 'Clear Default Graphics Layer' button. This (map.graphics.clear()) clears both graphics layer. I want the red highlight to persist
        while allowing the user to select another point.<p>
    <button onclick="addXSectionPt()">Add Selected Point to 2nd Graphics Layer (red)</button>
    <button onclick="xSectionGraphics.clear()">Clear 2nd Graphics Layer (red)</button>
    <button onclick="map.graphics.clear()">Clear Default Graphics Layer (yellow)</button>
    <p>
    <div id="map" style="background-color:white; height:600px; width:800px;"></div>
</body>
</html>

derekswingley1 · ‎07-14-2010

Derek,
Here's a mock up of what I'm trying to do. In the real application the 'Clear Default Graphics Layer' button would be replaced by uncommenting 'map.graphics.clear()' on line 58. The goal is to let the user examine points and add and highlight some to be used later in creating a geologic cross section. Currently however, when the user goes to examine another point, the previously selected point is lost.

Ravi,
I haven't had a chance to look at your code yet - will do so soon.

Thanks,
Mike
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

<script type="text/javascript">
 dojo.require("esri.map");
 dojo.require("esri.tasks.identify");

 var map;
 
 var xSectionFeature;
         
        ...snip...

  map.graphics.add(feature);
  
  xSectionFeature = feature;
 }
 
 ...snip...

    <div id="map" style="background-color:white; height:600px; width:800px;"></div>
</body>
</html>

I think your problem is the line in red. You should create a new graphic to add to your xSectionGraphics layer rather than assigning xSectionFeature to the object referenced by the feature variable. Changing that line to xSectionFeature = new esri.Graphic(feature.geometry, null, feature.attributes); would do the trick. But then you'll need to do some layer ordering managment...

MikeKillion · ‎07-15-2010

Derek - that worked beautifully!
Thank you very much.
Mike