Skip to content

Display map from portal item

View on GitHubSample viewer app

Display a web map from an ArcGIS Online portal item.

Screenshot of display map from 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

  1. Create a Portal instance for ArcGIS Online.
  2. Create a PortalItem using the portal and the web map's item ID.
  3. Create an ArcGISMap from the PortalItem.
  4. Set the map to the MapView.

Relevant API

  • ArcGISMap
  • MapView
  • Portal
  • PortalItem

About the data

The web maps accessed by this sample show:

Tags

portal item, web map

Sample Code

DisplayMapFromPortalItemViewModel.ktDisplayMapFromPortalItemViewModel.ktMainActivity.ktDisplayMapFromPortalItemScreen.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* 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.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.mapping.ArcGISMap
import com.arcgismaps.mapping.PortalItem
import com.arcgismaps.portal.Portal
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import 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
            )
        }
    }
}

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