Skip to content

Latest commit

 

History

History
98 lines (74 loc) · 3.43 KB

lab.md

File metadata and controls

98 lines (74 loc) · 3.43 KB
Raw

###Search with Widget

In this lab you will add a search widget and search against a feature layer. The widget performs context-sensitve search as you type and then it will zoom to and highlight the feature selected. You can also format the data in the popup that appears.

In this lab it will search against the neighborhood polygon layer but you can point to any hosted feature layer you want.

  1. Click create_starter_map/index.html and copy the contents to a new jsbin.com.

  2. In JSBin > HTML, update the require statement and function definition:

require([
  "esri/Map",
  "esri/views/MapView",
  /*** ADD ***/
  "esri/widgets/Search",
  "esri/layers/FeatureLayer",
  "dojo/domReady!"
], function(Map, MapView, Search, FeatureLayer) { /*** ADD ***/
  1. Create the Search widget and add it to the top-right of the UI.
  ...      

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-122.68, 45.52], // lon, lat
    zoom: 10
  });

  /*** ADD ***/

  // Create search widget
  var searchWidget = new Search({
    view: view,
    allPlaceholder: "Neighborhood e.g. Downtown"
  });

  // Initialize the widget
  searchWidget.startup();

  // Add widget to the UI
  view.ui.add(searchWidget, {
    position: "top-right"
  });

At this point, the map will allow you to search against the default ArcGIS Online Geocoding Service. Give it a go. You can enter an address or point of interest (like Providence Park or PDX) or a geography (like Oregon or USA).

  1. Now add the Neighborhoods Feature Service as a search source to the widget. This will allow you to search for different neighborhoods by the Name field. Also notice that a template is added for the popup to format the data nicely.
  ...
  
  var searchWidget = new Search({
    view: view,
    allPlaceholder: "Neighborhood e.g. Downtown"
  });

  /*** ADD ***/

  var sources = [];
  
  // Add the default world geocoder source
  sources.push(searchWidget.defaultSource);

  // Add the feature layer source to search      
  sources.push({
    featureLayer: new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0"),
    name: "Neighborhood Search",
    searchFields: ["NAME"],
    displayField: "NAME",
    exactMatch: false,
    outFields: ["NAME","AVGHINC_CY","MEDAGE_CY","TOTPOP_CY"],
    placeholder: "Neighborhood e.g. Downtown",
    // Create a PopupTemplate to format data
    popupTemplate: {
      title: "{NAME}",
      content: "Median Age: {MEDAGE_CY}</br>Average Household Income: {AVGHINC_CY}</br> Population: {TOTPOP_CY}"
    }
  });

  // Set the sources
  searchWidget.sources = sources;
  1. In JSBin, run the app and type in Downtown or St. John's. The app should highlight and zoom into the neighborhood polygon, and a popup should also be displayed with there field data.

Your app should look something like this:

###Bonus