Add Custom Search to ArcGIS Online Basic Viewer

[KevinLaughlin]

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 · Accepted solution]

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.

[GaneshSolai_Sambandam]

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.

Hi jskinner
Really nice functionality.
Thank you for this.

Actually, I need some help from you. Basically I am trying to find nearest features from an input location. The near feature location would be point, line and polygon and I need to query 5 nearest features and if the nearest feature is a line or polygon then it should find the nearest vertices from the line or polygon rather than using the centroid to calculate their distance. Can you point me to the sample code please. 

Regards
Ganesh

[KevinLaughlin]

Thank you Jake!

[PatKeegan]

Kevin,

You can also configure the geocoder to use Parcel Number for a search, you'll need to setup a Parcel Number locator service to do this. 


More details in this thread:
http://forums.arcgis.com/threads/90569-seeking-samples-or-documentation-on-using-multiple-geocoders-...

[CraigMcDade]

any chance that this gets included out of the box with future releases of AGOL?

[NickKouloungis]

Thank you for this code.  It is just what I needed for my app!

[GaryTe]

This is a great code! Has anyone been able to use it to search for marker symbols? I'm still learning how to code, so I'm not sure what to change/add in this code to make it work. Any help would be appreciated. Thanks!