"The art and science of asking questions is the source of all knowledge." | ||
| --Thomas Berger | ||
Queries are the gateways to asking questions to the map through the API. They are considered as a task in the API terminology because the process of forming queries and getting the answers is a sequence of operations that must be carried out properly. In this chapter, we will be developing a Wildfire Location app to understand the following concepts:
- Building and executing the Query task
- Building and executing the Identify task
- Building and executing the Find task
- Promises, deferred, and the result objects for the Query, Find, and Identify tasks
- Using
FeatureTable dijit - Using
Infotemplates
In this chapter, we will be developing an app that will display Active Wildfire Locations in the United States with a background map showing the Wildfire Potential for any location. We will also try to provide search/query functionalities by harnessing the components provided by the API. The following screenshot provides a rough rendition of our final application that we will have developed by the end of this chapter:
The application will have the following components:
- Dark gray basemap
- Two operational map services, one displaying the Wildfire potential for the United States (raster data) and the other displaying Active Wildfire Locations (point data)
- A legend dijit (dojo widget) displaying the symbology of the layers added to the map
- A report widget that shows all the records of the Active Wildfire Locations
- A query widget where you can query Active Wildfire Locations based on the areal extent of Wildfire (this information is available in a field in the data)
- A Find widget where you can enter any text, and all the States or Fire Names matching the search text will be fetched
- A map click event that will identify and conspicuously display Wildfire Potential at the map click location
- There are two operational data sources; one is the Wildfire Hazard Potential map service available at http://maps7.arcgisonline.com/arcgis/rest/services/USDA_USFS_2014_Wildfire_Hazard_Potential/MapServer and the other is Active Wildfire Data available at http://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/Wildfire_Activity/MapServer
- The latter map service is a secured map service, meaning that we need an ArcGIS Online account or an ArcGIS Developer account to use it. Apart from the preceding data sources, to access the vast pool of ArcGIS Online Data and the ones published in the Living Atlas of the World (http://doc.arcgis.com/en/living-atlas/), we need to do the following:
Using our ArcGIS Developer credentials (which we created as part of the Setting up the development environment section in Chapter 1, Foundation for the API), sign into the ArcGIS Developer portal (https://developers.arcgis.com/).
Next, navigate to the Applications page of the developer portal by clicking the appropriate icon as highlighted in the following screenshot. You can even do so by visiting https://developers.arcgis.com/applications/.
When we click on the Register New Application button, we will be prompted to enter the details about our application, as shown in the following screenshot. After providing the required details, if we click on the Register New Application button again, we will be led to another screen that displays the token for the app. This short-lived token can be used to access any secured ArcGIS Online map services. For example, try accessing the this in your browser—http://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/Wildfire_Activity/MapServer.
You'll be redirected to a page that requires you to enter a token. When you provide the token that you got in the previous screen, you can see Service Catalog for the map service that we intend to see. The following screenshot explains this process:
In this project, we need to use an Esri resource proxy to access secure ArcGIS Online data sources. The resource proxy is the server-side code that handles the request from the client to ArcGIS Server and forwards the response back from ArcGIS Server to the client. Esri has provided a proxy implementation that is specifically suitable for ArcGIS Server and ArcGIS Online. The Github code can be found at https://github.com/Esri/resource-proxy.
We will only be using the ASP.NET variant of the resource proxy that contains the following important files:
proxy.ashxproxy.configWeb.config
The proxy.ashx file contains the server-side code logic for making the request and forwarding the response back to the client. We need to configure proxy.config and include our ArcGIS Developer credentials in it. A sample proxy.config page is shown in the following screenshot:
To configure the proxy.config file, perform the following steps:
- In the
proxy.configfile, modify the property values forurl,username, andpasswordin theserverUrltag. For thetokenServiceUriproperty, the value should always behttps://www.arcgis.com/sharing/generateToken. - For the
urlproperty, the value will be the location of the ArcGIS Server service. Specify either the specific URL (in this case, you will setmatchAll="false") or just the root URL (as shown in the preceding screenshot; in this case, thematchAllvalue will be"true").Note
For more details on configuring the
proxy.configfile, refer to https://github.com/Esri/resource-proxy/blob/master/README.md#proxy-configuration-settings. - After configuring the proxy pages, we need to add a few more lines of code to our application. We need to load the
esri/configmodule and use the following lines in our app code:esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx"; esriConfig.defaults.io.alwaysUseProxy = true;
In our application, the proxy.ashx page is located in the proxy folder at the application root. If the proxy pages are at a different application, we need to change the value for the esriConfig.defaults.io.proxyUrl variable. When we set the esriConfig.defaults.io.alwaysUseProxy value as true, all requests are handled by the proxy. If we need only specific URLs to be handled by the proxy, we may need to add a few more lines of code like this:
urlUtils.addProxyRule({
urlPrefix: "route.arcgis.com",
proxyUrl: "/proxy/proxy.ashx"
});The urlUtils function is provided by the esri/urlUtils module.
The following diagram shows the flow of a HTTP REST request from the client to a secure ArcGIS Server service:
All the applications throughout this book are styled and bootstrapped using Bootstrap map libraries. The source code for these libraries can be found at https://github.com/Esri/bootstrap-map-js.
Once you download the required libraries, we will need to add the following CSS and JavaScript libraries to our application:
<head> <!-- Bootstrap-map-js& custom styles --> <link href="css/lib/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/lib/bootstrapmap.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> </head> <body> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/lib/bootstrap.min.js"></script> </body>
Once these libraries are added, we need to add one more JavaScript file as a dojo module and not as a script reference. In our application, the JavaScript library under discussion is located at /js/lib/bootstrapmap.js.
When adding this library as a module in the require function, we need to omit the file extension. The following screenshot illustrates this statement:
So, instead of using the esri/map module, we will be using the bootstrapmap module to create the map. The bootstrapmap module accepts all the properties and methods that the esri/map provides, since the bootstrapmap module is just a wrap around the esri/map module.