Skip to content

Latest commit

 

History

History
99 lines (77 loc) · 3.42 KB

lab.md

File metadata and controls

99 lines (77 loc) · 3.42 KB
Raw

###Working with Widgets

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 webmap_apps/create_jsapi_app/index.html and copy the contents to a new jsbin.com.

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

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

  var view = new MapView({
    container: "viewDiv",
    map: map
  });

  /*** ADD ***/

  // Create search widget
  var searchWidget = new Search({
    view: view
  });

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

Another advantage of using a web map is that if layers have been configured to search against in the web map they automatically show up in the search widget.

Your app should look something like this:

  1. Now let's play with some other widgets like a legend widget. First we need to add the appropiate require and function definition.
  require([
    "esri/WebMap",
    "esri/views/MapView",
    /*** ADD ***/
    "esri/widgets/Search",
    "esri/widgets/Legend",
    "dojo/domReady!"
  ], function(WebMap, MapView, Search, Legend) {
  1. Now we need to add the widget.
  var legend = new Legend({
	    view: view,		
	});
	  
	view.ui.add(legend, "bottom-left");

That's it. play around with moving the legend around on the ui.

  1. Next add a basemap gallery to toggle between basemaps. Use the help this time to figure out what require and function definition you need as well as how to add the widget to the ui.
    BasemapGallery Help

Your app should look something like this:

###Bonus

  • There is an Expand Widget that acts like an clickable button for opening a widget. Try putting either or both of the legend and basemap gallery into the expand widget.
  var basemapGallery = new Expand ({
	    content: new BasemapGallery({
          view: view,
		  }),
		  view: view,
		  expanded: false
      });

Your app should look something like this:

  • Code

  • Live App

  • Add widgets to your 3D Scene app like the legend and search like what you did in 2D

Your app should look something like this: