Solved! Go to Solution.
require([ "esri/map", "esri/tasks/QueryTask", "esri/tasks/query", "esri/geometry/Extent", "esri/SpatialReference", "esri/InfoTemplate", "esri/graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/parser", "dojo/dom", "dojo/on", "dojo/ready"], function( Map, QueryTask, Query, Extent, SpatialReference, InfoTemplate, Graphic, SimpleFillSymbol, SimpleLineSymbol, parser, dom, on, ready ){ ready(function() { var button = dojo.byId("typeButton") on(button, "click", findPark) function findPark(){ map.graphics.clear(); var queryTask = new QueryTask("http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Parks/FeatureServer/0"); var query = new Query(); query.returnGeometry = true; query.outFields = ["*"]; query.outSpatialReference = {"wkid":102100}; query.where = "NAME = '" + dojo.byId("txtBox").value + "'"; queryTask.execute(query); queryTask.on("complete", selectResults) } function selectResults(graphics){ var parkName = graphics.featureSet.features[0].attributes["NAME"]; var park = new Graphic(graphics.featureSet.features[0].geometry); var infoTemplate = new InfoTemplate("PARK:", parkName); park.setInfoTemplate(infoTemplate); map.graphics.add(park); var extent = new Extent(map.graphics.graphics[0].geometry._extent.xmin, map.graphics.graphics[0].geometry._extent.ymin, map.graphics.graphics[0].geometry._extent.xmax, map.graphics.graphics[0].geometry._extent.ymax, new SpatialReference({ wkid:102100 })); map.setExtent(extent, true); featureArray = []; featureArray.push(park); var templatePt = park.geometry.getCentroid(); map.infoWindow.setFeatures(featureArray); map.infoWindow.show(templatePt); } }) });
<script type="text/javascript" src="javascript/find.js">
<div id="webmap-toolbar-left"> <input type="text" id="txtBox"> <input type="button" id="typeButton" value="Find Park"> </div>
require([ "esri/map", "esri/tasks/QueryTask", "esri/tasks/query", "esri/geometry/Extent", "esri/SpatialReference", "esri/InfoTemplate", "esri/graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/parser", "dojo/dom", "dojo/on", "dojo/ready"], function( Map, QueryTask, Query, Extent, SpatialReference, InfoTemplate, Graphic, SimpleFillSymbol, SimpleLineSymbol, parser, dom, on, ready ){ ready(function() { var button = dojo.byId("typeButton") on(button, "click", findPark) function findPark(){ map.graphics.clear(); var queryTask = new QueryTask("http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Parks/FeatureServer/0"); var query = new Query(); query.returnGeometry = true; query.outFields = ["*"]; query.outSpatialReference = {"wkid":102100}; query.where = "NAME = '" + dojo.byId("txtBox").value + "'"; queryTask.execute(query); queryTask.on("complete", selectResults) } function selectResults(graphics){ var parkName = graphics.featureSet.features[0].attributes["NAME"]; var park = new Graphic(graphics.featureSet.features[0].geometry); var infoTemplate = new InfoTemplate("PARK:", parkName); park.setInfoTemplate(infoTemplate); map.graphics.add(park); var extent = new Extent(map.graphics.graphics[0].geometry._extent.xmin, map.graphics.graphics[0].geometry._extent.ymin, map.graphics.graphics[0].geometry._extent.xmax, map.graphics.graphics[0].geometry._extent.ymax, new SpatialReference({ wkid:102100 })); map.setExtent(extent, true); featureArray = []; featureArray.push(park); var templatePt = park.geometry.getCentroid(); map.infoWindow.setFeatures(featureArray); map.infoWindow.show(templatePt); } }) });
<script type="text/javascript" src="javascript/find.js">
<div id="webmap-toolbar-left"> <input type="text" id="txtBox"> <input type="button" id="typeButton" value="Find Park"> </div>
Hi Kevin,
Attached is an example on how to do this. The application searches for a park by it's name. What I did was added the below code to a new JavaScript file called 'find.js':require([ "esri/map", "esri/tasks/QueryTask", "esri/tasks/query", "esri/geometry/Extent", "esri/SpatialReference", "esri/InfoTemplate", "esri/graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/parser", "dojo/dom", "dojo/on", "dojo/ready"], function( Map, QueryTask, Query, Extent, SpatialReference, InfoTemplate, Graphic, SimpleFillSymbol, SimpleLineSymbol, parser, dom, on, ready ){ ready(function() { var button = dojo.byId("typeButton") on(button, "click", findPark) function findPark(){ map.graphics.clear(); var queryTask = new QueryTask("http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Parks/FeatureServer/0"); var query = new Query(); query.returnGeometry = true; query.outFields = ["*"]; query.outSpatialReference = {"wkid":102100}; query.where = "NAME = '" + dojo.byId("txtBox").value + "'"; queryTask.execute(query); queryTask.on("complete", selectResults) } function selectResults(graphics){ var parkName = graphics.featureSet.features[0].attributes["NAME"]; var park = new Graphic(graphics.featureSet.features[0].geometry); var infoTemplate = new InfoTemplate("PARK:", parkName); park.setInfoTemplate(infoTemplate); map.graphics.add(park); var extent = new Extent(map.graphics.graphics[0].geometry._extent.xmin, map.graphics.graphics[0].geometry._extent.ymin, map.graphics.graphics[0].geometry._extent.xmax, map.graphics.graphics[0].geometry._extent.ymax, new SpatialReference({ wkid:102100 })); map.setExtent(extent, true); featureArray = []; featureArray.push(park); var templatePt = park.geometry.getCentroid(); map.infoWindow.setFeatures(featureArray); map.infoWindow.show(templatePt); } }) });
Next, I updated the index.html to call the new javascript file:<script type="text/javascript" src="javascript/find.js">
And to create the text box and button:<div id="webmap-toolbar-left"> <input type="text" id="txtBox"> <input type="button" id="typeButton" value="Find Park"> </div>
You can search for park, i.e. 'Fairmount Park', and the app will select, zoom to the park, and display a pop-up.