Exercise 8 - Search with Widgets
Instructions:
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.
It will search against the neighborhood polygon layer but you can point to any hosted feature layer you want.
You'll also notice that we're using a WebMap via portal item ID. This makes our lives easier, if any layers have been configured to search against the webmap they will automatically show up in the search widget we create!
Exercise:
1. Update Require Statement
In our "require" block, we need to tell Dojo to include the widget for "Search" and then tell dojo we're ready to load it in. Make sure to include the "Search" in our function scope!
require([
"esri/WebMap",
"esri/views/MapView",
/*** ADD THESE ***/
"esri/widgets/Search"
], function(WebMap, MapView, Search) {
2. Create Search Widget
Now we're going to put in some code to create the widget and then add it to the "top-right" of our map UI.
. . .
var view = new MapView({
map: map,
container: "viewDiv",
});
/*** ADD THESE ***/
//Create search widget
var searchWidget = new Search({
view: view
});
//Add widget to the UI
view.ui.add(searchWidget, "top-right");
Our search widget is created and added to the map! Check it out! Now if you refresh your map, it should look something like this:
3. Try on your own!
This time, we're going to add a basemap gallery widget to toggle between different AGOL basemaps.
But no copy-pasting this time
sorry. Use the API Reference to figure out what "require" and "function" definition you need as well as how to initialize and add the widget to the UI.
BasemapGallery Help
After adding that widget, your map should look like this, with both a functioning search widget and basemap gallery:
Challenges:
Having the Basemap Gallery open all the time takes up a lot of space, and isn't very user friendly. There is an
Expand Widget that acts like a clickable button for opening a widget.
Try putting the Basemap Gallery into the expand widget, and you'll notice that this is way easier on the eyes! Also don't forget to remove your previous "view.ui.add".
Now it should look like this while collapsed:
Final Solution