topic Re: Add Custom Search to ArcGIS Online Basic Viewer in ArcGIS JavaScript Maps SDK Questions

Add Custom Search to ArcGIS Online Basic Viewer

KevinLaughlin — Fri, 21 Feb 2014 18:29:24 GMT

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

Re: Add Custom Search to ArcGIS Online Basic Viewer

JakeSkinner — Fri, 21 Feb 2014 19:30:10 GMT

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.

Re: Add Custom Search to ArcGIS Online Basic Viewer

GaneshSolai_Sambandam — Sat, 11 Dec 2021 08:08:20 GMT

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

Re: Add Custom Search to ArcGIS Online Basic Viewer

KevinLaughlin — Mon, 24 Feb 2014 12:00:24 GMT

Thank you Jake!

Re: Add Custom Search to ArcGIS Online Basic Viewer

PatKeegan — Mon, 24 Feb 2014 12:57:11 GMT

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-and-geocoderMenu

Re: Add Custom Search to ArcGIS Online Basic Viewer

CraigMcDade — Mon, 24 Feb 2014 16:57:08 GMT

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

Re: Add Custom Search to ArcGIS Online Basic Viewer

NickKouloungis — Wed, 26 Feb 2014 00:42:23 GMT

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

Re: Add Custom Search to ArcGIS Online Basic Viewer

GaryTe — Mon, 07 Apr 2014 19:14:40 GMT

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!