Community

New Geocoding Sample App Available in AppStudio

1382
0
07-28-2017 12:15 PM
by Anonymous User
Not applicable
2 0 1,382
‎07-28-2017 12:15 PM

Trying to build an app that has an easy to use address finder functionality? Look no further, we are excited to release a brand new beautiful, intuitive and ready-to-use geocoding sample app built with latest ArcGIS Runtime 100.1 and following Google's Material Design guidelines. The source code of this sample is available both in the AppStudio Desktop as well as online at arcgis-appstudio-samples GitHub repo.  

  • You can directly download and run the sample app on your AppStudio Desktop, AppStudio Player, or even build an app on any supported platform.  
  • Check out the code of the sample app and use it to your own amazing AppStudio app
  • It's also a great resource to learn more about QML, building beautiful interfaces using Material Design, AppFramework, and ArcGIS Runtime concepts.  

Few features and highlights of the sample:

When you type an address or a point of interest, a list of suggestions based on the input address will show up, which provides you with a better geocoding experience.  As you can see, when typing 380, the search returns all of the possible results containing 380.  This auto-complete function not only avoids user provide invalid address but also saves time typing out an entire address.                        

        

This geocoding sample app does more than just search for places. We improved the geo-searching experience by sorting search results based on the direction and how far they are from the user’s current location. A campus icon and the distance will be displayed at the beginning of the returned address. As I search for Starbucks, the results that I got are sorted by distance, which is extremely helpful for me to choose the closest Starbucks on the way back home.

            

     

AppStudio for ArcGIS 2.0 now supports ArcGIS Runtime Version 100.1, which means many features such as 3D scenes, raster data, mobile map packages, and vector tiles can be used in your mapping applications. This geocoding sample app takes advantage of new runtime capabilities and uses the World Street Map, which is a vector tile layer as the basemap. The vector tile layer delivers a high-resolution display across devices. It also performs faster than raster tiles due to the fact that it has a smaller file size. The vector tile layer provides unique capabilities for customization, such as changing its label fonts, symbology, content, and more.

           

Can't wait? Let's get started:

  1. Download AppStudio Desktop Edition from here (if you have not already)
  2. Click on the New App button
  3. Search for the Geocoding sample app
  4. Choose the Geocoding sample app and click Create
  5. Now you can run the app and also upload it to your org and use the Player to play it in your own device of choice.
  6. If you want to learn more about the code, click the 'Edit' icon on the side panel to view and edit source code

               

When you open the app project from Qt Creator.  The first folder, “controls” contains four files, which are used to complete the user interface. Each file is a customized control component, which can be reused by calling the filename. For example, the MapRoundButton.qml file includes the snippets of QML code that defines a round button interface; it is used three times for three round buttons on the right of the map. To load a component:

  1. Import a component. In this case, we use import "../controls" statement
  2. Load a component by calling the QML filename.                                                                                                     Note that in the MapArea.qml file, the MapRoundButton component matches the QML filename.

            

The second folder, “images,” contains all of the system icon images for the Geocoding app. You will find the most important source code from the third folder; “views.” The GeocodeView.qml includes QML code that implements the geocoding function.  Take a look at imports; you might notice the import Esri.ArcGISRuntime 100.1 statement. ArcGISRuntime SDK integrates mapping and GIS capabilities and empowers this geocoding sample app. Geocoding is implemented with the LocatorTask class. You can pass an online locator URL or create an offline locator and pass the file path to the LocatorTask. ArcGIS Online World Geocoding service is used in this sample. You will be able to find the LocatorTask class from the GeocodeView.qml file (line 285).

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

The MapArea.qml file includes the QML code that imports the base map, complete action button interface, and the button's 'click' functionality, as well as drawing a pinpoint of the reach results on the map.

And that was a quick look at the structure and code of the geocoding sample app.  I hope you find it helpful to implement geocoding functionality to your own amazing native apps.  More exciting sample apps will roll out soon!