Add Custom Search to ArcGIS Online Basic Viewer

David_L_Price

I was hoping to get some help on adding some sort of basic search filter to the AGO Basic Viewer App.

Essentially, I would like to search by 'Parcel Number' and have this functionality in the Basic Viewer.  I understand there's an out-of-the box Parcel Viewer App, but it doesn't have the easy edit functions that the Basic Viewer has.  I figured it would be easier to add a search than to build an editing widget.

Any help or online tutorial/how-to on how to accomplish this?  It'd have to be fairly step-by-step, I have an idea of how JavaScript works, but I don't really the skills to code something from scratch.




Thanks!

Kevin

JakeSkinner

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.

BasicViewer.zip

gis_in_business_jjk.pdf