Display Composable MapView

View on GitHubSample viewer app

Display a map using Jetpack Compose.

Image of display composable mapview

Use case

Android Jetpack Compose is designed to be more efficient and performant than XML layouts. It allows you to define UI in a more declarative and composable way. Compose is also designed to work seamlessly with Kotlin. Visit the Android doc, why adopt Compose? to learn more.

How to use the sample

Run the sample to view the map. Pan and zoom to navigate the map.

How it works

  1. Create a custom @Composable function to wrap the MapView
  2. Use AndroidView to wrap a classic Android view in a Compose UI.
  3. Set its Modifier to define the MapView layout parameters
  4. Use its factory parameter to provide context and create MapView(context)
  5. Add the MapView to the lifecycle observer
  6. Add the composable content to the Activity using setContent { }

Relevant API

  • ArcGISMap
  • BasemapStyle
  • MapView

Tags

basemap, compose, jetpack, map

Sample Code

MainActivity.ktMainActivity.ktMapViewWithCompose.kt
Use dark colors for code blocksCopy
                                                                          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.displaycomposablemapview

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme

class MainActivity : ComponentActivity() {

    private val viewpointAmerica = Viewpoint(39.8, -98.6, 10e7)
    private val viewpointAsia = Viewpoint(39.8, 98.6, 10e7)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // authentication with an API key or named user is
        // required to access basemaps and other location services
        ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.API_KEY)

        setContent {
            SampleAppTheme {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // a mutable/immutable state is computed by remember to store its value during
                    // initial composition, and updates the composition on the state value change
                    var viewpoint by remember { mutableStateOf(viewpointAmerica) }
                    val map by remember { mutableStateOf(ArcGISMap(BasemapStyle.ArcGISNavigationNight)) }

                    // Composable function that wraps the MapView
                    MapViewWithCompose(
                        arcGISMap = map,
                        viewpoint = viewpoint,
                        // lambda to retrieve the MapView's onSingleTapConfirmed
                        onSingleTap = {
                            // swap between America and Asia viewpoints
                            viewpoint =
                                if (viewpoint == viewpointAmerica) viewpointAsia else viewpointAmerica
                        }
                    )
                }
            }
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.