Solved! Go to Solution.
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>
<!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>
<!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>
<!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>
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>