Create and save map | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Create and save a map as a web map item to an ArcGIS portal.

Image of create and save map

Use case

Maps can be created programmatically in code and then serialized and saved as an ArcGIS portal item. In this case, the portal item is a web map which can be shared with others and opened in various applications and APIs throughout the platform, such as ArcGIS Pro, ArcGIS Online, the JavaScript API, Collector, and Explorer.

How to use the sample

When you run the sample, you will be challenged for an ArcGIS Online login. Enter a username and password for an ArcGIS Online named user account (such as your ArcGIS for Developers account). Then, tap the Edit Map button to choose the basemap and layers for your new map. To save the map, add a title, tags and description (optional), and a folder on your portal (you will need to create one in your portal’s My Content section if you don’t already have one). Click the Save to Account button to save the map to the chosen folder.

How it works

Configure an AuthenticatorState to handle authentication challenges.
Add the AuthenticatorState to a DialogAuthenticator in the app’s MainActivity to invoke the authentication challenge.
Create a new Portal and load it.
Access the PortalUserContent with portal.portalInfo?.user?.fetchContent()?.onSuccess, to get the user’s list of portal folders with portalUserContent.folders.
Create an ArcGISMap with a BasemapStyle and a few operational layers.
Call ArcGISMap.saveMap() to save a new ArcGISMap with the specified title, tags, and folder to the portal.

Relevant API

ArcGISMap
Portal

Additional information

This sample uses the toolkit’s authentication module to handle authentication. For information about setting up the toolkit, as well as code for the underlying component, visit the toolkit docs. This sample also uses the GeoView-Compose Toolkit module to be able to implement a composable MapView.

Sample Code

MainActivity.kt

MapViewModel.kt

MainScreen.kt

/* Copyright 2024 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.createandsavemap

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.toolkit.authentication.DialogAuthenticator
import com.esri.arcgismaps.sample.createandsavemap.components.MapViewModel
import com.esri.arcgismaps.sample.createandsavemap.screens.MainScreen
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                SampleApp()
            }
        }
    }

    @Composable
    private fun SampleApp() {
        val mapViewModel: MapViewModel = viewModel()
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            MainScreen(
                sampleName = getString(R.string.create_and_save_map_app_name)
            )
        }

        // authenticator at bottom can draw over the top of the sample
        DialogAuthenticator(authenticatorState = mapViewModel.authenticatorState)
    }
}

/* Copyright 2024 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.createandsavemap.components

import android.app.Application
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.httpcore.authentication.OAuthUserConfiguration
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.Basemap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.layers.ArcGISMapImageLayer
import com.arcgismaps.mapping.layers.Layer
import com.arcgismaps.portal.Portal
import com.arcgismaps.portal.PortalFolder
import com.arcgismaps.toolkit.authentication.AuthenticatorState
import com.esri.arcgismaps.sample.createandsavemap.R
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

class MapViewModel(application: Application) : AndroidViewModel(application) {

    // view model to handle popup dialogs
    val messageDialogVM = MessageDialogViewModel()

    // set up authenticator state to handle authentication challenges
    val authenticatorState = AuthenticatorState().apply {
        oAuthUserConfigurations = listOf(
            OAuthUserConfiguration(
                portalUrl = application.getString(R.string.portal_url),
                clientId = application.getString(R.string.client_id),
                redirectUrl = application.getString(R.string.redirect_url)
            )
        )
    }

    // require use of user credential to load portal
    private val portal = Portal("https://www.arcgis.com", Portal.Connection.Authenticated)

    // update displayed map once user is authenticated
    var arcGISMap by mutableStateOf(ArcGISMap())

    // folders on portal associated with the authenticated user
    private val _portalFolders = MutableStateFlow<List<PortalFolder>>(listOf())
    val portalFolders = _portalFolders.asStateFlow()


    // define a couple of feature layers to be loaded
    private val worldElevation =
        ArcGISMapImageLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer")
    private val usCensus =
        ArcGISMapImageLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")
    val availableLayers: List<Layer> = listOf(worldElevation, usCensus)

    // associate basemap styles with friendly names
    val stylesMap: Map<String, BasemapStyle> = mapOf(
        Pair("Streets", BasemapStyle.ArcGISStreets),
        Pair("Imagery", BasemapStyle.ArcGISImageryStandard),
        Pair("Topographic", BasemapStyle.ArcGISTopographic),
        Pair("Oceans", BasemapStyle.ArcGISOceans)
    )

    // properties hoisted from UI bottom sheet

    var selectedBasemapStyle by mutableStateOf("Streets")
        private set

    fun updateBasemapStyle(style: String) {
        selectedBasemapStyle = style

        // update map to display selected basemap style
        arcGISMap.setBasemap(Basemap(stylesMap.getValue(selectedBasemapStyle)))
    }

    fun updateActiveLayers(layer: Layer) {
        arcGISMap.operationalLayers.apply {
            if (contains(layer)) {
                remove(layer)
            } else {
                add(layer)
            }
        }
    }

    var mapName by mutableStateOf("My Map")
        private set

    fun updateName(name: String) {
        mapName = name
    }

    var mapTags by mutableStateOf("map, census, layers")
        private set

    fun updateTags(tags: String) {
        mapTags = tags
    }

    var portalFolder by mutableStateOf<PortalFolder?>(null)

    fun updateFolder(folder: PortalFolder?) {
        portalFolder = folder
    }

    var mapDescription by mutableStateOf("")
        private set

    fun updateDescription(description: String) {
        mapDescription = description
    }

    init {
        viewModelScope.launch {
            portal.load().onSuccess {
                // when the user has successfully authenticated and the portal is loaded...

                // populate the portal folders flow
                portal.portalInfo?.apply {
                    this.user?.fetchContent()?.onSuccess {
                        _portalFolders.value = it.folders
                    }
                }

                // load the streets basemap and set an initial viewpoint
                arcGISMap = ArcGISMap(BasemapStyle.ArcGISStreets).apply {
                    initialViewpoint = Viewpoint(38.85, -90.2, 1e7)
                }

                // load operational layers
                worldElevation.load()
                usCensus.load()
            }.onFailure {
                // login was cancelled or failed to authenticate
                messageDialogVM.showMessageDialog(
                    application.getString(R.string.createAndSaveMap_failedToLoadPortal),
                    it.message.toString()
                )
            }
        }
    }

    /**
     * Saves the map to a user's account.
     */
    suspend fun save(): Result<Unit> {
        return arcGISMap.saveAs(
            portal,
            description = mapDescription,
            folder = portalFolder,
            tags = mapTags.split(",").map { str -> str.trim() },
            forceSaveToSupportedVersion = false,
            thumbnail = null,
            title = mapName
        )
    }


}

/* Copyright 2024 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.createandsavemap.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.Button
import androidx.compose.material3.Checkbox
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MenuAnchorType
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.layers.Layer
import com.arcgismaps.portal.PortalFolder
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.createandsavemap.components.MapViewModel
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

/**
 * Main screen layout for the sample app
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen(sampleName: String) {
    // create a ViewModel to handle MapView interactions
    val mapViewModel: MapViewModel = viewModel()

    val composableScope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    val controlsBottomSheetState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberStandardBottomSheetState(skipHiddenState = false).apply {
            composableScope.launch { hide() }
        }
    )

    Scaffold(
        snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it),
                contentAlignment = Alignment.Center
            ) {
                // map view not shown until the portal is loaded and a basemap has been set
                MapView(
                    arcGISMap = mapViewModel.arcGISMap,
                    Modifier.fillMaxSize(),
                )

                // show the "Edit map" button only when the bottom sheet is not visible
                if (!controlsBottomSheetState.bottomSheetState.isVisible) {
                    FloatingActionButton(
                        modifier = Modifier
                            .align(Alignment.BottomEnd)
                            .padding(bottom = 36.dp, end = 24.dp),
                        onClick = {
                            composableScope.launch {
                                controlsBottomSheetState.bottomSheetState.show()
                            }
                        })
                    {
                        Icon(Icons.Filled.Edit, contentDescription = "Edit map button")
                        Spacer(Modifier.padding(8.dp))
                    }
                }

                BottomSheetScaffold(
                    modifier = Modifier.wrapContentHeight(),
                    scaffoldState = controlsBottomSheetState,
                    sheetPeekHeight = LocalConfiguration.current.screenHeightDp.dp.times(0.33f),
                    sheetContent = {
                        Column(
                            Modifier
                                .padding(12.dp)
                                .navigationBarsPadding()
                                .verticalScroll(rememberScrollState())
                        ) {
                            CreateMapBottomSheet(
                                mapViewModel = mapViewModel
                            )

                            Button(
                                modifier = Modifier
                                    .align(Alignment.CenterHorizontally)
                                    .padding(12.dp),
                                onClick = {
                                    composableScope.launch {
                                        // dismiss bottom sheet immediately
                                        controlsBottomSheetState.bottomSheetState.hide()

                                        // report success in a snack bar, failure in a popup
                                        mapViewModel.save().onSuccess {
                                            snackbarHostState.showSnackbar(
                                                "Map saved to portal.",
                                                withDismissAction = true
                                            )
                                        }.onFailure { err ->
                                            mapViewModel.messageDialogVM.showMessageDialog(
                                                "Error",
                                                err.message.toString()
                                            )
                                        }
                                    }
                                }) {
                                Text("Save to account")
                            }
                        }
                        Spacer(Modifier.size(8.dp))
                    }
                ) {}
            }

            // message dialog can draw over all other content in the main screen
            mapViewModel.messageDialogVM.apply {
                if (dialogStatus) {
                    MessageDialog(
                        title = messageTitle,
                        description = messageDescription,
                        onDismissRequest = ::dismissDialog
                    )
                }
            }
        }
    )
}

/**
 * Composable function to populate bottom sheet with sample options.
 */
@Composable
fun CreateMapBottomSheet(
    mapViewModel: MapViewModel
) {

    Column(
        modifier = Modifier.padding(vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Choose map settings:",
            style = MaterialTheme.typography.titleMedium
        )
        BasemapDropdown(
            mapViewModel.selectedBasemapStyle,
            mapViewModel.stylesMap,
            mapViewModel::updateBasemapStyle
        )

        LayersDropdown(
            mapViewModel.availableLayers,
            mapViewModel.arcGISMap,
            mapViewModel::updateActiveLayers
        )

        HorizontalDivider(Modifier.padding(vertical = 12.dp, horizontal = 8.dp))

        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = mapViewModel.mapName,
            onValueChange = { newName -> mapViewModel.updateName(newName) },
            label = { Text(text = "Enter map name:") },
            singleLine = true,
        )

        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = mapViewModel.mapTags,
            onValueChange = { newTags -> mapViewModel.updateTags(newTags) },
            label = { Text(text = "Tags:") },
            singleLine = true,
        )

        FolderDropdown(
            mapViewModel.portalFolder,
            mapViewModel.portalFolders,
            mapViewModel::updateFolder
        )

        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = mapViewModel.mapDescription,
            onValueChange = { newDescription -> mapViewModel.updateDescription(newDescription) },
            label = { Text(text = "Description:") },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done)
        )
    }
}

/**
 * Composable function to display portal folder dropdown in the bottom sheet.
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FolderDropdown(
    currentFolder: PortalFolder?,
    portalFolders: StateFlow<List<PortalFolder>>,
    updateFolder: (PortalFolder?) -> Unit
) {

    var expanded by rememberSaveable { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        modifier = Modifier.fillMaxWidth(),
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }
    ) {
        var label by remember {
            mutableStateOf(
                currentFolder?.title ?: "(No folder)"
            )
        }

        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor(type = MenuAnchorType.PrimaryNotEditable),
            value = label,
            onValueChange = { newDescription -> label = newDescription },
            label = { Text(text = "Folder:") },
            readOnly = true,
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) }
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            Modifier.padding(vertical = 0.dp)
        ) {
            val folders by portalFolders.collectAsState(initial = listOf())
            if (folders.isEmpty()) {
                Text("No folders to display", Modifier.padding(8.dp))
            } else {
                DropdownMenuItem(
                    text = { Text("(No folder)") },
                    onClick = {
                        updateFolder(null)
                        label = "(No folder)"
                        expanded = false
                    }
                )
                HorizontalDivider()
                folders.forEachIndexed { index, folder ->
                    DropdownMenuItem(
                        text = { Text(folder.title) },
                        onClick = {
                            updateFolder(folder)
                            label = folder.title
                            expanded = false
                        })
                    // show a divider between dropdown menu options
                    if (index < folders.lastIndex) {
                        HorizontalDivider()
                    }
                }
            }
        }
    }

}

/**
 * Composable function to display basemap dropdown in the bottom sheet.
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BasemapDropdown(
    basemapStyle: String,
    stylesNameMap: Map<String, BasemapStyle>,
    updateBasemapStyle: (String) -> Unit
) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        modifier = Modifier.fillMaxWidth(),
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }
    ) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor(type = MenuAnchorType.PrimaryNotEditable),
            value = basemapStyle,
            onValueChange = {},
            label = { Text(text = "Basemap Style:") },
            readOnly = true,
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) }
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            Modifier.padding(vertical = 0.dp)
        ) {

            stylesNameMap.keys.toList().forEachIndexed { index, basemapName ->
                DropdownMenuItem(
                    text = { Text(basemapName) },
                    onClick = {
                        updateBasemapStyle(basemapName)
                        expanded = false
                    })
                // show a divider between dropdown menu options
                if (index < stylesNameMap.keys.toList().lastIndex) {
                    HorizontalDivider()
                }
            }
        }
    }
}

/**
 * Composable function to display active layers dropdown in the bottom sheet.
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LayersDropdown(
    availableLayers: List<Layer>,
    arcGISMap: ArcGISMap,
    updateActiveLayers: (Layer) -> Unit

) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        modifier = Modifier.fillMaxWidth(),
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }
    ) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor(type = MenuAnchorType.PrimaryNotEditable),
            value = "Select...",
            onValueChange = {},
            label = { Text(text = "Operational Layers:") },
            readOnly = true,
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) }
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            availableLayers.forEachIndexed { index, layer ->
                var checked by
                mutableStateOf(
                    arcGISMap.operationalLayers.contains(layer)
                )
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(8.dp)
                ) {
                    Text(layer.name, Modifier.weight(1f))
                    Checkbox(
                        checked = checked,
                        onCheckedChange = {
                            updateActiveLayers(layer)
                            checked = !checked
                        }
                    )
                }
                // show a divider between dropdown menu options
                if (index < availableLayers.lastIndex) {
                    HorizontalDivider()
                }
            }
        }
    }
}