Update sample - query feature table (#160)

query-feature-table/README.md

@@ -30,6 +30,10 @@ Input the name of a U.S. state into the text field. When you click the search ic
 
 This sample uses U.S. State polygon features from the [USA 2016 Daytime Population](https://www.arcgis.com/home/item.html?id=f01f0eda766344e29f42031e7bfb7d04) feature service.
 
+## Additional information
+
+This sample uses the GeoCompose Toolkit module to be able to implement a Composable MapView.
+
 ## Tags
 
-query, search
+geocompose, query, search, toolkit

query-feature-table/README.metadata.json

@@ -7,8 +7,10 @@
         "query-feature-table.png"
     ],
     "keywords": [
+        "geocompose",
         "query",
         "search",
+        "toolkit",
         "FeatureLayer",
         "FeatureQueryResult",
         "QueryParameters",
@@ -24,7 +26,6 @@
     ],
     "snippets": [
         "src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/MainActivity.kt",
-        "src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/components/ComposeMapView.kt",
         "src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/components/MapViewModel.kt",
         "src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/screens/MainScreen.kt",
         "src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/screens/SearchBar.kt"

query-feature-table/build.gradle

@@ -45,4 +45,7 @@ dependencies {
     implementation "androidx.compose.ui:ui-tooling"
     implementation "androidx.compose.ui:ui-tooling-preview"
     implementation project(path: ':samples-lib')
+    // Toolkit dependencies
+    implementation(platform("com.esri:arcgis-maps-kotlin-toolkit-bom:$arcgisToolkitVersion"))
+    implementation('com.esri:arcgis-maps-kotlin-toolkit-geo-compose')
 }

query-feature-table/src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/MainActivity.kt

@@ -48,8 +48,7 @@ class MainActivity : ComponentActivity() {
             color = MaterialTheme.colorScheme.background
         ) {
             MainScreen(
-                sampleName = getString(R.string.app_name),
-                application = application
+                sampleName = getString(R.string.app_name)
             )
         }
     }

query-feature-table/src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/components/MapViewModel.kt

@@ -25,7 +25,6 @@ import com.arcgismaps.Color
 import com.arcgismaps.data.FeatureQueryResult
 import com.arcgismaps.data.QueryParameters
 import com.arcgismaps.data.ServiceFeatureTable
-import com.arcgismaps.geometry.Geometry
 import com.arcgismaps.geometry.Point
 import com.arcgismaps.geometry.SpatialReference
 import com.arcgismaps.mapping.ArcGISMap
@@ -37,6 +36,7 @@ import com.arcgismaps.mapping.symbology.SimpleFillSymbolStyle
 import com.arcgismaps.mapping.symbology.SimpleLineSymbol
 import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
 import com.arcgismaps.mapping.symbology.SimpleRenderer
+import com.arcgismaps.toolkit.geocompose.MapViewpointOperation
 import com.esri.arcgismaps.sample.queryfeaturetable.R
 import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
 import kotlinx.coroutines.CoroutineScope
@@ -48,9 +48,6 @@ class MapViewModel(
     private val sampleCoroutineScope: CoroutineScope
 ) : AndroidViewModel(application) {
 
-    // get an instance of the MapView state
-    val mapViewState = MapViewState()
-
     // create a ViewModel to handle dialog interactions
     val messageDialogVM: MessageDialogViewModel = MessageDialogViewModel()
 
@@ -64,6 +61,17 @@ class MapViewModel(
         FeatureLayer.createWithFeatureTable(serviceFeatureTable)
     }
 
+    // map used to display the feature layer
+    val map = ArcGISMap(BasemapStyle.ArcGISTopographic)
+
+    private var usaViewpoint = Viewpoint(
+        center = Point(-11e6, 5e6, SpatialReference.webMercator()),
+        scale = 1e8
+    )
+
+    // define a mutable MapViewpointOperation and set the initial viewpoint
+    var mapViewpointOperation: MapViewpointOperation by mutableStateOf(MapViewpointOperation.Set(usaViewpoint))
+
     init {
         // use symbols to show U.S. states with a black outline and yellow fill
         val lineSymbol = SimpleLineSymbol(
@@ -77,14 +85,15 @@ class MapViewModel(
             outline = lineSymbol
         )
 
+        // set featurelayer properties
         featureLayer.apply {
             // set renderer for the feature layer
             renderer = SimpleRenderer(fillSymbol)
             opacity = 0.8f
             maxScale = 10000.0
         }
         // add the feature layer to the map's operational layers
-        mapViewState.arcGISMap.operationalLayers.add(featureLayer)
+        map.operationalLayers.add(featureLayer)
     }
 
     /**
@@ -113,28 +122,11 @@ class MapViewModel(
                 // get the extent of the first feature in the result to zoom to
                 val envelope = feature.geometry?.extent
                     ?: return@launch messageDialogVM.showMessageDialog("Error retrieving geometry extent")
-                // update the map view to set the viewpoint to the state geometry
-                mapViewState.stateGeometry = envelope
+                // update the viewpoint to the bounding geometry of the returned feature
+                mapViewpointOperation = MapViewpointOperation.SetBoundingGeometry(envelope)
             } else {
                 messageDialogVM.showMessageDialog("No states found with name: $searchQuery")
             }
         }
     }
 }
-
-/**
- * Class that represents the MapView state
- */
-class MapViewState {
-    // map used to display the feature layer
-    var arcGISMap: ArcGISMap by mutableStateOf(ArcGISMap(BasemapStyle.ArcGISTopographic))
-
-    // geometry of the queried state
-    var stateGeometry: Geometry? by mutableStateOf(null)
-
-    // set an initial viewpoint over the USA
-    val initialViewpoint: Viewpoint = Viewpoint(
-        center = Point(-11e6, 5e6, SpatialReference.webMercator()),
-        scale = 1e8
-    )
-}

query-feature-table/src/main/java/com/esri/arcgismaps/sample/queryfeaturetable/screens/MainScreen.kt

@@ -26,7 +26,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
-import com.esri.arcgismaps.sample.queryfeaturetable.components.ComposeMapView
+import androidx.compose.ui.platform.LocalContext
+import com.arcgismaps.toolkit.geocompose.MapView
 import com.esri.arcgismaps.sample.queryfeaturetable.components.MapViewModel
 import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
 import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
@@ -35,20 +36,27 @@ import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
  * Main screen layout for the sample app
  */
 @Composable
-fun MainScreen(sampleName: String, application: Application) {
+fun MainScreen(sampleName: String) {
     // coroutineScope that will be cancelled when this call leaves the composition
     val sampleCoroutineScope = rememberCoroutineScope()
+    // get the application context
+    val application = LocalContext.current.applicationContext as Application
     // create a ViewModel to handle MapView interactions
     val mapViewModel = remember { MapViewModel(application, sampleCoroutineScope) }
 
     Scaffold(
         topBar = { SampleTopAppBar(title = sampleName) },
         content = {
-            Column(modifier = Modifier.fillMaxSize().padding(it)) {
+            Column(modifier = Modifier
+                .fillMaxSize()
+                .padding(it)) {
                 // composable function that wraps the MapView
-                ComposeMapView(
-                    modifier = Modifier.fillMaxWidth().weight(1f),
-                    mapViewModel = mapViewModel
+                MapView(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f),
+                    arcGISMap = mapViewModel.map,
+                    viewpointOperation = mapViewModel.mapViewpointOperation
                 )
                 SearchBar(
                     modifier = Modifier.fillMaxWidth(),