Hi Brandon,Each map contains a graphics layer by default, so you won't have to create one. The graphics layer is accessible using the Map.Graphics property.Try the following:/// <reference path="index.html" />
var mapMain, selectionLayer, graphicsLayer, selectionToolbar, graphic, defaultSymbol, highlightSymbol, resultTemplate;
require([
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/tasks/GeometryService",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/FeatureSet",
"esri/graphic",
"esri/toolbars/draw",
"esri/config",
"dojo/ready",
"dojo/parser",
"dojo/on",
"dojo/dom",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"],
function (
Map, Extent, ArcGISTiledMapServiceLayer, FeatureLayer,
GeometryService, Query, QueryTask, FeatureSet, graphic, draw, config,
ready, parser, on, dom, array, BorderContainer, ContentPane
) {
ready(function () {
// Create the map
mapMain = new Map("cpCenter")
var layerURL = "http://gisaprd/ArcGIS/rest/services/BaseMap_ArcReader_Cached/MapServer";
myLayer = new esri.layers.ArcGISTiledMapServiceLayer(layerURL);
mapMain.addLayer(myLayer);
dojo.connect(mapMain, "onLoad", initSelectToolbar);
button2 = dom.byId("clearButton");
on(button2, "click", clearSelection);
var queryTask = new QueryTask("http://gisaprd/ArcGIS/rest/services/SRSOutageTest/MapServer/3");
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "GIS_X IS NOT NULL";
queryTask.execute(query, showResults, errBack);
defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255]));
highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));
});
function initSelectToolbar(mapMain) {
selectionToolbar = new esri.toolbars.Draw(mapMain);
dojo.connect(selectionToolbar, "onDrawEnd", findPointsInExtent);
}
function showResults(featureSet) {
dojo.forEach(featureSet.features,function(feature){
mapMain.graphics.add(feature.setSymbol(defaultSymbol));
});
}
function findPointsInExtent(extent) {
var results = [];
dojo.forEach(mapMain.graphics.graphics,function(graphic){
if (extent.contains(graphic.geometry)) {
graphic.setSymbol(highlightSymbol);
}
else if (graphic.symbol == highlightSymbol) {
graphic.setSymbol(defaultSymbol);
}
});
}
function errBack(results) {
alert(results);
}
function clearSelection(){
selectionToolbar.deactivate();
dojo.forEach(mapMain.graphics.graphics,function(graphic){
graphic.setSymbol(defaultSymbol);
});
}
});I also added a function to clear the selection. You can call the button from your HTML using the 'dojo/dom' module, and then execute the 'clearSelection' function:button2 = dom.byId("clearButton");
on(button2, "click", clearSelection);Here is the updated HTML:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CP-Isolated Steel Services</title>
<!-- Configure dojo for asynchronous module loading -->
<script>
var dojoConfig = {
async: true
};
</script>
<!-- Reference libraries. The first CSS is a Dojo theme that gives dijits a consistent style. -->
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="css/workwiththemap.css"/>
<script src="http://js.arcgis.com/3.7/"></script>
<script src="JavaScript/CP_IsolatedSteelServices.js"></script>
</head>
<body class="nihilo">
<button data-dojo-type="dijit.form.Button" id="selectButton" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select</button>
<button data-dojo-type="dijit.form.Button" id="clearButton">Clear Selection</button><br>
<div id="cpCenter" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', liveSplitters:'true'" >
</div>
</body>
</html>
