Display a web map from an ArcGIS Online portal item.

Use case
Display web maps stored on ArcGIS Online by referencing their portal item IDs.
How to use the sample
Select a map from the dropdown menu to display it in the map view. The map will update to show the selected web map.
How it works
- Create a
Portalinstance for ArcGIS Online. - Create a
PortalItemusing the portal and the web map’s item ID. - Create an
ArcGISMapfrom thePortalItem. - Set the map to the
MapView.
Relevant API
- ArcGISMap
- MapView
- Portal
- PortalItem
About the data
The web maps accessed by this sample show:
- Geology for United States
- Terrestrial Ecosystems of the World
- Recent Hurricanes, Cyclones and Typhoons
Tags
portal item, web map
Sample Code
/* Copyright 2025 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.displaymapfromportalitem
import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.activity.enableEdgeToEdgeimport androidx.compose.material3.MaterialThemeimport androidx.compose.material3.Surfaceimport androidx.compose.runtime.Composableimport com.arcgismaps.ApiKeyimport com.arcgismaps.ArcGISEnvironmentimport com.esri.arcgismaps.sample.sampleslib.theme.SampleAppThemeimport com.esri.arcgismaps.sample.displaymapfromportalitem.screens.DisplayMapFromPortalItemScreen
class MainActivity : ComponentActivity() {
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.ACCESS_TOKEN)
enableEdgeToEdge() setContent { SampleAppTheme { DisplayMapFromPortalItemApp() } } }
@Composable private fun DisplayMapFromPortalItemApp() { Surface(color = MaterialTheme.colorScheme.background) { DisplayMapFromPortalItemScreen( sampleName = getString(R.string.display_map_from_portal_item_app_name) ) } }}/* Copyright 2025 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.displaymapfromportalitem.screens
import androidx.compose.animation.animateContentSizeimport androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.foundation.layout.fillMaxWidthimport androidx.compose.foundation.layout.paddingimport androidx.compose.material3.Scaffoldimport androidx.compose.runtime.Composableimport androidx.compose.runtime.rememberimport androidx.compose.ui.Alignmentimport androidx.compose.ui.Modifierimport androidx.compose.ui.unit.dpimport androidx.lifecycle.viewmodel.compose.viewModelimport com.arcgismaps.toolkit.geoviewcompose.MapViewimport com.esri.arcgismaps.sample.displaymapfromportalitem.components.DisplayMapFromPortalItemViewModelimport com.esri.arcgismaps.sample.sampleslib.components.DropDownMenuBoximport com.esri.arcgismaps.sample.sampleslib.components.MessageDialogimport com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
/** * Main screen layout for the sample app. */@Composablefun DisplayMapFromPortalItemScreen(sampleName: String) { val mapViewModel: DisplayMapFromPortalItemViewModel = viewModel() val mapOptions = mapViewModel.mapOptions val currentMapOption = mapViewModel.currentMapOption
Scaffold( topBar = { SampleTopAppBar(title = sampleName) }, content = { padding -> Column( modifier = Modifier .fillMaxSize() .padding(padding), ) { MapView( modifier = Modifier .fillMaxSize() .weight(1f), arcGISMap = mapViewModel.arcGISMap ) MapSelectionDropDown( mapOptions = mapOptions, selectedOption = currentMapOption, onOptionSelected = mapViewModel::onMapOptionSelected ) }
mapViewModel.messageDialogVM.apply { if (dialogStatus) { MessageDialog( title = messageTitle, description = messageDescription, onDismissRequest = ::dismissDialog ) } } } )}
@Composableprivate fun MapSelectionDropDown( mapOptions: List<DisplayMapFromPortalItemViewModel.PortalItemMap>, selectedOption: DisplayMapFromPortalItemViewModel.PortalItemMap, onOptionSelected: (DisplayMapFromPortalItemViewModel.PortalItemMap) -> Unit) { val titles = remember(mapOptions) { mapOptions.map { it.title } } val selectedIndex = mapOptions.indexOf(selectedOption).coerceAtLeast(0) Column( modifier = Modifier .fillMaxWidth() .padding(12.dp), horizontalAlignment = Alignment.CenterHorizontally ) { DropDownMenuBox( modifier = Modifier.animateContentSize(), textFieldValue = titles.getOrNull(selectedIndex) ?: "", textFieldLabel = "Maps", dropDownItemList = titles, onIndexSelected = { index -> mapOptions.getOrNull(index)?.let { onOptionSelected(it) } } ) }}/* Copyright 2025 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.displaymapfromportalitem.components
import android.app.Applicationimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.setValueimport androidx.lifecycle.AndroidViewModelimport androidx.lifecycle.viewModelScopeimport com.arcgismaps.mapping.ArcGISMapimport com.arcgismaps.mapping.PortalItemimport com.arcgismaps.portal.Portalimport com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModelimport kotlinx.coroutines.launch
/** * ViewModel for displaying a map from a portal item. */class DisplayMapFromPortalItemViewModel(app: Application) : AndroidViewModel(app) {
// List of available portal item map options val mapOptions = listOf( PortalItemMap( title = "Terrestrial Ecosystems of the World", itemId = "5be0bc3ee36c4e058f7b3cebc21c74e6" ), PortalItemMap( title = "Recent Hurricanes, Cyclones and Typhoons", itemId = "064f2e898b094a17b84e4a4cd5e5f549" ), PortalItemMap( title = "Geology of United States", itemId = "92ad152b9da94dee89b9e387dfe21acd" ) )
// The currently selected portal item map option var currentMapOption by mutableStateOf(mapOptions.first()) private set
// The ArcGISMap to display var arcGISMap by mutableStateOf( ArcGISMap(item = mapOptions.first().portalItem) ) private set
// Message dialog for error handling val messageDialogVM = MessageDialogViewModel()
init { viewModelScope.launch { arcGISMap.load().onFailure { messageDialogVM.showMessageDialog(it) } } }
/** * Updates the map to display the selected portal item map option. */ fun onMapOptionSelected(portalItemOption: PortalItemMap) { if (portalItemOption != currentMapOption) { currentMapOption = portalItemOption arcGISMap = ArcGISMap(item = portalItemOption.portalItem) viewModelScope.launch { arcGISMap.load().onFailure { messageDialogVM.showMessageDialog(it) } } } }
/** * Data class representing a portal item map option. */ data class PortalItemMap( val title: String, val itemId: String ) { val portalItem: PortalItem by lazy { PortalItem( portal = Portal.arcGISOnline(Portal.Connection.Anonymous), itemId = itemId ) } }}