Introducing the Nearby Sample App

1418
0
10-15-2019 10:19 AM
TresorCyubahiro1
New Contributor
0 0 1,418

We are excited to announce the release of a new sample app - Nearby - available today in AppStudio for ArcGIS! This sample showcases how to find the nearest places of interest worldwide, filter them by category, and provide step-by-step directions from your current location. Give this new app a spin using the AppStudio Player (readily available to run in the samples tab) on your favorite mobile or tablet.

The source code for this app is available for you to learn and customize further in AppStudio Desktop (4.0 and above) along with all the other great sample apps. Just open Desktop, click on the New App button, and either browse or type Nearby in the search box to find the sample and click Create.

 

Please check this blog for feature highlights

 

Technical Highlights                          

 

Geocoding

 

We accomplish geocoding process by using Esri’s World Geocoding Service which allows you to search for places using high-level concepts such as a category level 1 descriptor (e.g “POI” for places of interest), a category level 2 descriptor (eg. “Food”) or a category level 3 descriptor which is more specific (eg. “Japanese food”). The category filters and other search criteria such as the maximum number of results, output fields, and search area are defined using the ArcGIS Runtime SDK’s GeocodeParameters.

 

Geocoding in this sample is implemented using the LocatorTask class. Note that we are using an online locator URL in the sample, but the URL can be replaced with your own custom online/offline locator. Inside the project folder, you will find the LocatorTask in the Views/Geocodeview.qml file (line 333).

 

LocatorTask {
   id: locatorTask
   url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
   .
   .
   .
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Routing 

 

In order to provide routing, we utilize Esri’s routing service which allows us to generate directions and display them to the user both as a route drawn on the map and as a list of turn-by-turn directions. 

 

We accomplish this using ArcGISRuntime's RouteTask class. Note that Esri’s online routing service requires authentication and thus all your routing requests will have to be authenticated with your ArcGIS online clientId  and clientSecret. Remember to add both of these keys inside the project in file Views/RoutingView.qml on lines 286 and 287 as shown below in the graphic below. 

 

OAuthClientInfo {        
   id: clientInfo
   clientId: "<<YOU CLIENT ID GOES HERE>>"
   clientSecret: "<<YOUR CLIENT SECRET GOES HERE>>"
   oAuthMode: Enums.OAuthModeApp
} 

Credential {
   id: cred
   oAuthClientInfo: clientInfo
}
RouteTask {
   id: routeTask
   url: "http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
   credential: cred
   .
   .
   .
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

The sample also showcases how to get directions for two transport modes namely walking and driving. Switching between walking and driving directions is accomplished by simply setting three values of the RouteTask’s RouteParameters property as shown in the snippet below.  

function setToWalkMode() {
   routeParameters.travelMode.type = "WALK";
   routeParameters.travelMode.impedanceAttributeName = "WalkTime";
   routeParameters.travelMode.timeAttributeName = "WalkTime";
}

function setToDriveMode() {
   routeParameters.travelMode.type = "AUTOMOBILE";
   routeParameters.travelMode.impedanceAttributeName = "TravelTime";
   routeParameters.travelMode.timeAttributeName = "TravelTime";
}‍‍‍‍‍‍‍‍‍‍‍

Project Structure 

 

image showing nearby sample app project structure

When you open the sample files you will see that the project is divided into four folders as follows:

  • Assets folder contains all localized assets such as images, text strings, and colors that are used in the app.
  • Controls and Widgets contain components that are used to complete and manage the user interface.
  • Views contain files that implement the main functionalities of the app.
    • MapView.qml adds a map and provides all other functions for interacting with the map such as displaying graphics for found places and drawing routes.
    • RouteView.qml implements routing functionalities.
    • GeocodeView.qml, SearchView.qml, PlaceListView.qml and FiltersView.qml implement geocoding functionalities. We put these views in separated files in order to avoid having overly large code files.

 

We enjoyed creating this sample for you and hope you find it helpful as you create amazing native apps in AppStudio with nearby functionalities. Stay tuned for more samples rolling out soon. 

Resources:

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.