Display Customer Locations Using a Fiori Map Control

In this section you will create a new activity to display a map.

In this section, you will add code to place a marker on the map for each customer.

In this section, you will add code to display the customer detail screen when the info marker is tapped.

In this section, you will create a new activity that uses the Fiori Map control.

In this section, the bottom panel will be populated with details of the selected marker and an action will be implemented to enable navigation to the selected customer’s detail page.

In this section you will implement the settings dialog to include a map type setting and a clustering toggle.

1. Create a new Layout Resource File in res/layout called settings_panel.xml and replace its contents with the following code. This creates the layout for the settings page.

   XML

   Copy

   <?xml version="1.0" encoding="utf-8"?>
   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
   
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_gravity="fill_horizontal"
               android:orientation="horizontal">
   
               <com.sap.cloud.mobile.fiori.formcell.ChoiceFormCell
                   android:id="@+id/map_type"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   app:key="Map Type" />
   
           </LinearLayout>
   
           <com.sap.cloud.mobile.fiori.formcell.SwitchFormCell
               android:id="@+id/use_clustering"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:showText="true"
               app:key="Clustering"
               app:value="true" />
   
       </LinearLayout>
   </ScrollView>
   

2. On Windows, press Ctrl+N, or, on a Mac, press command+O, and type CustomersFioriMapActivity to open CustomersFioriMapActivity.kt.

3. On Windows, press Ctrl+F12, or, on a Mac, press command+F12, and type onMapCreated to navigate to the onMapCreated method.

4. Find the following line of code:

   Kotlin

   Copy

   mActionProvider.setClustering(false)
   

5. Replace the line above with the following code:

   Kotlin

   Copy

   val settingsView = inflater.inflate(R.layout.settings_panel, null)
   
   // Setup selection of a different map type
   val mapTypeChoice = settingsView.findViewById<ChoiceFormCell>(R.id.map_type)
   mapTypeChoice.valueOptions = arrayOf<String>("Normal", "Satellite", "Terrain", "Hybrid")
   mapTypeChoice.cellValueChangeListener = object : FormCell.CellValueChangeListener<Int>() {
       override fun cellChangeHandler(value: Int?) {
           value?.let {
               when (it) {
                   0 -> mMapType = GoogleMap.MAP_TYPE_NORMAL
                   1 -> mMapType = GoogleMap.MAP_TYPE_SATELLITE
                   2 -> mMapType = GoogleMap.MAP_TYPE_TERRAIN
                   3 -> mMapType = GoogleMap.MAP_TYPE_HYBRID
               }
               mGoogleFioriMapView.map?.mapType = mMapType
           }
       }
   }
   
   if (mMapType == 0) {
       mapTypeChoice.value = mMapType
   } else {
       mapTypeChoice.value = mMapType - 1
   }
   
   mGoogleFioriMapView.setSettingsView(settingsView)
   
   if (mMapType != GoogleMap.MAP_TYPE_NONE) {
       mGoogleFioriMapView.map?.mapType = mMapType
   }
   
   // Setup clustering selection.
   val useClusteringSwitch = settingsView.findViewById<SwitchFormCell>(R.id.use_clustering)
   useClusteringSwitch.value = mUseClustering
   mActionProvider.setClustering(mUseClustering)
   useClusteringSwitch.cellValueChangeListener = object: FormCell.CellValueChangeListener<Boolean>() {
       override fun cellChangeHandler(value: Boolean?) {
           value?.let {
               mUseClustering = it
               mActionProvider.setClustering(mUseClustering)
           }
       }
   }
   

6. Run the app.

7. Tap on the settings icon in the toolbar.

   

8. Change the map type to Hybrid and turn Clustering on.

   
   

   Notice that the markers in close proximity are now grouped together and a number indicates how many markers are in the cluster.

   

Congratulations! You have now successfully added a Fiori Map to an application and tried out some of the features it provides.

In this section, you will test the three different types of annotations.

In order to redraw the points the next time the map is opened, you must save and store them in the app using the on save click listener.

In this section you will customize the map markers based on the customer’s country. The different marker colors will be recorded in the legend as well.

1. On Windows, press Ctrl+N, or, on a Mac, press command+O, and type CustomersFioriMapActivity to open CustomersFioriMapActivity.kt.

2. On Windows, press Ctrl+F12, or, on a Mac, press command+F12, and type addCustomerMarkerToMap to navigate to the addCustomerMarkerToMap method.

3. Replace the method with the following code:

   Kotlin

   Copy

   private fun addCustomerMarkerToMap(customer: Customer) {
       val country = customer.country
       getCustomerLatLongFromAddress(customer.city + ", " + country)?.let { latLng ->
           var color = (Color.parseColor("#E9573E")) // US
           if (country == "MX") {
               color = (Color.parseColor("#FFA02B"))
           } else if (country == "CA") {
               color = Color.parseColor("#0070F2")
           }
           val customerMarker = FioriMarkerOptions.Builder()
               .tag(customer)
               .point(FioriPoint(latLng.latitude, latLng.longitude))
               .title(customer.firstName + " " + customer.lastName)
               .legendTitle(customer.country)
               .color(color)
               .build()
           mActionProvider.addMarker(customerMarker)
           markers[customer.city + ", " + customer.country] = customerMarker
           mGoogleFioriMapView.map?.moveCamera(CameraUpdateFactory.newLatLng(latLng))
       }
   }
   

4. Run the app.

   The markers now have different colors depending on whether they are located in Canada (CA), the United States (US), or Mexico (MX). The meaning of the colors is shown in the legend.

   

   With clustering enabled, notice that clustered markers turn white if the markers in the cluster are located in different countries.

Congratulations. You have now seen how an app can make use of the Fiori map control.